HTML5当当图书榜

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2         "http://www.w3.org/TR/html4/loose.dtd">
  3 <html>
  4 <head>
  5     <title>当当图书榜</title>
  6     <style>
  7    body{
  8        font-family:Verdana,"宋体";
  9        font-size: 12px;
 10    }
 11        #father{
 12            width: 960px;
 13            border: 1px hidden;
 14            margin: 0px auto;
 15        }
 16         #san{
 17             position: relative;
 18              top: -30px;
 19             left: 684px;
 20         }
 21         #san a{
 22             font-size: 15px;
 23             background-color: #EAFFFA;
 24             border: 3px #EAFFFA solid;
 25             text-decoration: none;
 26         }
 27         .o{
 28             position: relative;
 29             top: -15px;
 30             left: 55px;
 31         }
 32         #shou{
 33             color: #FFF;
 34             position: relative;
 35              top: -10px;
 36             height: 30px;
 37             width: 960px;
 38             font-size: 14px;
 39             text-align: center;
 40             border: 1px #FE6915 solid;
 41             background: #FE6915;
 42         }
 43         #w{
 44             width: 959px;
 45             height: 380px;
 46             margin: 20px auto;
 47             border: 1px #CCE9AC solid;
 48             position: relative;
 49         }
 50        #q{
 51            position: relative;
 52            top: 15px;
 53            left: -10px;
 54        }
 55         #y{
 56             z-index: 1;
 57             position: relative;
 58             top: 30px;
 59             left: 20px;
 60         }
 61         #r{
 62             width: 480px;
 63         }
 64         #r img{
 65             z-index: 0;
 66             position: relative;
 67             top: -20px;
 68             float: left;
 69         }
 70         h1{
 71             color: #1A66B3;
 72             font-size: 12px;
 73         }
 74     p span{
 75         color: #8E112B;
 76         font-weight: bold;
 77     }
 78    .z{
 79        position:absolute;
 80        z-index: 1;
 81        left: 500px;
 82        top: 70px;
 83    }
 84    .x{
 85        width: 430px;
 86        height: 300px;
 87        position:absolute;
 88        left: 500px;
 89        top: 85px;
 90    }
 91    .x img{
 92        width: 100px;
 93        height: 105px;
 94        float: left;
 95    }
 96         p b{
 97             font-weight: normal;
 98            color: #5EA593;
 99         }
100        .v{
101            z-index: 1;
102            position: relative;
103            bottom: 130px;
104            left: 240px;
105        }
106         .m{
107             width: 430px;
108             height: 300px;
109             position:absolute;
110             left: 500px;
111             top: 210px;
112         }
113         .m img{
114             width: 100px;
115             height: 105px;
116             float: left;
117         }
118     </style>
119 </head>
120 <body>
121   <div >
122       <div ><img src="图片素材/logo.jpg"/></div>
123       <div ><img  class="o" src="图片素材/icon_count.png"/><a href="#">尾品汇 当当优品 数字馆 都看阅器</a></div>
124       <div >首页&nbsp;&nbsp;&nbsp;&nbsp;图书&nbsp;&nbsp;&nbsp;&nbsp;音像&nbsp;&nbsp;&nbsp;&nbsp;童装&nbsp;&nbsp; &nbsp;&nbsp;
125           服装&nbsp;&nbsp; 鞋靴&nbsp;&nbsp; 运动 &nbsp;&nbsp;箱包 &nbsp;&nbsp;美妆&nbsp;&nbsp;
126           珠宝 &nbsp;&nbsp;&nbsp;&nbsp;家居 &nbsp;&nbsp;&nbsp;&nbsp;食品 &nbsp;&nbsp;&nbsp;&nbsp;酒 &nbsp;&nbsp;&nbsp;&nbsp;手机&nbsp;&nbsp;&nbsp;&nbsp;
127           数码 &nbsp;&nbsp;&nbsp;&nbsp;电脑 &nbsp;&nbsp;&nbsp;&nbsp;家电</div>
128       <div ><img src="图片素材/banner.png"/> </div>
129   </div>
130 <div >
131     <div ><img src="图片素材/bg_bang.gif"/> </div>
132     <div ><img src="图片素材/bookNo1.gif"/></div>
133     <div ><img src="图片素材/book-01.jpg"/>
134        <h1>偷影子的人 </h1>
135         <p>作 者:[法] 马克·李维(Marc Levy)著,段韵灵 译</p>
136         <p>出版社:湖南文艺出版社</p>
137         <p>当当价:<span>¥ 17.90</span></p>
138         <p>
139             不知道姓氏的克蕾儿。这就是你在我生命里的角色,
140             我童年时的小女孩,今日蜕变成了女人,一段青梅竹马的回忆,一个时间之神没有应允的愿望。
141             一个老是受班上同学欺负的瘦弱小男孩,因为拥有一种特殊能力而强大:他能“偷别人的影子”
142             ,因而能看见他
143         </p>
144     </div>
145 
146     <div class="z"><img src="图片素材/bookNo2.gif"/></div>
147     <div class="x"><img src="图片素材/book-02.jpg"/>
148     <h1> 看见(央视知名记者、主持人柴静:十年个人成长的告白,中国社会变迁的备忘 </h1>
149         <p>作 者:柴静 著</p>
150         <p>出版社:广西师范大学出版社</p>
151         <p><span>¥ 29.40</span> <b>7.4折</b></p>
152     </div>
153     <div class="v"><img src="图片素材/bookNo3.gif"/></div>
154     <div class="m"><img src="图片素材/book-03.jpg"/>
155       <h1>改变孩子先改变自己 </h1>
156       <p>作 者:贾容韬 贾毅 著</p>
157       <p>出版社:作家出版社</p>
158       <p><span>¥ 22.20</span> <b> 7.4折</b></p>
159     </div>
160 
161 </div>
162 </body>
163 </html>