亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JS實(shí)現(xiàn)京東首頁之頁面頂部、Logo和搜索框功能

 更新時(shí)間：2017年01月12日 08:37:21   作者：Andone_hsx  
這篇文章主要實(shí)現(xiàn)京東的頁面頂部，logo和搜索框功能，本文有效果展示，頁面布局詳細(xì)分析，具體實(shí)現(xiàn)代碼，介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的的朋友參考下吧

    昨天我們主要講了京東首頁的基本布局，今天我們主要來逐步實(shí)現(xiàn)京東首頁的頁面頂部、Logo&搜索框。首先我們來看下我們今天將要實(shí)現(xiàn)的效果：

這里寫圖片描述

下面頁面布局詳細(xì)分析：

1、頁面頭部分三個(gè)部分依次實(shí)現(xiàn)：五角星圖、收藏京東、右邊文字部分（用列表實(shí)現(xiàn)）；

其中當(dāng)鼠標(biāo)停放在手機(jī)京東上，手機(jī)背景圖發(fā)生變化，變成紅色帶jd的圖案；當(dāng)鼠標(biāo)懸停在客服服務(wù)上，出現(xiàn)下拉列表。

2、Logo&搜索框分四個(gè)部分實(shí)現(xiàn)：左邊京東Logo、中間搜索框（上部：快速搜索；下部：熱門搜索）、右部我的京東&去購物車（步驟類似我的京東，省略）

分析圖：

這里寫圖片描述

具體實(shí)現(xiàn)代碼如下：

jd_index.html

<!doctype html>
<html>
  <head>
    <title>Insert your title</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="jd_index.css">
  </head>
  <body>
    <!-- 1、網(wǎng)頁頭部 -->
    <header id="top">
      <!-- 1、五角星(左) -->
      <img class="lf" src="Images/star.jpg">
      <!-- 2、收藏京東(左) -->
      <a href="#" class="lf">收藏京東</a>
      <!-- 3、文字列表(右) -->
      <ul class="rt">
        <li>
          您好，歡迎來到京東
          <a href="#">[登錄]</a>
          <a href="#">[免費(fèi)注冊(cè)]</a>
        </li>
        <li>
          <b></b> <!-- 邊框 -->
          <a href="#">我的訂單</a>
        </li>
        <li class="vip">
          <b></b> <!-- 邊框 -->
          <a href="#">會(huì)員俱樂部</a>
        </li>
        <li class="dakehu">
          <b></b> <!-- 邊框 -->
          <a href="#">企業(yè)頻道</a>
        </li>
        <li class="app_jd">
          <b></b> <!-- 邊框 -->
          <a href="#">手機(jī)京東</a>
        </li>
        <li class="service">
          <b></b> <!-- 邊框 -->
          <a href="#">客戶服務(wù)</a>
          <!-- 彈出菜單 -->
          <ul id="service_items">
            <li>
              <a href="#">幫助中心</a>
            </li>
            <li>
              <a href="#">幫助中心</a>
            </li>
            <li>
              <a href="#">幫助中心</a>
            </li>
            <li>
              <a href="#">幫助中心</a>
            </li>
            <li>
              <a href="#">幫助中心</a>
            </li>
          </ul>
        </li>
        <li>
          <b></b> <!-- 邊框 -->
          <a href="#">網(wǎng)站導(dǎo)航</a>
        </li>
      </ul>
    </header>
    <!-- 2、LOGO 和 搜索框 -->
    <div id="top_main">
      <!-- 1、LOGO -->
      <a href="#" class="lf">
        <img src="Images/logo-201305.png">
      </a>    
      <!-- 2、搜索框和搜索按鈕 -->
      <div id="search_box">
        <!-- 1、搜索框和按鈕 -->
        <div class="search">
          <input class="txtSearch">
          <button>搜索</button>
        </div>
        <!-- 2、熱門搜索 -->
        <div class="hot_words">
          <span>熱門搜索：</span>
          <a href="#">家紡11月大促</a>
          <a href="#">彩虹電熱毯</a>
          <a href="#">博洋家紡</a>
          <a href="#">霞珍</a>
          <a href="#">家紡11月大促</a>
          <a href="#">彩虹電熱毯</a>
          <a href="#">博洋家紡</a>
          <a href="#">霞珍</a>
          <a href="#">家紡11月大促</a>
          <a href="#">彩虹電熱毯</a>
          <a href="#">博洋家紡</a>
          <a href="#">霞珍</a>
          <a href="#">家紡11月大促</a>
          <a href="#">彩虹電熱毯</a>
          <a href="#">博洋家紡</a>
          <a href="#">霞珍</a>
          <a href="#">家紡11月大促</a>
          <a href="#">彩虹電熱毯</a>
          <a href="#">博洋家紡</a>
          <a href="#">霞珍</a>
          <a href="#">家紡11月大促</a>
          <a href="#">彩虹電熱毯</a>
          <a href="#">博洋家紡</a>
          <a href="#">霞珍</a>
        </div>
      </div>
      <!-- 3、我的京東 -->
      <div id="my_jd">
        我的京東
        <b></b><!-- 向下箭頭 -->
      </div>
      <!-- 4、去購物車結(jié)算 -->
      <!-- 5、追加空子元素，撐起top_main -->
      <div class="clear"></div>
    </div>
    <!-- 3、主導(dǎo)航-->
    <nav id="nav">主導(dǎo)航</nav>
    <!-- 4、banner廣告部分-->
    <div id="banner">banner廣告部分</div>
    <!-- 5、頁面主體-->
    <section id="main">頁面主體</section>
    <!-- 6、頁面底部-配送方式 -->
    <footer id="foot_box">配送方式</footer>
    <!-- 7、頁面底部-備案號(hào) -->
    <footer id="footer">備案號(hào)</footer>
  </body>
