1.案例需求
利用所学的html5知识，完成喜羊羊与灰太狼网页设计中的首页，注意中间的大图为轮播图，首页效果图如下：
2.编程思路
首先将整个页面分为header、content、和footer三部分，header包括导航栏，导航栏的链接利用无序列表完成，导航栏的背景利用CSS完成。content包括三部分，分别上面的轮播图，中间的动画片介绍，底部的动画影视作品。动画片介绍又分为左，中，右三部分。content部分内容较多，较为复杂，但总的来说难度不算太大，具体可见案例源码。footer部分只包括版本，比较简单。
3.案例源码
css部分也包含在其中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>首页</title>
<base target="_blank" />
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.header {
height: 200px;
width: 1280px;
background-image: url(images/logo.JPG);
background-size: 1280px 200px;
}
.header .nav {
background-color: #78e1dd;
height: 30px;
line-height: 30px;
}
.header h2 {
color: orange;
float: left;
}
.header .nav ul {
list-style: none;
float: right;
}
.header .nav ul li {
display: inline-block;
}
.header .nav ul li a span {
color: orange;
}
.header .nav ul li a {
text-decoration: none;
padding-right: 10px;
color: #fff;
}
.header .nav ul li:last-child {
margin-right: 80px;
}
.content {
margin: 0 auto;
width: 1064px;
height: 1000px;
border-radius: 10px;
}
#tv {
width: 1024px;
height: 480px;
overflow: hidden;
margin-left: 20px;
}
#screen {
width: 4096px;
animation: switch 8s ease-out infinite;
margin-top: 20px;
}
#screen > img {
float: left;
width: 1024px;
height: 480px;
border-radius: 10px;
}
@keyframes switch {
0%,
20% {
margin-left: 0;
}
25%,
45% {
margin-left: -1024px;
}
50%,
70% {
margin-left: -2048px;
}
75%,
100% {
margin-left: -3072px;
}
}
.content .top {
margin-top: 10px;
margin-left: 15px;
}
.content .top span {
color: orange;
padding-right: 20px;
}
.content .top h3:first-child {
float: left;
}
.content .top h3:nth-child(2) {
float: right;
margin-right: 150px;
}
.content .top .pro {
height: 200px;
padding-top: 25px;
}
.content .top .pro img {
height: 200px;
float: left;
}
.content .top .pro .pro_center {
height: 200px;
width: 410px;
float: left;
margin-left: 15px;
}
.content .top .pro .pro_center p {
text-indent: 2em;
font-size: 14px;
line-height: 1.5;
color: gray;
}
.content .top .pro .pro_right {
height: 200px;
width: 250px;
float: left;
margin-left: 65px;
}
.content .top .pro .pro_right ul {
list-style: none;
}
.content .top .pro .pro_right ul li {
color: gray;
}
.content .top .pro .pro_right ul li span {
padding-right: 35px;
}
.content .down {
width: 1024px;
margin-top: 50px;
margin-left: 15px;
}
.content .down .one {
margin-top: 10px;
text-align: center;
float: left;
margin-right: 20px;
margin-bottom: 10px;
}
.content .down .two {
margin-top: 10px;
text-align: center;
float: left;
margin-right: 20px;
margin-bottom: 10px;
}
.content .down .three {
margin-top: 10px;
text-align: center;
float: left;
margin-right: 20px;
margin-bottom: 10px;
}
.content .down .f {
margin-top: 10px;
text-align: center;
float: left;
margin-bottom: 10px;
}
.content .down p span {
color: gray;
font-size: 13px;
}
.content .down img {
width: 241px;
border-radius: 10px;
}
.content .down span {
color: orange;
padding-right: 20px;
}
.footer {
margin-top: 180px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: gray;
}
</style>
</head>
<body>
<div class="header">
<div class="nav">
<h2>喜羊羊与灰太狼</h2>
<ul>
<li>
<a href="首页.html"><span>首页</span></a>
</li>
<li><a href="剧情简介.html">剧情简介</a></li>
<li><a href="动画作品.html">动画作品</a></li>
<li><a href="角色介绍.html">角色介绍</a></li>
<li><a href="联系我.html">联系我</a></li>
</ul>
</div>
</div>
<div class="content">
<div id="tv">
<div id="screen">
<img src="images/w4.JPG" />
<img src="images/w8.JPG" />
<img src="images/w5.JPG" />
<img src="images/w6.JPG" />
</div>
</div>
<div class="top">
<h3><span>About</span>动画片介绍</h3>
<h3><span>Life</span>角色羊物</h3>
<div class="pro">
<img src="images/q2.JPG" alt="nothing" />
<div class="pro_center">
<p>
《喜羊羊与灰太狼》是一部知名的动画。该动画以其独特的角色和故事情节深受观众喜爱，是许多90后00后的童年回忆，同时也是当今许多小朋友正在经历的童年的一部分，在多代观众中都享有高度的知名度和受欢迎程度。
</p>
<p>
“喜羊羊与灰太狼”已经十八岁了，而观看“喜羊羊”的孩子们也都长大了，逐渐成为社会的新兴声音和力量，而这一批孩子也伴随这中国原创漫画一起成长，走向成熟，无论什么年龄，只要童心还在，我们都是快乐的“儿童”，《喜羊羊与灰太狼》一直保持创作初心，不断“破圈”，相伴成长，守护大家的快乐童年。
</p>
</div>
<div class="pro_right">
<ul>
<li><span>1</span>喜羊羊</li>
<li><span>2</span>灰太狼</li>
<li><span>3</span>懒羊羊</li>
<li><span>4</span>美羊羊</li>
<li><span>5</span>沸羊羊</li>
<li><span>6</span>暖羊羊</li>
<li><span>7</span>小灰灰</li>
<li><span>8</span>慢羊羊</li>
<li><span>9</span>红太狼</li>
</ul>
</div>
</div>
</div>
<div class="down">
<h3><span>Movie</span>动画影视作品</h3>
<div class="one">
<img src="images/t1.JPG" alt="nothing" />
<p>喜羊羊与灰太狼之牛气冲天</p>
<p><span>上映时间</span><span>2009年1月16日</span></p>
</div>
<div class="two">
<img src="images/t2.JPG" alt="nothing" />
<p>喜羊羊与灰太狼之虎虎生威</p>
<p><span>上映时间</span><span>2010年1月29日</span></p>
</div>
<div class="three">
<img src="images/t3.JPG" alt="nothing" />
<p>喜羊羊与灰太狼之兔年顶呱呱</p>
<p><span>上映时间</span><span>2011年1月21日</span></p>
</div>
<div class="f">
<img src="images/t4.JPG" alt="nothing" />
<p>喜羊羊与灰太狼之开心闯龙年</p>
<p><span>上映时间</span><span>2012年1月12日</span></p>
</div>
<div class="one">
<img src="images/t5.JPG" alt="nothing" />
<p>喜羊羊与灰太狼之我爱灰太狼</p>
<p><span>上映时间</span><span>8月10日</span></p>
</div>
<div class="two">
<img src="images/t6.JPG" alt="nothing" />
<p>喜羊羊与灰太狼之喜气羊羊过蛇年</p>
<p><span>上映时间</span><span>2013年1月24日</span></p>
</div>
<div class="three">
<img src="images/t7.JPG" alt="nothing" />
<p>喜羊羊与灰太狼之我爱灰太狼2</p>
<p><span>上映时间</span><span>8月1日</span></p>
</div>
<div class="f">
<img src="images/t8.JPG" alt="nothing" />
<p>喜羊羊与灰太狼之飞马奇遇记</p>
<p><span>上映时间</span><span>2014年1月16日</span></p>
</div>
</div>
</div>
<div class="footer">CopyRight@喜羊羊与灰太狼</div>
</body>
</html>
4.小结
通过编写这篇博客，对所学的HTML5知识进行了一个温习，小伙伴们可以牢记轮播图的设计，这种轮播图是非常简单的不需要使用结束，其次要牢记网页设计可以分为三部分，这样可以简化网页设计的难度。
1328
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
