网页第八章

最新推荐文章于 2024-08-08 14:30:00 发布
qq_36074062
最新推荐文章于 2024-08-08 14:30:00 发布
阅读量246
点赞数
本文链接：https://blog.csdn.net/qq_36074062/article/details/52885277
版权
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>当当图书榜</title>
		<style type="text/css">
			.first{
				width: 960px;
				height:650px;
				/*border:  red 1px solid;*/
				margin:100px;
				padding: 10px;
			}
			.class{
				width: 945px;
				height:20px;
				background:green;
				padding-left: 15px;
				padding-top: 10px;
				
			}
			 .class ul{
				margin:0px;
				padding: 0px;
			}
			.class ul li{
				list-style: none;
				float:left;
				
			}
			.class li{
				width: 50px;
				
			}
			.class ul,li a{
				color: white;
				text-decoration:none;
			}
			.class ul,li a:hover{
				background:url(image/menuBg.jpg) 0px 0px repeat-x;
				text-decoration: underline;
			}
			body{
				font-size: 12px;
				font-family: "宋体";
			}
			.second{
				width: 960px;
				height:370px;
				/*border: red 1px solid;*/
				margin-top:10px;
			
			}
			p{
				position: relative;
			
				left:-14px;
			}
			.class1{
				position: relative;
				top:20px;
				left:19px;
				float:left;
			}
			.class2{
				position: relative;
				top:15px;
				left:-529px;
			}
			.third{
				width: 300px;
				height:250px;
				/*border: 1px red solid;*/
				float:left;
			    position:relative;
			    top:32px;
			    left:10px;
			   
			}
			.class3 {
				 list-style: none;
				 line-height: 28px;
				 padding:0px;
				margin:0px;
			}
			  .class4{
				width: 400px;
				height:250px;
				/*border: 1px red solid;*/
				position:relative;
				left: 600px;
				top: -15px;
			}
			p img{
				vertical-align: middle;
			}
			#id{
				width: 400px;
				height:250px;
				/*border: 1px red solid;*/
				position: relative;
				top: -380px;
				left:710px;
			}
		</style>
	</head>
	<body>
		
		<div class="first">
			<img src="image/logo.jpg" />
			<div class="class">
				<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>
					<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>
					<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>
					<li><a href="#">电脑 </a></li>
					<li><a href="#">家电</a></li>
				</ul>
			</div>
			<img src="image/banner.png" /><br />
			<div class="second">
				<p><img src="image/bg_bang.gif"/></p>
				<span class="class1"><img src="image/book-01.jpg" /></span>
				<span class="class2"><img src="image/bookNo1.gif" /></span>
				<div class="third">
				<ul class="class3">
					<li>偷影子的人 </li>
					<li>作 者：[法] 马克·李维（Marc Levy）著,段韵灵 译</li>
					<li>出版社：湖南文艺出版社</li>
					<li>当当价：￥ 17.90</li>
					<li>不知道姓氏的克蕾儿。这就是你在我生命里的角色，<br />
						，今日蜕变成了女人，一段青梅竹<br />
						马的回忆，一个时间之神没有应允的愿望。 一个老是<br />
						受班上同学欺负的瘦弱小男孩，因为拥有一种特殊能<br />
						力而强大：他能“偷别人的影子”，因而能看见他
                   </li>
				</ul>
				</div>
				
				<div class="class4"></div>
				<span style="position: relative;top: -285px;left: 600px;"><img src="image/book-02.jpg" /></span>
				<span style="position: relative;top: -170px;left: 500px;"><img src="image/book-03.jpg" /></span>
				<span style="position: relative;top: -360px;left: 390px;"><img src="image/bookNo2.gif" /></span>
				<span style="position: relative;top: -235px;left: 355px;"><img src="image/bookNo3.gif" /></span>
				<div id="id">
					<ul style="list-style: none;line-height: 20px;">
						<li>看见(央视知名记者、主持人柴静：十<br />年个人，中国社会变迁的备忘 </li>
						<li>作 者：柴静 著</li>
						<li>出版社：广西师范大学出版社</li>
						<li>￥ 29.40 7.4折</li>
						<li>改变孩子先改变自己 </li>
						<li>作 者：贾容韬 贾毅 著</li>
						<li>出版社：作家出版社</li>
						<li>￥ 22.20 7.4折</li>
						
					</ul>
					
					
				</div>
			</div>
			<p style="text-align: center">Copyright (C) 当当网 2004-2013, All Rights Reserved<img src="image/validate.gif"/> 新出发京批字第直0673号</p>
		</div>
		
	</body>
</html>