</html>

外部樣式：

jd_index.css

/*測試屬性*/
#nav,#banner,#main,#foot_box,#footer{
  border:1px solid black;
}
/*通用*/
body{
  font:12px "microsoft yahei",Arial,Helvetica,sans-serif;
  color:#666;
  margin:0;
}
ul,p,h1,h2,h3,h4,h5,h6,ol,dl,dd{
  margin:0;
  padding:0;
  list-style:none;
}
img{vertical-align:bottom;}
a{
  color:#666;
  text-decoration:none;
}
a:hover{
  color:#FF0700;
  text-decoration:underline;
}
.lf{float:left;}
.rt{float:right;}
.clear{clear:both;}
/**布局元素樣式**/
#top,#top_main,#nav,#banner,#main,#foot_box,#footer{
  width:1211px;
  margin:0 auto;
}
/*******1、頁面頂部**********/
#top{
  /*高度，行高，背景顏色，下邊框*/
  height:30px;
  line-height:30px;
  background-color:#f7f7f7;
  border-bottom:1px solid #eee;
}
#top>img{
  margin-top:10px;
  margin-right:5px;
}
/*文字列表*/
#top>ul>li{
  float:left;
  margin-right:10px;
}
#top>ul b{
  border-left:1px solid #ddd;
  margin-right:10px;
}
/*會(huì)員俱樂部*/
li.vip a{
  padding-left:34px;
  background:url(Images/vip.jpg) no-repeat left center;
}
/*大客戶*/
li.dakehu a{
  padding-left:31px;
  background:url(Images/dakehu.jpg) no-repeat left center;
}
/*手機(jī)京東*/
li.app_jd a{
  /*左內(nèi)邊距，行內(nèi)塊，高度，行高，背景*/
  padding-left:23px;
  display:inline-block;
  height:22px;
  line-height:22px;
  background:url(Images/iconlist_2.png) no-repeat -128px -360px;
}
li.app_jd a:hover{
  background-position:-128px -399px;
}
/*客戶服務(wù)*/
li.service>a{
  /*左右內(nèi)邊距模擬寬度*/
  padding:0 15px;
  /*高度，行高*/
  display:inline-block;
  height:26px;
  line-height:26px;
  /*背景圖像：水平偏右，垂直居中*/
  background:url(Images/jt_down.jpg) no-repeat 95% center;
  /*左右上邊框：透明*/
  border:1px solid transparent;
  border-bottom:none;
}
/*客戶服務(wù)-彈出菜單*/
li.service{
  /*相對(duì)定位：配合#service_items 做絕對(duì)定位*/
  position:relative;
}
#service_items{
  /*寬度，邊框，背景顏色，文本水平居中，定位*/
  box-sizing:border-box;
  width:80px;
  border:1px solid #ddd;
  border-top:none;
  background-color:#fff;
  text-align:center;
  /*絕對(duì)定位*/
  position:absolute;
  top:28px;
  left:11px;
  /*默認(rèn)隱藏*/
  display:none;
}
/*當(dāng)鼠標(biāo)移入到li.service上時(shí)，找到其子級(jí)#service_items ,并且顯示*/
li.service:hover #service_items{
  display:block;
}
/*當(dāng)鼠標(biāo)移入到li.service上時(shí)，找到其直接子級(jí)a標(biāo)記，設(shè)置樣式*/
li.service:hover>a{
  border-color:#ddd;
  background-color:#fff;
  background-image:url(Images/jt_up.jpg);
}
/**********2、LOGO 和 搜索框************/
#top_main{
  padding:10px 0;
}
/*搜索框和搜索按鈕和熱門搜索*/
#search_box{
  /*左浮動(dòng)，寬度，左右外邊距，min-height*/
  float:left;
  width:500px;
  margin:0 80px 0 40px;
  min-height:30px;
}
#search_box div.search{
  /*高度，背景顏色*/
  height:30px;
  background-color:#e4393c;
  /*邊框*/
  padding:3px;
}
#search_box input{
  /*寬度，高度，取消邊框*/
  width:410px;
  height:30px;
  border:none;
  box-sizing:border-box;
  padding-left:10px;
}
#search_box button{
  /*寬度，高度，取消邊框，背景顏色*/
  width:80px;
  height:28px;
  border:none;
  background-color:#E4393C;
  /*文字：大小，顏色，加粗*/
  font-size:14px;
  color:#fff;
  font-weight:bold;
}
/*熱門搜索*/
#search_box div.hot_words{
  /*上外邊距*/
  margin-top:5px;
  /*寬度，高度，溢出隱藏*/
  width:500px;
  height:16px;
  overflow:hidden;
}
#search_box div.hot_words span{
  color:#999;
}
#search_box div.hot_words a{
  color:#999;
}
/*我的京東*/
#my_jd{
  /*左浮動(dòng)，邊框，背景*/
  float:left;
  border:1px solid #EFEFEF;
  background-color:#f7f7f7;
  /*高度，左內(nèi)邊距，背景圖像*/ /*20*17*/
  padding-left:30px;
  height:27px;
  line-height:27px;
  background-image:url(Images/iconlist_2.png);
  background-repeat:no-repeat;
  background-position:-116px -25px;
  padding-right:5px;
}
#my_jd:hover{
  background-color:#fff;
  background-position:-116px -55px;
}
#my_jd b{
  /*行內(nèi)塊，寬度，高度，邊框 */
  display:inline-block;
  width:0px;
  height:0px;
  border:5px solid transparent;
  border-top-color:#ccc;
  /*相對(duì)定位：實(shí)現(xiàn)該元素的位置微調(diào)*/
  position:relative;
  top:3px;
}

以上所述是小編給大家介紹的JS實(shí)現(xiàn)京東首頁之頁面頂部、Logo和搜索框功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論