京东项目之头部和尾部
花了一天时间写京东首页的头部和尾部，小细节真的太多了，这里附上代码：
html部分：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!-- 在百度里面输入https://www.jd.com/favicon.ico可以得到京东的图标 --> <!-- 如果想用自己设计的图片做图标，可以在http://www.bitbug.net中把图片变为ico文件。 --> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> <!-- 引入css初始化文件 --> <link rel="stylesheet" type="text/css" href="css/Noramlize.css"/> <!-- 头部和底部结构基本相同，我们做基本的公共样式 --> <link rel="stylesheet" type="text/css" href="css/base.css"/> <title>京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title> <!-- description是该网站的具体描述，这个标签的功能可以使百度把这个部分显示出来 --> <meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" /> <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" /> </head> <body> <!-- header部分 start --> <header> <div class="w"> <a href="#"> <img src="images/header.jpg" width="1190" height="80"> </a> </div> </header> <!-- header部分 end --> <!-- 快速导航栏部分 --> <div class="shortcut"> <div class="w"> <ul class="fl city"> <li> <i class="fl0"></i> <a href="#">北京</a> </li> </ul> <ul class="fr"> <li> <a href="#">您好，请登录</a> <a href="#" class="fl0">免费注册</a> </li> <li class="space"></li> <li> <a href="#">我的订单</a> </li> <li class="space"></li> <li> <a href="#">我的京东</a> <i></i> </li> <li class="space"></li> <li> <a href="#">京东会员</a> </li> <li class="space"></li> <li> <a href="#">企业采购</a> </li> <li class="space"></li> <li> <a href="#">客户服务</a> <i></i> </li> <li class="space"></li> <li> <a href="#">网站导航</a> <i></i> </li> <li class="space"></li> <li> <a href="#" class="mobile">手机京东 <img src="images/mobile.jpg"> </a> </li> </ul> </div> </div> <!-- 中间头部分 start --> <div class="w middle"> <div class="logo"> <h1><!-- h1可以提高权重，便利于搜索引擎优化 --> <a href="#"></a> </h1> </div> <!-- 搜索框 --> <div class="form"> <input type="text" placeholder="扫描仪"> <button><i></i></button> </div> <!-- 购物车 --> <div class="shopCar"> <i></i><a href="#" class="f10">我的购物车</a><span>0</span> </div> <!-- 关键词 --> <div class="hotwords"> <a href="#" class="f11">低至5折</a> <a href="#">神舟超品</a> <a href="#">1元兽药</a> <a href="#">潮童保暖</a> <a href="#">4k电视</a> <a href="#">仙人球防辐射</a> <a href="#">橄榄调和油</a> <a href="#">山姆回馈</a> <a href="#">自拍杆</a> </div> <!-- 小导航部分 --> <div class="navitems"> <ul> <li><a href="#"> 秒杀</a></li> <li><a href="#"> 优惠券</a></li> <li><a href="#"> 闪购</a></li> <li><a href="#"> 拍卖</a></li> <li class="space"></li> <li><a href="#"> 京东服饰</a></li> <li><a href="#"> 京东超市</a></li> <li><a href="#"> 生鲜</a></li> <li><a href="#">全球购</a></li> <li class="space"></li> <li><a href="#"> 京东金融</a></li> </ul> </div> <!-- 超级日部分 --> <div class="super"> <a href="#"><img src="images/super.png" width="190" height="40"></a> </div> </div> <!-- 中间头部分 end --> <!-- 底部部分 start --> <div class="footer"> <!-- 服务模块 --> <div class="server"> <div class="w"> <ul> <li> <h5>多</h5> <p>品类齐全，轻松购物</p> </li> <li> <h5>快</h5> <p>多仓直发，极速配送好</p> </li> <li> <h5>好</h5> <p>正品行货，精致服务</p> </li> <li> <h5>省</h5> <p>天天低价，畅选无忧</p> </li> </ul> </div> </div> <!-- 帮助模块 --> <div class="w help"> <div class="fl"> <dl> <dt>购物指南</dt> <dd><a href="#">购物流程</a></dd> <dd><a href="#">会员介绍</a></dd> <dd><a href="#">生活旅行</a></dd> <dd><a href="#">常见问题</a></dd> <dd><a href="#">大家电</a></dd> <dd><a href="#">联系客服</a></dd> </dl> <dl> <dt>配送方式</dt> <dd><a href="#">上门自提</a></dd> <dd><a href="#">211限时达</a></dd> <dd><a href="#">配送服务查询</a></dd> <dd><a href="#">配送费收取标准</a></dd> <dd><a href="#">海外配送</a></dd> </dl> <dl> <dt>支付方式</dt> <dd><a href="#">货到付款</a></dd> <dd><a href="#">在线支付</a></dd> <dd><a href="#">分期付款</a></dd> <dd><a href="#">邮局汇款</a></dd> <dd><a href="#">公司转账</a></dd> </dl> <dl> <dt>售后服务</dt> <dd><a href="#">售后政策</a></dd> <dd><a href="#">价格保护</a></dd> <dd><a href="#">退款说明</a></dd> <dd><a href="#">返修/退换货</a></dd> <dd><a href="#">取消订单</a></dd> </dl> <dl> <dt>特色服务</dt> <dd><a href="#">夺宝岛</a></dd> <dd><a href="#">DIY装机</a></dd> <dd><a href="#">延保服务</a></dd> <dd><a href="#">京东E卡</a></dd> <dd><a href="#">京东通信</a></dd> <dd><a href="#">京东JD+</a></dd> </dl> </div> <div class="fr coverage"> <h5>京东自营覆盖区县</h5> <p>京东已向全国2661个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。</p> <a href="#">查看详情<</a> </div> <!-- 版权模块 --> <div class="w copyright"> <p> <a href="#">关于我们</a> <span>|</span> <a href="#">联系我们</a> <span>|</span> <a href="#">联系客服</a> <span>|</span> <a href="#">合作招商</a> <span>|</span> <a href="#">商家帮助</a> <span>|</span> <a href="#">营销中心</a> <span>|</span> <a href="#">手机京东</a> <span>|</span> <a href="#">友情链接</a> <span>|</span> <a href="#">销售联盟</a> <span>|</span> <a href="#">京东社区</a> <span>|</span> <a href="#">风险监测</a> <span>|</span> <a href="#">隐私政策</a> <span>|</span> <a href="#">京东公益</a> <span>|</span> <a href="#">English Site</a> <span>|</span> <a href="#">Media & IR</a> </p> <div> <p> 京公网安备 11000002000088号<span>|</span>京ICP证070359号<span>|</span>互联网药品信息服务资格证编号(京)-经营性-2014-0008<span>|</span>新出发京零 字第大120007号 </p> <p> 互联网出版许可证编号新出网证(京)字150号<span>|</span>出版物经营许可证<span>|</span>网络文化经营许可证京网文[2014]2148-348号<span>|</span>违法和不良信息举报电话：4006561155 </p> <p> Copyright © 2004 - 2017 京东JD.com 版权所有<span>|</span>消费者维权热线：4006067733经营证照 </p> <p> 京东旗下网站：京东支付<span>|</span>京东云 </p> </div> <p class="footicon"> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> </p> </div> </div> </div> <!-- 底部部分 end --> </body> </html>
css部分：
.w{/* 版心的公共类 */ width:1190px;/* 京东的版心的宽是1190px */ margin: 0 auto;/* 居中对齐 */ } body{/* 整个网页的背景颜色 */ background-color: #f6f6f6; } @font-face {/* 声明字体 */ font-family: 'icomoon'; src: url('../fonts/icomoon.eot?gvsz4b'); src: url('../fonts/icomoon.eot?gvsz4b#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?gvsz4b') format('truetype'), url('../fonts/icomoon.woff?gvsz4b') format('woff'), url('../fonts/icomoon.svg?gvsz4b#icomoon') format('svg'); font-weight: normal; font-style: normal; } .fl0{ color:#f10215!important;/* !important是为了提高f10的权重，防止在用它时被其他的权重高的给覆盖 */ } .f10 { color: #f10215; } a{ text-decoration: none;/* 取消下划线 */ font-size: 12px; color: #999999;/* 字体颜色 */ } a:hover{ color: #c81623; } /* header部分 */ header{ height: 80px; background-color: #020000; } .fl{ float: left; } .fr{ float: right; } /* 快速导航栏begin */ .shortcut{ height: 30px; background-color: #e3e4e5; border-bottom: 1px solid #dddddd; line-height: 30px;/* 行高 ，居中*/ } .city{ margin-left: 200px;/* 外边距 */ } .shortcut li{ float: left; } .shortcut i{ font-family: 'icomoon'; font-style: normal;/* 让倾斜的不倾斜 */ color: #cccccc; } .space{/* 小竖线 */ width: 1px; height: 10px; background-color: #cccccc; margin: 10px 12px 0;/* 上：10 左右：12 下：0 */ } .mobile{ position: relative;/* 相对定位 */ } .mobile img{ position:absolute;/* 绝对定位 */ border: 1px solid #cccccc;/* 设置边框 */ left: -3px; top: 24px; padding: 3px;/* 内边距 */ } blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{/* 消除外边距 */ margin: 0; padding: 0; } input,button{ border:0; outline: none;/* 取消轮廓边框 */ } /* 快速导航栏over */ ul{ list-style: none; } /* 中间头部分 start */ .middle{ height:140px; position: relative; } .logo{ position: absolute; top:-30px; left:0; box-shadow: 0px -10px 10px rgb(0,0,0,.3); } .logo a{ display: block; width: 190px; height: 170px; background: #fff url(../images/logo.png) no-repeat; } /* 搜索框 */ .form{ width:550px; height:35px; position: absolute; top:25px; left:320px; } .form input{ width: 495px; height: 33px; border: 1px solid #f10215; float: left; font-size: 14px; padding-left: 3px; } .form button{ width: 50px; height: 35px; background-color: #f10215; float: left; } .form button i{ font-family: 'icomoon'; font-style: normal;/* 让倾斜的不倾斜 */ color: #fff; } /* 购物车 */ .shopCar{ width: 188px; height: 33px; border: 1px solid #cccccc; position: absolute; top:25px; right: 95px; background-color: #fff; color: #f10215; text-align: center; line-height: 30px; } .shopCar i{ font-family: 'icomoon'; font-style: normal;/* 让倾斜的不倾斜 */ margin-right: 5px; } .shopCar span{ width: 15px; height: 15px; background-color:#f10215; border-radius: 50%; position: absolute; top: 5px; right: 30px; font-size: 12px; color: #fff; line-height: 15px; } /* 关键词 */ .hotwords{ position: absolute; top: 68px; left: 320px; } /* 小导航部分 */ .navitems{ width: 770px; height:40px; position:absolute; bottom: 0; left: 200px; line-height: 40px; } .navitems li{ float: left; margin-left: 30px; } .navitems li a{ font-size: 16px; font-weight: 700; color: #555; } .navitems li a:hover{ color: #f10215; } .navitems .space{ margin-top: 15px; margin-left: 15px; margin-right: -15px; } .super{ position: absolute; right: 0; bottom: 10px; } /* 中间头部分 end */ /* 底部 */ .footer{ height: 500px; background-color: #EAEAEA; margin-top: 35px; } /* 服务部分 */ .server{ padding: 30px 0;/* 上下30，左右0 */ border-bottom: 1px solid #DEDEDE; overflow: hidden;/* 清除浮动 */ } .server ul li{ width: 297px; height: 43px; float: left; position: relative; line-height: 43px; } .server li h5{ position: absolute; top: 0; left: 38px; width: 36px; height: 43px; background:url(../images/foot.png) no-repeat; text-indent: -999em; } .server li:nth-child(2) h5{ background-position: 0 -43px; } .server li:nth-child(3) h5{ background-position: 0 -86px; } .server li:nth-child(4) h5{ background-position: bottom; } .server li p{ font-weight: 700; margin-left: 82px; } /* 帮助部分 */ .help{ height: 200px; border-bottom: 1px solid #DEDEDE; padding-top: 25px; box-sizing: border-box; } .help dl{ width: 192px; float: left; } .help dt, .coverage h5{ height: 30px; font-size: 14px; color: #666666; } .help dd{ height: 22px; } /* 范围 */ .coverage{ width: 200px; height: 150px; background: url(../images/china.png) no-repeat; background-size:200px 150px;/* 设置一下china.png的大小，原图太大了，放不了 */ color: #666666; } .coverage h5{ padding-left: 35px; } .coverage p{ font-size: 12px; color: #666666; line-height: 18px; width: 180px; } .coverage a{ display: block; margin-top:5px; width: 180px; text-align: right; } /* 版权部分 */ .copyright{ margin-top: 20px; float: left; text-align: center; color: #666666; font-size: 12px; } .copyright span{ margin:0 10px;/* 上下0，左右10px */ } .copyright div{ margin-top: 20px; } .copyright div p{ line-height: 22px; } .footicon a{ display: inline-block; width: 103px; height: 33px; background-color: pink; /* 行内块可以用text-align: center;来实现居中 */ background: url(../images/f1.png) no-repeat 0 0; margin:20px 4px 0; } .footicon a:nth-child(2){ background-position: -103px 0; } .footicon a:nth-child(3){ background-position: 0 -33px; } .footicon a:nth-child(4){ background-position: -103px -33px; } .footicon a:nth-child(5){ background-position:0 -66px; } .footicon a:nth-child(6){ background-position: -103px -66px; }
images文件：
