我刚开始在学校编程，我们的老师很糟糕。我必须自学如何编码，出于这个原因，我来到这里寻求帮助:)。我使用一些简单的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;
}
有一些方法可以做到这一点：
-
添加这样的锚标记
<a type="button" href="the url" id="myId">put the image element here</a> -
用 javascript 为带有 id 的元素编写一个点击函数
document.getElementById("myId").onclick=function() { /* some code here */ }
您可以在按钮内添加带有以下标签的图像按钮
<input type="image" src="http://somesite.com/somepath/someimage.png" />
或
<button style="background: url(someimage.png)" ... />
如果图像大小合适，则可以将其设置为该特定"a"标签的背景。
所以它应该是这样的：
<li><a class="funImage" href="" target="_blank"></a></li>
然后在你的css中，你可以做这样的事情：
.funImage{display: inline-block;
background-image: url("bilde.png");
height: /*Set height accordingly*/;
width: /*Set width accordingly*/;
}
希望能:)
你可以用Jquery做这样的事情。
<img src="yan.png" alt="image" id="image">
在你的脚本中输入此代码
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript>
$(document).ready(function(){
$('#image').click(function(){
alert('image clicked');
});
});
</script>
坐在警报中，您可以做一些很酷的事情。