- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我刚开始在学校编码,我们的老师很糟糕。我必须自学如何编码,因此,我来这里寻求帮助 :)。我使用一些简单的 html 和 css 创建了这个网站,我现在想要的是我在导航栏中使用的图像充当按钮,当按下时,做一些很酷的事情,比如制作动画,或者启动一个关键帧事件,其中我设置的几个关键帧将触发(如闪烁的文本),或者甚至可能运行一个很酷的 javascript。这主要是为了展示,但与此同时,我是来学习的。如果我的代码写得不好,请随时更正。谢谢。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" href="bilde.png">
<meta charset="UTF-8">
<title>Bully</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="css/stil2.css">
</center>
<center><ul class="navigation">
<li><a href="bully2.html">Home</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="" target="_blank">
[This is that I want to use as a button ->] <img src="bilde.png" alt="Emblem" style="width:120px;height:120px;border:0";>
</a>
<li><a href="orbok2.html">Gallery</a></li>
<li><a href="Lore.html">Lore</a></li>
</ul>
<ul class="flex-container">
<li class="flex-item" style="font-size:42px;"><h1>~Breaking News~</h1>
<li class="flex-item"><h1><ins>26. October, 2017.</ins></h1><br><a style="font-size:32px;">The release of the videogame "Bully 2" has just been confirmed, according to a variety of different reliable sources. Spokesperson Bad Andy from Bullworth Chess Club confirmed the release date of Bully 2 to be on January 1st of 2019. "Bully's long-awaited sequel will be a tremendous success in today's videogame-industry," said Andy in an interview with Russel Barro, owner of The Bullworth Herald.<br></a><h2>~Jimmy Hopkins~</h2></li>
<center><ul class="flex-container">
<center><li class="flex-item"><h1><ins>18. October, 2017.</ins></h1><br><a style="font-size:32px;">Fire alarm was set off at 11:24 by unknown student or person. Faculty and staff encourage all students to send in clues and tips about the incident to: Bullworthacademy@edu.com</a><br><h2>~Staff~</h2></li>
<center><ul class="flex-container">
<center><li class="flex-item"><h1><ins>Bully 2 "confirmed" by R* insider?</ins></h1><br><a style="font-size:32px;">Trusted gtaforum.com-admin "Yan2295" made a post on April 21st saying this: <br> <br> </a>
<img src="yan.png" style="border:2.5px solid black;width:65%;height:250px;">
</p><br><h2>~Russel Hustle~</h2></li>
</div>
</ul>
</body>
</html>
CSS
@import "compass/css3";
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
}
body{
background-image:url("brun.jpeg");
background-repeat:no-repeat;
background-size:1270px;
background-attachment:fixed;
}
.flex-container {
padding:0;
margin:0;
width:1000px;
list-style: none;
flex-direction:column;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row-wrap;
justify-content: center;
}
.flex-item {
background-color: rgba(0, 0, 0, 0.25);
margin-top: 0px;
margin-bottom:0px;
margin-left:0;
border-top:0px solid ;
border-left:3px solid rgba(0, 0, 0, 1);
border-bottom:0px solid ;
border-right:3px solid rgba(0, 0, 0, 1);
border-radius:0px;
padding-bottom:100px;
padding-top:100px;
line-height:40px;
color:rgba(252, 174, 26, 255);
font-weight: bold;
font-size: 26px;
font-family:NarcissusOpenSG;
text-align:center;
flex-grow: 0;
justify-content:space-around;
animation-name:text;
animation-iteration-count:infinite;
animation-duration:2s;
animation-direction:alternate;
}
@keyframes jtext{
from {
color:rgba(252, 174, 26, 255);
}
to{
color:rgba(0, 0, 0, 0.5);
}
}
.navigation {
list-style: none;
border-top:3px solid black;
border-bottom:0px solid black;
width:994px;
border-right:3px solid black;
border-left:3px solid black;
margin-top:5px;
margin-bottom:0px;
text-align:center;
align-items:center;
padding:0;
border-top-left-radius:50px;
border-top-right-radius:50px;
background-color: rgba(0, 0, 0, 0.25);
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content:space-around;
font-family:NarcissusOpenSG;
font-size:28px;
}
.navigation a {
text-decoration: none;
display: block;
padding:0;
padding: 1em;
opacity:0.5;
transition-duration:0.5s;
color:rgba(252, 174, 26, 255);
}
.navigation a:hover {
color;
background:;
opacity:1;
animation-duration:1.5s;
animation-iteration-count:infinite;
animation-name:blink;
animation-direction:alternate;
}
keyframes blink {
from {
opacity:0.75;
}
to {
opacity:0;
}
}
@media all and (max-width: 800px) {
.navigation {
justify-content: space-around;
}
}
@media all and (max-width: 600px) {
.navigation {
-webkit-flex-flow: column wrap;
flex-flow: column wrap;
}
.navigation a {
text-align: center;
padding:10px;
border-top: 1px solid rgba(255,255,255,0.3);
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.navigation li:last-of-type a {
border-bottom: 0;
}
最佳答案
有几种方法可以做到这一点:
像这样添加 anchor 标签
<a type="button" href="the url" id="myId">put the image element here</a>
用javascript为带有id的元素写一个点击函数
document.getElementById("myId").onclick=function() { /* some code here */ }
关于html - 我怎样才能让一个图像作为一个按钮,并让它在点击时执行一个 Action (启动一个关键帧事件,运行一个脚本)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47325025/
每当我运行命令以将 Virtualbox 驱动程序启动 Minishift 到操作系统主机时,它都需要一段疯狂的时间,而且它永远不会结束。有时我什至收到有关达到存储限制的错误消息。 不知道是不是描述h
您好,我正在使用 npm 运行一个基本的 React 项目,我正尝试在 docker 容器中启动它。但是我实际上无法让项目运行。我的 dockerfile 看起来像这样: FROM node:7.8.
所以我想从我的 SSH 终端开始游戏。 这真的很奇怪,当我直接从 Linux GUI 执行此操作时,它可以工作。但是当我使用 SSH 客户端进行远程连接时,它就崩溃了。似乎与我的显示驱动程序有关。 U
我有一个显示图像的动态壁纸。我在 Activity 中更改了该图像。然后我需要通知动态壁纸,以便它知道重新加载资源。 Intent 似乎是完美、简单的解决方案: Intent intent = new
我有一个似乎无法解决的问题。我在 Boot Dashboard 中使用 STS 3.9.2 从 Eclipse (Oxygen) 启动 Spring Boot 应用程序没有任何问题: 但是,当我尝试从
全新的 Python,在我开始摆弄东西之前先设置和安装东西。我的理解是 Python 2.7 和 Python 3.3 之间存在一些显着差异/不兼容,尽管这两个版本都得到了很好的使用,所以我认为最好安
在使用了很长时间的 jQuery 之后,我有一个问题,我正在使用 jQuery 模式(样式)编写一个简单的代码, (function(window, undefined) { var jQu
我正在尝试在 spring boot 应用程序下的非 spring 托管类中配置 Autowired。我在 tomcat 服务器下部署的 Web 应用程序下成功运行了这个。但是当我想在 spring
我对 xmonad 完全陌生,但我想开始使用它来提高我的工作效率。 这是我一直在使用的指南(我使用的是 Apple OS X Snow Leopard) http://xmonad.org/tour.
我试图将Spring Boot指南中的Managing Transactions示例扩展到两个数据源,但是@Transaction注释似乎仅对其中一个数据源有效。 在“Application.java
conEmu 有没有办法默认打开多个不同的选项卡? 我看到这个页面解释了如何使用 splits , 我意识到我可以按 Ctrl + T, 1, Enter,但我希望有一种方法可以自动执行此操作! "%
我正在寻找快速而肮脏的答案。我当时脑子一片空白,盯着屏幕看了 12 个小时以上,我想我中枪了。 我想做一个简单的 SignalR 应用程序作为教程。我找到了这个example ,但我不断收到票证未定义
我正在使用 Azure Powershell cmdlet 来启动/停止 VM。 Start-AzureVM [-ServiceName] [-Name] [ ] Stop-AzureVM [-S
我想使用Powershell脚本代码启动/停止iis和mssql 意味着当我运行ps脚本时,我想启动/停止iis和mssql 我在网上搜索了它,发现了一些代码,但按照我的要求无法正常工作 码: $ii
我在 liferay 工作。我们在我们的项目中使用一个模块来创建 liferay 主题。我使用命令 ant -Ddeploy.war=true 将它部署在服务器中。 war 文件在 liferay 部
我想在已安装 Python 2.7 的 Windows XP 计算机上运行 IPython(版本 0.12)。 我通过 Windows 二进制安装程序安装,但安装后 IPython 没有显示在菜单中,
我从创建了自己的简单图片。 FROM python:2.7.11 RUN mkdir /extra/later/ \ && mkdir /yyy 现在,我可以执行以下步骤: docker run
$(document).ready(function () { setTimeout(function() { window.location.reload(); }, 2000); // 2
我刚刚创建了一个帐户 OpenWeatherMap 我想通过城市 ID API 调用获取当前位置的天气: http://api.openweathermap.org/data/2.5/weather?
我注意到,如果我更改 xcasset 中的图像,启动 Storyboard不会更新。 例如,假设您的启动 Storyboard中有一个 UIImage View ,其中包含一个名为“logo”的蓝色图
我是一名优秀的程序员,十分优秀!