我刚开始在学校编码，我们的老师很糟糕。我必须自学如何编码，因此，我来这里寻求帮助 :)。我使用一些简单的 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/