京东项目之头部和尾部

时间 2019-11-20

标签京东项目头部尾部繁體版

原文原文链接

京东项目之头部和尾部css

花了一天时间写京东首页的头部和尾部，小细节真的太多了，这里附上代码：html

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部分：svg

.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文件：字体