1.一般写css之前必须写上一个基本css，base.css代码如下：
1 /*此文件中放入的是公共的样式:京东的顶部内容和京东首页的底部内容的样式在很多页面中都是相同的,公共的*/ 2 @charset "UTF-8"; 3 /*css 初始化 */ 4 /*使用标签名字的效率远远高于*的效率*/ 5 html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { 6 margin: 0; 7 padding: 0; 8 } 9 10 /*各浏览器显示不同，去掉蓝色边框*/ 11 fieldset, img, input, button { 12 border: none; 13 padding: 0; 14 margin: 0; 15 outline-style: none;/*设置轮廓样式*/ 16 } 17 18 ul, ol { 19 list-style: none; 20 } 21 22 input { 23 padding-top: 0; 24 padding-bottom: 0; 25 font-family: "SimSun", "宋体"; 26 } 27 28 /*去掉行内替换元素空白缝隙*/ 29 select, input { 30 vertical-align: middle; 31 } 32 33 select, input, textarea { 34 font-size: 12px; 35 margin: 0; 36 } 37 38 /*防止拖动 影响布局*/ 39 textarea { 40 resize: none; 41 } 42 43 /*去掉行内替换元素空白缝隙*/ 44 img { 45 border: 0; 46 vertical-align: middle; 47 } 48 /*合并边框*/ 49 table { 50 border-collapse: collapse; 51 } 52 53 body { 54 font: 12px/150% Arial, Verdana, "5b8b4f53"; /*宋体 unicode */ 55 color: #666; 56 background: #f6f6f6; 57 } 58 59 /*清除浮动*/ 60 .clearfix:before, .clearfix:after { 61 content: ""; 62 display: table; 63 } 64 65 .clearfix:after { 66 clear: both; 67 } 68 69 .clearfix { 70 *zoom: 1; /*IE/7/6*/ 71 } 72 73 a { 74 color: #666; 75 text-decoration: none; 76 } 77 78 a:hover { 79 color: #C81623; 80 } 81 82 h1, h2, h3, h4, h5, h6 { 83 text-decoration: none; 84 font-weight: normal; 85 font-size: 100%; 86 } 87 /*用来做图标*/ 88 s, i, em { 89 font-style: normal; 90 text-decoration: none; 91 } 92 93 /*京东色*/ 94 .col-red { 95 color: #C81623 !important; 96 } 97 98 /*公共类*/ 99 .w { 100 /*版心 提取 */ 101 1210px; 102 margin: 0 auto; 103 } 104 105 .fl { 106 float: left; 107 } 108 109 .fr { 110 float: right; 111 } 112 113 .al { 114 text-align: left; 115 } 116 117 .ac { 118 text-align: center; 119 } 120 121 .ar { 122 text-align: right; 123 } 124 125 .hide { 126 display: none; 127 }
2.我的代码
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" href="../css/fonticon/iconfont.css"/> 7 <link rel="stylesheet" href="../css/base.css"/> 8 <link rel="stylesheet" href="../css/foot.css"/> 9 <link rel="stylesheet" href="../css/middle.css"/> 10 </head> 11 <body> 12 13 <!--淘宝秒杀开始了--> 14 <div class="top w"> 15 <div class="top-fl"> 16 <div><span></span></div> 17 <h3>京东秒杀</h3> 18 <p>总有你想不到的低价 <i></i> </p> 19 </div> 20 <div class="top-fr"> 21 <p class="fr-l">当前场次</p> 22 <div>01</div> 23 <span>:</span> 24 <div>46</div> 25 <span>:</span> 26 <div>13</div> 27 <p class="fr-r">后结束抢购</p> 28 </div> 29 </div> 30 <div class="bottom-skill w"> 31 <ul> 32 <li> 33 <a href="#"><img src="../images/sk1.jpg" alt=""/> 34 <i></i> 35 <p>【京东超市】 墨西哥进口 科罗娜（Corona）啤酒 330ml*12瓶 整箱</p> 36 </a> 37 <p class="sise"> 38 <span>￥99.00</span> 39 <del>￥199.00</del> 40 </p> 41 <s>经典</s> 42 </li> 43 <li> 44 <a href="#"><img src="../images/sk2.jpg" alt=""/> 45 <i></i> 46 <p>【京东超市】 墨西哥进口 科罗娜（Corona）啤酒 330ml*12瓶 整箱</p> 47 </a> 48 <p class="sise"> 49 <span>￥99.00</span> 50 <del>￥199.00</del> 51 </p> 52 <s>经典</s> 53 </li> 54 <li> 55 <a href="#"><img src="../images/sk3.jpg" alt=""/> 56 <i></i> 57 <p>【京东超市】 墨西哥进口 科罗娜（Corona）啤酒 330ml*12瓶 整箱</p> 58 </a> 59 <p class="sise"> 60 <span>￥99.00</span> 61 <del>￥199.00</del> 62 </p> 63 <s>经典</s> 64 </li> 65 <li> 66 <a href="#"><img src="../images/sk4.jpg" alt=""/> 67 <i></i> 68 <p>【京东超市】 墨西哥进口 科罗娜（Corona）啤酒 330ml*12瓶 整箱</p> 69 </a> 70 <p class="sise"> 71 <span>￥99.00</span> 72 <del>￥199.00</del> 73 </p> 74 <s>经典</s> 75 </li> 76 <li> 77 <a href="#"><img src="../images/sk5.jpg" alt=""/> 78 <i></i> 79 <p>【京东超市】 墨西哥进口 科罗娜（Corona）啤酒 330ml*12瓶 整箱</p> 80 </a> 81 <p class="sise"> 82 <span>￥99.00</span> 83 <del>￥199.00</del> 84 </p> 85 <s>经典</s> 86 </li> 87 <li class="sk6"> 88 <a href="#"><img src="../images/sk6.jpg" alt=""/> 89 </a> 90 <s>经典</s> 91 </li> 92 </ul> 93 </div> 94 <!--淘宝秒杀结束了--> 95 96 97 <!--底部开始了--> 98 <div class="footer"> 99 <div class="foot-top"> 100 <div class="w"> 101 <ul> 102 <li> 103 <h5>多</h5> 104 <p>品类齐全，轻松购物</p> 105 </li> 106 <li> 107 <h5 class="qulick">快</h5> 108 <p>多仓直发，极速配送</p> 109 </li> 110 <li> 111 <h5 class="good">好</h5> 112 <p>正品行货，精致服务</p> 113 </li> 114 <li> 115 <h5 class="sheng">省</h5> 116 <p>天天低价，畅选无忧</p> 117 </li> 118 </ul> 119 </div> 120 </div> 121 <div class="foot-middle w"> 122 <dl> 123 <dt>购物指南</dt> 124 <dd>购物流程</dd> 125 <dd>会员介绍</dd> 126 <dd>生活旅行</dd> 127 <dd>常见问题</dd> 128 <dd>大家电</dd> 129 <dd>联系客服</dd> 130 </dl> 131 <dl> 132 <dt>配送方式</dt> 133 <dd>上门自提</dd> 134 <dd>211限时达</dd> 135 <dd>配送服务查询</dd> 136 <dd>配送收费标准</dd> 137 <dd>海外配送</dd> 138 139 </dl> 140 <dl> 141 <dt>支付方式</dt> 142 <dd>货到付款</dd> 143 <dd>在线支付</dd> 144 <dd>分期付款</dd> 145 <dd>邮局汇款</dd> 146 <dd>公司转账</dd> 147 </dl> 148 <dl> 149 <dt>售后服务</dt> 150 <dd>售后政策</dd> 151 <dd>价格保护</dd> 152 <dd>退款说明</dd> 153 <dd>返修/退换货</dd> 154 <dd>取消订单</dd> 155 </dl> 156 <dl> 157 <dt>特色服务</dt> 158 <dd>夺宝岛</dd> 159 <dd>DTY装机</dd> 160 <dd>延保服务</dd> 161 <dd>京东E卡</dd> 162 <dd>京东通信</dd> 163 <dd>京东JD+</dd> 164 </dl> 165 <div> 166 <h3>京东自营覆盖县</h3> 167 <p>京东已向全国2661个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。</p> 168 <a href="#">查看详情<i class="iconfont"></i></a> 169 170 </div> 171 </div> 172 <div class="foot-bottom w"> 173 <ul> 174 <li>关于我们</li><s>|</s> 175 <li>联系我们</li><s>|</s> 176 <li>联系客服</li><s>|</s> 177 <li>合作招商</li><s>|</s> 178 <li>营销中心</li><s>|</s> 179 <li>手机京东</li><s>|</s> 180 <li>友情链接</li><s>|</s> 181 <li>销售联盟</li><s>|</s> 182 <li>京东社区</li><s>|</s> 183 <li>风险监测</li><s>|</s> 184 <li>隐私政策</li><s>|</s> 185 <li>京东公益</li><s>|</s> 186 <li class="one">English Site</li><span>|</span> 187 <li class="one">Contact Us</li> 188 </ul> 189 <p> 190 <a href="#">京公网安备</a>11000002000088号<span class="spacer">|</span> 191 <span>京ICP证070359号</span><span class="spacer">|</span> 192 <a href="#">互联网药品信息服务资格证编号(京)-经营性-2014-0008</a><span class="spacer">|</span> 193 <span>新出发京零字第大120007号</span> 194 </p> 195 <p> 196 <span>互联网出版许可证编号新出网证(京)字150号</span><span class="spacer">|</span> 197 <a href="#">出版物经营许可证</a><span class="spacer">|</span> 198 <a href="#">网络文化经营许可证京网文[2014]2148-348号</a><span class="spacer">|</span> 199 <span>违法和不良信息举报电话：4006561155</span> 200 </p> 201 <p> 202 <span>Copyright © 2004 - 2017 京东JD.com 版权所有</span><span class="spacer">|</span> 203 <span>消费者维权热线：4006067733</span> 204 <a href="#">经营证照</a> 205 </p> 206 <p> 207 <span>京东旗下网站：</span><a href="#">京东钱包</a><span class="spacer">|</span><a href="#">京东云</a> 208 </p> 209 <div class="authentication"> 210 <a href="#" class="a1"></a> 211 <a href="#" class="a2"></a> 212 <a href="#" class="a3"></a> 213 <a href="#" class="a4"></a> 214 <a href="#" class="a5"></a> 215 <a href="#" class="a6"></a> 216 </div> 217 </div> 218 </div> 219 <!--底部结束了--> 220 </body> 221 </html>
3.footer.css代码
1 /*底部开始了*/ 2 .footer{ 3 height: 550px; 4 background-color: #EAEAEA; 5 margin-top: 10px; 6 text-align: center; 7 } 8 .foot-top{ 9 height: 100px; 10 border: 1px solid #DEDEDE; 11 } 12 .foot-top .w{ 13 height: 100px; 14 15 } 16 .foot-top .w li { 17 250px; 18 display: block; 19 line-height: 100px; 20 margin-left: 35px; 21 float: left; 22 } 23 .foot-top .w li h5{ 24 float: left; 25 text-indent: -9999em; 26 36px; 27 height: 42px; 28 background: url("../images/ico_service.png")no-repeat 0px 0px; 29 margin-top: 28px; 30 } 31 .foot-top .w li .qulick{ 32 background: url("../images/ico_service.png")no-repeat 0px -43px; 33 } 34 .foot-top .w li .good{ 35 background: url("../images/ico_service.png")no-repeat 0px -86px; 36 } 37 .foot-top .w li .sheng{ 38 background: url("../images/ico_service.png")no-repeat 0px -129px; 39 } 40 41 42 .foot-top .w li p{ 43 float: left; 44 font-family: "微软雅黑"; 45 font-size: 20px; 46 font-weight: 700; 47 margin-left: 3px; 48 } 49 50 51 /*上结束了========*/ 52 .footer .foot-middle{ 53 height: 200px; 54 border: 1px solid #DEDEDE; 55 } 56 .foot-middle dl{ 57 197px; 58 height: 160px; 59 padding-top: 22px; 60 text-align: left; 61 float: left; 62 } 63 .foot-middle dt{ 64 font-size: 16px; 65 font-weight: 700; 66 text-align: left; 67 margin-bottom: 10px; 68 } 69 .foot-middle dd{ 70 line-height: 20px; 71 color: #666666; 72 } 73 .foot-middle div{ 74 float: left; 75 200px; 76 height: 145px; 77 background: url("../images/ico_footer.png") no-repeat -1px -2px; 78 } 79 .foot-middle div h3{ 80 margin-top: 22px; 81 font-size: 16px; 82 font-weight: 700; 83 } 84 .foot-middle div p{ 85 margin-top: 22px; 86 170px; 87 height: 50px; 88 margin-bottom: 5px; 89 margin-right: 15px; 90 text-align: left; 91 } 92 .foot-middle div a{ 93 180px; 94 display: block; 95 text-align: right; 96 } 97 .foot-middle div a i{ 98 font-size: 10px; 99 } 100 /*中间部分结束了-------*/ 101 .footer .foot-bottom{ 102 height: 200px; 103 text-align: center; 104 105 } 106 .foot-bottom ul{ 107 padding-left: 30px; 108 overflow: hidden; 109 } 110 .foot-bottom li, 111 .foot-bottom s{ 112 float: left; 113 display: block; 114 line-height: 30px; 115 font-size: 12px; 116 } 117 .foot-bottom li{ 118 height: 30px; 119 50px; 120 margin: 0 10px; 121 } 122 .foot-bottom .one{ 123 77px; 124 height: 30px; 125 } 126 .foot-bottom p{ 127 color: #999999; 128 margin-top: 5px; 129 } 130 .foot-bottom p a{ 131 color: #999; 132 } 133 .foot-bottom p span{ 134 margin: 0 8px; 135 } 136 137 138 139 .foot-bottom .authentication{ 140 height: 32px; 141 margin-top: 35px; 142 143 } 144 .foot-bottom .authentication a{ 145 103px; 146 height: 32px; 147 background-image: url("../images/ico_footer.png"); 148 display: inline-block; 149 } 150 .foot-bottom .authentication .a1{ 151 background-position: 0 -151px; 152 } 153 .foot-bottom .authentication .a2{ 154 background-position: -103px -151px; 155 } 156 .foot-bottom .authentication .a3{ 157 background-position: 0 -184px; 158 } 159 .foot-bottom .authentication .a4{ 160 background-position: -103px -184px; 161 } 162 .foot-bottom .authentication .a5{ 163 background-position: 0 -217px; 164 } 165 .foot-bottom .authentication .a6{ 166 background-position: -103px -217px; 167 } 168 /*底部结束了*/
4.middle.css代码
1 /*京东秒杀开始了*/ 2 .top { 3 height: 55px; 4 background:url("../images/seckill_hd.png") no-repeat; 5 margin-top: 10px; 6 padding-left: 30px; 7 } 8 .top-fl{ 9 340px; 10 height: 55px; 11 float: left; 12 } 13 .top-fl div{ 14 height: 45px; 15 45px; 16 position: relative; 17 float: left; 18 } 19 .top-fl div span{ 20 display: block; 21 height: 45px; 22 45px; 23 line-height: 45px; 24 background: url("../images/sprite_index@1x.png")no-repeat 0 -40px; 25 float: left; 26 position: absolute; /* 不定位，钟表不能往下走，设置margin和padding都没用*/ 27 top: 6px; 28 left: 5px; 29 30 } 31 .top-fl h3{ 32 float: left; 33 color: #fff; 34 font-size: 20px; 35 line-height: 45px; 36 margin-top: 6px; 37 } 38 .top-fl p { 39 float: left; 40 color: #ffffff; 41 line-height: 45px; 42 font-size: 14px; 43 margin-top: 10px; 44 margin-left: 5px; 45 position: relative; 46 47 } 48 .top-fl p i{ 49 height: 45px; 50 display: block; 51 background:url("../images/sprite_index@1x.png") no-repeat -154px -40px; 52 position: absolute; 53 top: 15px; 54 left: 130px; 55 20px;/* 如果不设置宽度，定不了位*/ 56 57 58 } 59 .top-fr{ 60 float: right; /*div盒子不设置宽和高也可以进行右浮动*/ 61 290px; 62 height: 55px; 63 } 64 .top-fr .fr-l{ 65 float: left;/*p盒子不设置宽和高也可以进行右浮动*/ 66 60px; 67 line-height: 55px; 68 color: #ffffff; 69 text-align: center; 70 } 71 .top-fr div, 72 .top-fr span{ 73 float: left; /*span盒子不设置宽和高也可以进行右浮动*/ 74 75 } 76 .top-fr div{ 77 35px; 78 height: 35px; 79 background-color: #440106; 80 line-height: 35px; 81 color: #F90013; 82 margin-top: 10px; 83 text-align: center; 84 font-size: 20px; 85 } 86 .top-fr span{ 87 8px; 88 height: 20px; 89 display: block; 90 line-height: 20px; 91 font-size: 30px; 92 margin-top: 18px; 93 color: #440106; 94 } 95 .top-fr .fr-r{ 96 float: left;/*p盒子不设置宽和高也可以进行右浮动*/ 97 70px; 98 line-height: 55px; 99 color: #ffffff; 100 text-align: center; 101 } 102 103 104 105 /*======*/ 106 .bottom-skill { 107 height: 250px; 108 background-color: #fff; 109 } 110 .bottom-skill li{ 111 position: relative; 112 } 113 .bottom-skill li{ 114 float: left; 115 border-right: 1px solid #E6E6E6; 116 } 117 .bottom-skill a{ 118 195px; 119 height: 180px; 120 display: inline-block; 121 text-align: center; 122 margin-top: 10px; 123 /*float: left;*/ 124 } 125 .bottom-skill p{ 126 170px; 127 height: 35px; 128 color: #999999; 129 margin-top: 30px; 130 overflow: hidden; 131 margin-left: 5px; 132 } 133 .bottom-skill .sise{ 134 margin-top: 5px; 135 } 136 .bottom-skill .sise span{ 137 color: #F10215; 138 font-size: 25px; 139 font-family: 微软雅黑; 140 font-weight: 700; 141 } 142 .bottom-skill s{ 143 30px; 144 height: 40px; 145 display: block; 146 line-height: 40px; 147 text-align: center; 148 color: #fff; 149 position: absolute; 150 top: 9px; 151 left: 2px; 152 background: url("../images/sprite_index@1x.png")no-repeat 0 -100px; 153 } 154 .bottom-skill .sk6{ 155 border-right: 0px; 156 } 157 /*京东秒杀结束了*/
5.结合昨天写的代码，出来的总效果图是
