1.案例需求
利用所学的html5知识,完成喜羊羊与灰太狼网页设计中的动画作品,动画作品页面效果图如下:
2.编程思路
首先将整个页面分为header、content、和footer三部分,header包括导航栏,导航栏的链接利用无序列表完成,导航栏的背景利用CSS完成。content包括标题和每个作品的介绍,标题部分可用一个div
设置图片再利用CSS来实现其效果,每个作品的介绍用一个div
包含动画片名称和首播时间,具体可见案例源码。footer部分只包括版本,比较简单。
3.案例源码
<!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: 700px;
border-radius: 10px;
}
.content .p {
margin-top