当当网_bookno1.gif-优快云博客

本文链接：https://blog.youkuaiyun.com/Luokaiqin520/article/details/79189902

本文档通过一个具体的网页布局实例介绍了HTML与CSS的基本用法，包括页面元素的定位、盒子模型的应用、背景图片设置等关键知识点。此案例展示了如何使用表格进行内容布局，以及如何通过CSS控制文字样式和图片显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body,div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,table,tr,td,form,input,select,textarea,span,img,a,em,strong,*{ margin:0 auto; padding:0;}
body{ font-family:"宋体"; font-size:12px; color:#000000;}
ul,ol,li{ list-style:none;}
h1,h2,h3,h4,h5,h6{ font-size:14px;}
input,select,textarea{ vertical-align:middle;}
img{ border:none; vertical-align:middle;}
a{ text-decoration:none; color:#333333;}
a:hover{ color:#009999;}
.clear{ clear:both; height:0px; width:0px; overflow:hidden;}
#d1{
/*background: #00FF80;*/
width: 600px;
height: 50px;
}

#tab{
border: 1px solid #00FFFF;
/*background: #EAFFFA;*/
width: 250px;
height: 30px;
text-align: center;
margin-top: 20px;
}
.img{
position: relative;
right: -155px;
top: 12px;
}
#d2{
/*background: #7FFFD4;*/
width: 600px;
height: 25px;
}

h1{
line-height: 25px;
background: url(../ddw_img0128/menuBg.jpg);
}

h1 a{
font-weight: normal;
color: #FFFFFF;
margin-right: 13px;
font-size: 12px;
}

#d3{
width: 600px;
height: 80px;
border: 1px solid #A6D278;
margin-top: 5px;
}

#d3 img{
width: 600px;
height: 80px;
}
#d4{
/*background: yellow;*/
border: 1px solid #A6D278;
width: 600px;
height: 250px;
margin-top: 5px;
}
#left{
/*background: tomato;*/
width: 150px;
height:250px ;
float: left;
}
#left .img1{
width: 150px;
height: 30px;
margin-top: 10px;
margin-left: -10px;
}
#left .img2{
margin-top: 20px;
width: 150px;
height: 170px;
}

#left .img3{
position: relative;
top: -180px;
left: 5px;
}
#center{
/*background: wheat;*/
width: 190px;
height:250px ;
float: left;
text-align: left;
}
#center p{
margin-top: 50px;
line-height: 20px;
}
.s1 a{
color: turquoise;
font-size: 12px;
}
.s2{
color:red;
}
#right{
/*background: thistle;*/
width: 260px;
height:250px ;
float: left;
}
.s3 a{
color: #87BAE3;
font-size: 12px;
}
.s4{
color:red;
}
.s5{
color: #87BAE3;
}

#right p{
line-height: 20px;
}

.img4{
position: relative;
top: 20px;
}
.img5{
position: relative;
top: 130px;
left: -30px;
}

.tabb{
margin-top: -20px;
}
#d5{
/*background: burlywood;*/
width: 600px;
height: 30px;

}

#d5 p{
line-height: 30px;
}

</style>
</head>
<body>
<center>
<div id="d1">
<img src="../ddw_img0128/logo.jpg" align="left"/>
<img src="../ddw_img0128/icon_count.png" class="img"/>
<table id="tab" align="right">
<tr>
<td>唯品会</td>
<td>当当优品</td>
<td>唯品会</td>
<td>当当优品</td>
</tr>
</table>

</div>
<div id="d2">
<h1>
<a href="#" style="margin-left:10px;">首页</a>
<a href="#">首页</a>
<a href="#">首页</a>
<a href="#">首页</a>
<a href="#">首页</a>
<a href="#">首页</a>
<a href="#">首页</a>
<a href="#">首页</a>
<a href="#">首页</a>
<a href="#">首页</a>
<a href="#">首页</a>
<a href="#">首页</a>
<a href="#">首页</a>
</h1>
</div>
<div id="d3">
<img src="../ddw_img0128/banner.png" />
</div>
<div id="d4">
<div id="left">
<img src="../ddw_img0128/bg_bang.gif" class="img1" align="left"/>
<img src="../ddw_img0128/book-01.jpg" class="img2"/>
<img src="../ddw_img0128/bookNo1.gif" class="img3" align="left"/>
</div>
<div id="center">
<p><span class="s1"><a href="#">偷影子的人</a></span><br/>
作者:无名氏<br/>
出版社：北京出版社<br/>
当当价：<span class="s2">¥17.90</span><br/>
不知道姓氏的克蕾儿，不知道姓氏的克蕾儿，不知道姓氏的克蕾儿，不知道姓氏的克蕾儿，不知道姓氏的克蕾儿，不知道姓氏的克蕾儿，不知道姓氏的克蕾儿，</p>
</div>
<div id="right" >
<img src="../ddw_img0128/bookNo2.gif" class="img4" align="left"/>
<img src="../ddw_img0128/bookNo3.gif" class="img5" align="left"/>
<table align="left" class="tabb">
<tr>
<td><img src="../ddw_img0128/book-02.jpg"/></td>
<td><p><span class="s3"><a href="#">看见[央视著名记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘]</a></span><br/>
作者：无名氏<br />
出版社：北京出版社<br />
<span class="s4">¥29.40 </span><span class="s5">7.4折</span>
</p></td>
</tr>
<tr>
<td><img src="../ddw_img0128/book-03.jpg"/></td>
<td><p><span class="s3"><a href="#">改变孩子先改变自己</a></span><br/>
作者：无名氏<br />
出版社：北京出版社<br />
<span class="s4">¥29.40 </span><span class="s5">7.4折</span></td>
</tr>
</table>
</div>
</div>
<div id="d5">
<p>CCCBHBDHSBHDBCHDBBDHVBVDBV <img src="../ddw_img0128/validate.gif"/>CCCBHBDHSBHDBCHDBBDHVBVDBV</p>
</div>
</center>
</body>
</html>