京東項目之頭部和尾部

時間  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文件：字體

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程