网页设计与制作考试题目
效果图
源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>版权所有</title>
<style>
*{padding:0;margin:0;}
body{background:#fff;}
.clear{clear:both;}
ul li{list-style: none;}
.top,.nav,.search,.photo,.wenzi{width:1200px;margin:0 auto;}
.top{height:300px;overflow: hidden;}
.nav{background:#069;font-family: "宋体";font-size:16px;line-height: 48px;}
.nav ul li{float:left;list-style: none;}
.nav ul li a{display: block;float:left;width:240px;text-align: center;color:#fff;text-decoration: none;}
.nav ul li a:hover{background:#fff;color:#19A4FF}
.search{margin:5px auto;}
.search .box{float:right;font-size:14px;}
.search .box input{border:1px solid #19A4FF}
.search .box .btn{color:#069;}
.photo{border:1px solid #999;}
.photo ul li{float:left;margin:5px 10px;width:265px;border: 1px solid #999;padding:5px;}
.photo ul li img{width:265px;}
.photo ul li .title{background:#999;padding:10px 5px;}
.price{float:left;color:#ff0000;}
.cb{color:#fff;margin-left:10px;}
.wenzi{margin-top:5px;margin-bottom:5px;border-top:2px solid #069;border-bottom:2px solid #069;}
.wenzi p{font-family:"宋体";text-indent: 2em;font-size:14px;color:#000;line-height: 24px;;}
.footer{width:100%;margin-top:5px;background:#069;height:48px;line-height: 48px;text-align: center;font-family: "宋体";font-size:16px;color:#fff;}
</style>
</head>
<body>
<div class="top">
<img src="book.jpg">
</div>
<div class="nav">
<ul>
<li><a href="">首页</a></li>
<li><a href="">中国古典文学</a></li>
<li><a href="">中国现代文学</a></li>
<li><a href="">中国当代文学</a></li>
<li><a href="">外国文学</a></li>
<div class="clear"></div>
</ul>
</div>
<div class="clear"></div>
<div class="search">
<div class="box">
<form>
<input type="text" class="si" name="q">
<input type="submit" value="搜索" class="btn">
</form>
</div>
<div class="clear"></div>
</div>
<div class="photo">
<ul>
<li><img src="book1.jpg">
<div class="title">
<h3>三体</h3>
<div class="price">￥55.80</div><div class="cb">重庆出版社</div>
</div>
</li>
<li><img src="book2.jpg">
<div class="title">
<h3>生命简历</h3>
<div class="price">￥70.30</div><div class="cb">中国大地出版社</div>
</div>
</li>
<li><img src="book3.jpg">
<div class="title">
<h3>百年孤独</h3>
<div class="price">￥39.60</div><div class="cb">南海出版公司</div>
</div>
</li>
<li><img src="book4.jpg">
<div class="title">
<h3>活着</h3>
<div class="price">￥17.50</div><div class="cb">北京十月文艺出版社</div>
</div>
</li>
<div class="clear"></div>
</ul>
</div>
<div class="wenzi">
<p>中国文学分为古典文学、现代文学与当代文学。古典文学以唐宋诗词及四大名著为代表，现代文学以鲁迅小说为代表，当代文学则以具有独立思想的中国自由文学为标志。
</p>
<p>自二十世纪末期开始，具有独立思想的中国自由文学的出现，使得中国文学大踏步进入世界先进文化行列，成为引领世界文学的先锋，并使中国当代文学达到历史的顶峰。中华民族的文学，是以汉民族文学为主干部分的各民族文学的共同体。中国文学有数千年悠久历史，以特殊的内容、形式和风格构成了自己的特色，有自己的审美理想，有自己的起支配作用的思想文化传统和理论批判体系。
</p>
</div>
<div class="footer"><P>版权所有</P></div>
</body>
</html>
①本站所有成品淘宝购买需确认收货并好评后发货；
②所有作品如需修改需另加费用；
③所有作品没有任何人的姓名学校之类信息；
④请务必确认网页是您需要的，源码具有可复制性，所以无法退换！
⑤每份网页都可以更换内容，费用50元起，如需更换内容请联系客服!
dw网页设计 » 网页设计与制作考试题目
②所有作品如需修改需另加费用；
③所有作品没有任何人的姓名学校之类信息；
④请务必确认网页是您需要的，源码具有可复制性，所以无法退换！
⑤每份网页都可以更换内容，费用50元起，如需更换内容请联系客服!
dw网页设计 » 网页设计与制作考试题目
