HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动漫网页设计</title>
<link rel="stylesheet" href="../CSS/1.css">
<script>
function change1(){
document.getElementById('logo').src='../images/c.png'
}
function change2(){
document.getElementById('logo').src='../images/b.jpg'
}
</script>
<script>
function changeColor(){
var color="#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray";
color=color.split("|");
document.getElementById("blink").style.color=color[parseInt(Math.random() * color.length)];
}
setInterval("changeColor()",200);
</script>
</head>
<body>
<div class="bigbox">
<div class="top1">
</div>
<div class="top2">
【<a href="https://www.bilibili.com/v/anime/serial/#/">连载动画</a>】
【<a href="https://www.bilibili.com/v/anime/finish/#/">完结动漫</a>】
【<a href="https://www.bilibili.com/anime/timeline/">新番时间表</a>】
【<a
href="https://www.bilibili.com/anime/index/#season_version=-1&area=-1&is_finish=-1©right=-1&season_status=-1&season_month=-1&year=-1&style_id=-1&order=3&st=1&sort=0&page=1">番剧索引</a>】
【<a href="https://www.bilibili.com/v/anime/information/#/">官方资讯</a>】
</div>
<div class="mainbox">
<div class="left3">
<img id="logo" src="../images/b.jpg" alt="" onmouseover="change1()" onmouseout="change2()">
</div>
<div class="middle4" id="blink">
@我爱影视动漫
</div>
<div class="right5">
不相信自己的人， 连努力的价值都没有。——《火影忍者》
在这个世界，能受到诅咒的种族，就只有人类了。——科穆伊《驱魔少年》
自己的伤自己承受，只要依然活着，伤总有一天还是会好的。——李娜莉《驱魔少年》
是努力还是放弃，只有一种选择，人类能选择的，无论何时都只有这两条路，只有诚
实地说出自己的心情，接下来就要看对方的决定了，是努力还是放弃，这时就轮到他们选择了。
——花本修司《蜂蜜与四叶草》
我觉得，人活着一定是没意义的，但是，
活下去的话说不定能找到有趣的事，如你见到那花，如我见到你。——《火影》
若拥有相当的能力，却坐视不理，事后会不得心安的。——塔里娅《高达SEED.D》
</div>
</div>
<div class="bottom6">
联系我们| 意见反馈| 网页测试| 版本更新| 网页修复
<p></p>
客户电话：18843244112 客户邮箱：[email protected]
</div>
</div>
</body>
</html>
CSS：
.bigbox{
width: 1200px;
margin: 0 auto;
}
.top1{
background-image: url(../images/a.png);
width: 900px;
height: 300px;
margin: 0 auto;
}
.top2{
width: 900px;
height: 60;
background-color: cyan;
font-size: 18px;
font-family: 楷体;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
margin: 0 auto;
}
.top2 a{
text-decoration: none;
}
.top2 a:hover{
color: red;
}
.mainbox{
width: 1200px;
height: 400px;
}
.left3{
width: 400px;
height: 400px;
float: left;
padding-left: 150px;
}
.middle4{
width: 75px;
height: 400px;
background-color: darkseagreen;
float: left;
font-size: 40px;
font-family: 楷书;
text-align: center;
}
.right5{
width: 427px;
height: 400px;
background-color: greenyellow;
font-size: 19px;
font-family: 楷书;
line-height: 140%;
float: left;
letter-spacing: 2px;
text-indent: 45px;
opacity: 0.6;
font-weight: bolder;
}
.right5:hover{
opacity: 1;
color: midnightblue;
}
.bottom6{
width: 900px;
height: 60px;
background-color: plum;
font-size: 19px;
font-family: 楷书;
color: red;
font-weight: bolder;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
margin: 0 auto;
}
运行结果：
