html+css仿淘寶首頁靜態頁面練習

前兩天根據渡一的《淘寶商城項目實戰開發》視頻，學着用html+css做了一個淘寶首頁的靜態頁面，由於內容太多，所以只做了前兩屏的內容，代碼基本跟視頻裏的代碼一樣，有小部分不同。
其中有一部分圖片是我自己摳的，由於圖片太多，所以有的圖片用的是重複的。
效果圖：

頁面中的部分圖標使用的是iconfont，方法如下：
1.打開iconfont，登陸賬號，搜索想要的圖標，點擊添加入庫。
2.把所有需要的圖標都添加後，點擊右上方購物車，選擇下載代碼。
3.解壓下載的文件，把如下的五個文件粘貼到項目中，可以直接粘貼到css的文件夾裏，也可以再新建一個文件夾，我是新建了一個文件夾font。

4.粘貼如下代碼到index.css文件中：
（如果選擇的是把上面五個文件放到新建文件夾中，則需要更改一下url）

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

5.打開解壓文件夾中的demo_index.html文件，挑選相應圖標並獲取字體編碼，應用於頁面，如：

<span class="iconfont">&#x33;</span>

附：項目源碼

index.html代碼：

<!DOCTYPE html>

<head>
  <meta charset="UTF-8">
  <title>淘寶網 - 淘！我喜歡</title>
  <link rel="stylesheet" href="css/index.css">
  <link rel="icon" href="favicon.ico">
  <base target="_blank">
</head>

<body>
  <!-- 
    內容
    顏色塊
    間距
    邊框
  -->


  <!-- 頭部信息 -->
  <div id="headMessage" class="clearfix layer">
    <ul class="fl">
      <li>
        <span>中國大陸</span>
        <span class="iconfont arrow">&#xe649;</span>
      </li>
      <li class="mr7">
        <a href="#" class="login mr7">親，請登錄</a>
        <a href="#">免費註冊</a>
      </li>
      <li>
        <a href="#">手機逛淘寶</a>
      </li>
    </ul>
    <ul class="fr">
      <li>
        <a href="#">我的淘寶</a>
        <span class="iconfont arrow">&#xe649;</span>
      </li>
      <li>
        <span class="iconfont c4 mr5">&#xe64f;</span>
        <a href="#">購物車</a>
        <strong>0</strong>
        <span class="iconfont arrow">&#xe649;</span>
      </li>
      <li>
        <a href="#"><span class="iconfont store mr5">&#xe632;</span>收藏夾</a>
        <span class="iconfont arrow">&#xe649;</span>
      </li>
      <li>
        <a href="#">商品分類</a>
      </li>
      <li class="line">|</li>
      <li>
        <a href="#">千牛賣家中心</a>
        <span class="iconfont arrow">&#xe649;</span>
      </li>
      <li>
        <a href="#">聯繫客服</a>
        <span class="iconfont arrow">&#xe649;</span>
      </li>
      <li>
        <span class="iconfont c4 mr5">&#xe67c; </span>
        <a href="#">網站導航</a>
        <span class="iconfont arrow">&#xe649;</span>
      </li>
    </ul>
  </div>

  <!-- 頭部廣告 -->
  <div id="headAd">
    <div class="layer clearfix">
      <a href="#" class="fl go"><img src="images/go.png" alt=""></a>
      <ul class="fr">
        <li class="item1">
          <a herf="#" class="fr">
            <img src="images/adimg_01.png" alt="">
          </a>
          <h3><a href="#">電視會場</a></h3>
          <p><a href="#">最高降2000</a></p>
        </li>
        <li class="item2">
          <a herf="#" class="fr">
            <img src="images/adimg_01.png" alt="">
          </a>
          <h3><a href="#">電視會場</a></h3>
          <p><a href="#">最高降2000</a></p>
        </li>
        <li class="item3">
          <a herf="#" class="fr">
            <img src="images/adimg_01.png" alt="">
          </a>
          <h3><a href="#">電視會場</a></h3>
          <p><a href="#">最高降2000</a></p>
        </li>
        <li class="item4">
          <a herf="#" class="fr">
            <img src="images/adimg_01.png" alt="">
          </a>
          <h3><a href="#">電視會場</a></h3>
          <p><a href="#">最高降2000</a></p>
        </li>
        <li class="item5">
          <a herf="#" class="fr">
            <img src="images/adimg_01.png" alt="">
          </a>
          <h3><a href="#">電視會場</a></h3>
          <p><a href="#">最高降2000</a></p>
        </li>
        <!-- <li>
          <a href="#" class="fr"><img src="images/adimg_01.png" alt=""></a>
          <h3><a href="#">電視會場</a></h3>
          <p><a href="#">最高降2000</a></p>
        </li> -->
      </ul>
    </div>
  </div>

  <!-- 頭部搜索 -->
  <div id="headSearch">
    <div class="layer clearfix">
      <!-- <h1><a href="#"><img src="images/logo.gif" alt="淘寶網"></a></h1> -->
      <h1 class="fl"><a href="#">淘寶網</a></h1>

      <div class="code fr">
        <span class="iconfont close">&#xe637;</span>
        <span class="c5">手機淘寶</span>
        <img src="images/code.png" alt="">
      </div>

      <div class="search">
        <ul class="searchTab clearfix">
          <li class="active">寶貝</li>
          <li>天貓</li>
          <li>店鋪</li>
        </ul>

        <div class="searchContent clearfix">
          <form action="#">
            <div class="searchBox fl">
              <input type="text">
              <div class="placeholder">
                <i class="iconfont">&#xe638;</i>
                <span>初秋女裝氣質</span>
              </div>
              <span class="iconfont imgSearch">&#xe6ba;</span>
            </div>
            <div class="btn fl">
              <button type="submit">搜索</button>
            </div>
          </form>
        </div>

        <div class="hotkey">
          <a href="#" class="c5">雙肩包</a>
          <a href="#">時尚連衣裙</a>
          <a href="#">沙發</a>
          <a href="#" class="c5">電動車</a>
          <a href="#">藍牙耳機</a>
          <a href="#" class="c5">男士內褲</a>
          <a href="#">定製窗簾</a>
          <a href="#">拉桿箱</a>
          <a href="#">電腦桌</a>
          <a href="#">電腦椅</a>
          <a href="#">吸頂燈</a>
          <a href="#">廚房置物架</a>
          <a href="#">吊燈</a>
        </div>
      </div>
    </div>
  </div>

  <!-- 導航 -->
  <div id="nav" class="layer clearfix">
    <h2 class="fl">主題市場</h2>
    <ul>
      <li class="size"><a href="#">天貓</a></li>
      <li class="size"><a href="#">聚划算</a></li>
      <li class="size"><a href="#">天貓超市</a></li>
      <li class="line">|</li>
      <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>
      <li class="line">|</li>
      <li><a href="#">飛豬旅行</a></li>
      <li><a href="#">智能生活</a></li>
      <li><a href="#">蘇寧易購</a></li>
    </ul>
  </div>

  <!-- 首屏內容 -->
  <div id="firstScreen" class="layer clearfix">
    <!-- 左邊的內容 -->
    <div class="firstLeft fl">
      <!-- 側邊導航 -->
      <div class="sideNav fl">
        <ul>
          <li>
            <a href="#">女裝</a> / <a href="#">男裝</a> / <a href="#">內衣</a><span class="iconfont fr">&#xe6a3;</span>
          </li>
          <li>
            <a href="#">女裝</a> / <a href="#">男裝</a> / <a href="#">內衣</a><span class="iconfont fr">&#xe6a3;</span>
          </li>
          <li>
            <a href="#">女裝</a> / <a href="#">男裝</a> / <a href="#">內衣</a><span class="iconfont fr">&#xe6a3;</span>
          </li>
          <li>
            <a href="#">女裝</a> / <a href="#">男裝</a> / <a href="#">內衣</a><span class="iconfont fr">&#xe6a3;</span>
          </li>
          <li>
            <a href="#">女裝</a> / <a href="#">男裝</a> / <a href="#">內衣</a><span class="iconfont fr">&#xe6a3;</span>
          </li>
          <li>
            <a href="#">女裝</a> / <a href="#">男裝</a> / <a href="#">內衣</a><span class="iconfont fr">&#xe6a3;</span>
          </li>
          <li>
            <a href="#">女裝</a> / <a href="#">男裝</a> / <a href="#">內衣</a><span class="iconfont fr">&#xe6a3;</span>
          </li>
          <li>
            <a href="#">女裝</a> / <a href="#">男裝</a> / <a href="#">內衣</a><span class="iconfont fr">&#xe6a3;</span>
          </li>
          <li>
            <a href="#">女裝</a> / <a href="#">男裝</a> / <a href="#">內衣</a><span class="iconfont fr">&#xe6a3;</span>
          </li>
          <li>
            <a href="#">女裝</a> / <a href="#">男裝</a> / <a href="#">內衣</a><span class="iconfont fr">&#xe6a3;</span>
          </li>
          <li>
            <a href="#">女裝</a> / <a href="#">男裝</a> / <a href="#">內衣</a><span class="iconfont fr">&#xe6a3;</span>
          </li>
          <li>
            <a href="#">女裝</a> / <a href="#">男裝</a> / <a href="#">內衣</a><span class="iconfont fr">&#xe6a3;</span>
          </li>
          <li>
            <a href="#">女裝</a> / <a href="#">男裝</a> / <a href="#">內衣</a><span class="iconfont fr">&#xe6a3;</span>
          </li>
          <li>
            <a href="#">女裝</a> / <a href="#">男裝</a> / <a href="#">內衣</a><span class="iconfont fr">&#xe6a3;</span>
          </li>
          <li>
            <a href="#">女裝</a> / <a href="#">男裝</a> / <a href="#">內衣</a><span class="iconfont fr">&#xe6a3;</span>
          </li>
          <li>
            <a href="#">女裝</a> / <a href="#">男裝</a> / <a href="#">內衣</a><span class="iconfont fr">&#xe6a3;</span>
          </li>
        </ul>
      </div>

      <!-- 圖片1容器 -->
      <div class="img1Box fr">
        <div class="pic fl">
          <div class="img">
            <a href="#"><img src="images/pic_01.png" alt=""></a>
          </div>

          <button class="iconfont leftBtn">&#xe645;</button>
          <button class="iconfont rightBtn">&#xe6a3;</button>

          <div class="circle">
            <span class="active"></span><span></span><span></span><span></span><span></span>
          </div>
        </div>
        <div class="ad fr">
          <a href="#"><img src="images/ad_02.png" alt=""></a>
        </div>
      </div>

      <!-- 圖片2容器 -->
      <div class="img2Box fr">
        <div class="pic fl">
          <div class="picTitle">
            <div class="text clearfix">
              <span class="fl bg">理想生活上天貓</span>
              <span class="fr"><i>1</i>/6</span>
            </div>
            <div class="line">
              <span></span>
            </div>
          </div>
          <div class="img">
            <a href="#"><img src="images/pic_02.png" alt=""></a><a href="#"><img src="images/pic_03.png" alt=""></a>
          </div>

          <button class="iconfont leftBtn">&#xe645;</button>
          <button class="iconfont rightBtn">&#xe6a3;</button>
        </div>
        <div class="ad fr">
          <p class="title">今日熱賣</p>
          <a href="#"><img src="images/ad_03.png" alt=""></a>
        </div>
      </div>

      <!-- 淘寶頭條 -->
      <div class="news fl">
        <div class="hd fl">
          <h3>淘寶頭條</h3>
          <p>讓你的生活更有趣</p>
        </div>
        <div class="newList fr">
          <div class="item">
            <a href="#" class="fl img"><img src="images/news_img_01.png" alt=""></a>
            <h4><a href="#">夏日降溫偏方，北歐風清新衛浴這般造</a></h4>
            <p>
              <a href="#">比起大動干戈的客廳打造，獨愛那溫馨的衛浴空間，任由安靜的色澤與各好物發光發熱，由此打造遠離塵世的北歐空間，上演一出以無勝多的神奇逆襲，將清新感貫穿於細節之中，從此解禁夏日涼爽，get全新的降溫時光。</a>
            </p>
          </div>
          <a href="#" class="more">更多></a>
        </div>
      </div>
    </div>

    <!-- 右邊的內容 -->
    <div class="firstRight fr">
      <!-- 用戶 -->
      <div class="user">
        <a href="#" class="avatar"><img src="images/avatar.png" alt=""></a>
        <p class="username">Hi！你好</p>
        <p class="members">
          <a href="#領淘金幣抵錢" class="gold">領淘金幣抵現</a>
          <a href="#" class="club">會員俱樂部</a>
        </p>
        <div class="btn">
          <button class="login">登錄</button>
          <button class="register">註冊</button>
          <button class="shop">開店</button>
        </div>
      </div>

      <!-- 舉報 -->
      <a href="#" class="tipOff">
        <span>網上有害信息舉報專區</span><i class="iconfont">&#xe644;</i>
      </a>

      <!-- 公告區 -->
      <div class="notice">
        <ul class="title">
          <li class="active"><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>
        <ul class="content clearfix">
          <li class="item1"><a href="#">東北大米征服半個中國 佔天貓超市大米銷量6成</a></li>
          <!-- <li><a href="#">東北大米征服半個中國</a></li>
          <li><a href="#">佔天貓超市大米銷量6成</a></li> -->
          <li><a href="#">各地人民避暑爆款產品</a></li>
          <li><a href="#">盲盒背後的千萬級市場</a></li>
        </ul>
      </div>

      <!-- 圖標區域 -->
      <table class="icon">
        <tr>
          <td class="item1">
            <a href="#">
              <span></span>
              <i>充話費</i>
            </a>
          </td>
          <td class="item2">
            <a href="#">
              <span></span>
              <i>旅行</i>
            </a>
          </td>
          <td class="item3">
            <a href="#">
              <span></span>
              <i>車險</i>
            </a>
          </td>
          <td class="item4">
            <a href="#">
              <span></span>
              <i>遊戲</i>
            </a>
          </td>
        </tr>
        <tr>
          <td class="item5">
            <a href="#">
              <span></span>
              <i>彩票</i>
            </a>
          </td>
          <td class="item6">
            <a href="#">
              <span></span>
              <i>電影</i>
            </a>
          </td>
          <td class="item7">
            <a href="#">
              <span></span>
              <i>酒店</i>
            </a>
          </td>
          <td class="item8">
            <a href="#">
              <span></span>
              <i>理財</i>
            </a>
          </td>
        </tr>
        <tr>
          <td class="item9">
            <a href="#">
              <span></span>
              <i>找服務</i>
            </a>
          </td>
          <td class="item10">
            <a href="#">
              <span></span>
              <i>演出</i>
            </a>
          </td>
          <td class="item11">
            <a href="#">
              <span></span>
              <i>水電煤</i>
            </a>
          </td>
          <td class="item12">
            <a href="#">
              <span></span>
              <i>火車票</i>
            </a>
          </td>
        </tr>
      </table>

      <!-- APP -->
      <div class="app">
        <div class="title clearfix">
          <h3 class="fl">阿里APP</h3>
          <a href="#" class="fr">更多></a>
        </div>
        <ul class="appIcon">
          <li><a href="#"><img src="images/app_01.webp" alt=""></a></li>
          <li><a href="#"><img src="images/app_02.webp" alt=""></a></li>
          <li><a href="#"><img src="images/app_03.webp" alt=""></a></li>
          <li><a href="#"><img src="images/app_04.webp" alt=""></a></li>
          <li><a href="#"><img src="images/app_05.webp" alt=""></a></li>
          <li><a href="#"><img src="images/app_06.webp" alt=""></a></li>
          <li><a href="#"><img src="images/app_07.webp" alt=""></a></li>
          <li><a href="#"><img src="images/app_08.webp" alt=""></a></li>
          <li><a href="#"><img src="images/app_09.webp" alt=""></a></li>
          <li><a href="#"><img src="images/app_10.webp" alt=""></a></li>
        </ul>
      </div>
    </div>
  </div>

  <!-- 有好貨與愛逛街 -->
  <div class="layer clearfix mt10">
    <!-- 有好貨 -->
    <div class="goods fl">
      <div class="head clearfix">
        <h3 class="fl">
          <img src="images/goods.png" alt="有好貨">
          <span class="iconfont">&#xe646;</span>
          <i>與品質生活不期而遇</i>
        </h3>
        <a href="#" class="fr change">換一換</a>
      </div>
      <ul class="list">
        <li>
          <a href="#"><img src="images/shop_img_01.jpg" alt=""></a>
          <h4><a href="#">max破產都要買的口紅</a></h4>
          <p class="text"><a href="#">《破產姐妹》max最愛Tarte啞光口紅筆</a></p>
          <a href="#" class="comment">
            <span class="iconfont">&#xe627;</span><i>5958 人說好</i>
          </a>
        </li>
        <li>
          <a href="#"><img src="images/shop_img_01.jpg" alt=""></a>
          <h4><a href="#">max破產都要買的口紅</a></h4>
          <p class="text"><a href="#">《破產姐妹》max最愛Tarte啞光口紅筆</a></p>
          <a href="#" class="comment">
            <span class="iconfont">&#xe627;</span><i>5958 人說好</i>
          </a>
        </li>
        <li>
          <a href="#"><img src="images/shop_img_01.jpg" alt=""></a>
          <h4><a href="#">max破產都要買的口紅</a></h4>
          <p class="text"><a href="#">《破產姐妹》max最愛Tarte啞光口紅筆</a></p>
          <a href="#" class="comment">
            <span class="iconfont">&#xe627;</span><i>5958 人說好</i>
          </a>
        </li>
        <li>
          <a href="#"><img src="images/shop_img_01.jpg" alt=""></a>
          <h4><a href="#">max破產都要買的口紅</a></h4>
          <p class="text"><a href="#">《破產姐妹》max最愛Tarte啞光口紅筆</a></p>
          <a href="#" class="comment">
            <span class="iconfont">&#xe627;</span><i>5958 人說好</i>
          </a>
        </li>
        <li>
          <a href="#"><img src="images/shop_img_01.jpg" alt=""></a>
          <h4><a href="#">max破產都要買的口紅</a></h4>
          <p class="text"><a href="#">《破產姐妹》max最愛Tarte啞光口紅筆</a></p>
          <a href="#" class="comment">
            <span class="iconfont">&#xe627;</span><i>5958 人說好</i>
          </a>
        </li>
        <li>
          <a href="#"><img src="images/shop_img_01.jpg" alt=""></a>
          <h4><a href="#">max破產都要買的口紅</a></h4>
          <p class="text"><a href="#">《破產姐妹》max最愛Tarte啞光口紅筆</a></p>
          <a href="#" class="comment">
            <span class="iconfont">&#xe627;</span><i>5958 人說好</i>
          </a>
        </li>
      </ul>
    </div>

    <!-- 愛逛街 -->
    <div class="goods shopping fr">
      <div class="head clearfix">
        <h3 class="fl">
          <img src="images/shopping.png" alt="愛逛街">
          <i>獻給聰明可愛的你</i>
        </h3>
        <a href="#" class="fr change">換一換</a>
      </div>
      <ul class="list">
        <li>
          <a href="#"><img src="images/shop_img_07.jpg" alt=""></a>
          <p class="text">
            <span class="iconfont">&#xe67b;</span>
            <a href="#">北歐植物蓋巾 讓清新呈現</a>
          </p>
          <a href="#" class="comment">
            <span><img src="images/small_avatar.jpg" alt=""></span><i>妙***幫</i>
          </a>
        </li>
        <li>
          <a href="#"><img src="images/shop_img_07.jpg" alt=""></a>
          <p class="text">
            <span class="iconfont">&#xe67b;</span>
            <a href="#">北歐植物蓋巾 讓清新呈現</a>
          </p>
          <a href="#" class="comment">
            <span><img src="images/small_avatar.jpg" alt=""></span><i>妙***幫</i>
          </a>
        </li>
        <li>
          <a href="#"><img src="images/shop_img_07.jpg" alt=""></a>
          <p class="text">
            <span class="iconfont">&#xe67b;</span>
            <a href="#">北歐植物蓋巾 讓清新呈現</a>
          </p>
          <a href="#" class="comment">
            <span><img src="images/small_avatar.jpg" alt=""></span><i>妙***幫</i>
          </a>
        </li>
        <li>
          <a href="#"><img src="images/shop_img_07.jpg" alt=""></a>
          <p class="text">
            <span class="iconfont">&#xe67b;</span>
            <a href="#">北歐植物蓋巾 讓清新呈現</a>
          </p>
          <a href="#" class="comment">
            <span><img src="images/small_avatar.jpg" alt=""></span><i>妙***幫</i>
          </a>
        </li>
        <li>
          <a href="#"><img src="images/shop_img_07.jpg" alt=""></a>
          <p class="text">
            <span class="iconfont">&#xe67b;</span>
            <a href="#">北歐植物蓋巾 讓清新呈現</a>
          </p>
          <a href="#" class="comment">
            <span><img src="images/small_avatar.jpg" alt=""></span><i>妙***幫</i>
          </a>
        </li>
        <li>
          <a href="#"><img src="images/shop_img_07.jpg" alt=""></a>
          <p class="text">
            <span class="iconfont">&#xe67b;</span>
            <a href="#">北歐植物蓋巾 讓清新呈現</a>
          </p>
          <a href="#" class="comment">
            <span><img src="images/small_avatar.jpg" alt=""></span><i>妙***幫</i>
          </a>
        </li>
      </ul>
    </div>
  </div>

  <!-- 右側固定定位導航 -->
  <div id="tool">
    <span class="iconfont">&#x35ba;</span>
    <div class="btn">
      <a href="#" class="c4 active">愛逛 好貨</a>
      <a href="#" class="c5">好店 直播</a>
      <a href="#" class="c6">品質 特色</a>
      <a href="#" class="c7">實惠 熱賣</a>
      <a href="#" class="c4">猜你 喜歡</a>
      <a href="#" class="item6">反饋</a>
      <a href="#" class="">暴恐 舉報</a>
    </div>
  </div>
</body>

</html>

reset.css代碼

body,p,h1,h2,h3,h4{
  margin: 0;
}
ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
img{
  border: none;
  vertical-align: middle;
}
a{
  text-decoration: none;
  color: #3c3c3c;
}
i{
  font-style: normal;
}
input,button{
  margin: 0;
  padding: 0;
}
button{
  outline: none;
}
table{
  border-collapse: collapse;    /* 邊框模式，合併的模式 */
}
th,td{
  padding: 0;
}

body{
  font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
  
  /* font-family: '宋體';
  font-family: '\5b8b\4f53';
  font-family: SimSun;

  font-family: '微軟雅黑';
  font-family: Miscrosoft YaHei; */

  color: #3c3c3c;
  background-color: #f4f4f4;
}

.clearfix:after{
  content: '';
  display: block;
  clear: both;
}
.fl{
  float: left;
}
.fr{
  float: right;
}

.layer{
  width: 1190px;
  margin: 0 auto;
}

.c4{
  color: #f40;
}
.c5{
  color: #f50;
}
.c6{
  color: #8d7afb;
}
.c7{
  color: #a8c001;
}
.mr5{
  margin-right: 5px;
}
.mr7{
  margin-right: 7px;
}
.mt10{
  margin-top: 10px;
}
.mr10{
  margin-right: 10px;
}

index.css代碼

/* 
  @規則
    @charset    設置樣式表的編碼
    @import     導入其他樣式文件
    @meida      媒體查詢
    @font-face  自定義字體
*/

@import 'reset.css';

@font-face {
  font-family: 'iconfont';
  src: url('../font/iconfont.eot');
  src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),
      url('../font/iconfont.woff2') format('woff2'),
      url('../font/iconfont.woff') format('woff'),
      url('../font/iconfont.ttf') format('truetype'),
      url('../font/iconfont.svg#iconfont') format('svg');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 頭部信息 */
#headMessage li{
  float: left;
  line-height: 35px;
  padding: 0 6px;
  font-size: 0;
}
#headMessage a{
  color: #6c6c6c;
  font-size: 12px;
}
#headMessage a.login{
  color: #f22e00;
}
#headMessage span{
  font-size: 12px;
}
#headMessage span.arrow{
  margin-left: 7px;
}
#headMessage li strong{
  font-size: 12px;
  color: #f22e00;
}
#headMessage li span.store{
  color: #9c9c9c;
}
#headMessage li.line{
  font-size: 12px;
  color: #ddd;
  padding: 0 5px;
}
#headMessage li:hover a{
  color: #f40;
}
#headMessage li:hover span.store{
  color: #f40;
}


/* 頭部廣告 */
#headAd{
  background-color: #f12f04;
}
#headAd .go{
  display: block;
  padding: 10px 10px 10px 15px;
}
#headAd .go img{
  height: 80px;
  width: 80px;
}
#headAd ul{
  padding-top: 13px;
}
#headAd li{
  float: left;
  width: 209px;
  height: 75px;
  margin-right: 10px;

  padding: 12px 15px 0 15px;
  box-sizing: border-box;

  /* 
    盒模型
      1.標準盒模型
        總寬度 = border（左右） + width + padding（左右）;
        總高度 = border（上下） + height + padding（上下）;
      2.IE盒模型（怪異盒模型）
        總寬度 = width;
        總高度 = height;
  */

}
#headAd h3{
  font-size: 20px;
  line-height: 28px;
}
#headAd p{
  font-size: 14px;
  line-height: 20px;
}
#headAd a{
  color: #fff;
  display: block;
}
#headAd li a img{
  width: 52px;
  height: 52px;
  border-radius: 5px;
}

#headAd .item1{
  background: url(../images/adbg_01.png) no-repeat;
}
#headAd .item2{
  background: url(../images/adbg_02.png) no-repeat;
}
#headAd .item3{
  background: url(../images/adbg_03.png) no-repeat;
}
#headAd .item4{
  background: url(../images/adbg_04.png) no-repeat;
}
#headAd .item5{
  background: url(../images/adbg_05.png) no-repeat;
  margin-right: 0;
}


/* 頭部搜索 */
#headSearch{
  height: 100px;
  background-color: #fff;
  padding: 24px 0 10px;
  position: relative;
}
#headSearch h1 a{
  display: block;
  width: 190px;
  height: 121px;
  background: url(../images/logo.gif) no-repeat;
  text-indent: -9999px;
  overflow: hidden;
  position: absolute;
  top: 0;
}
#headSearch .code{
  width: 72px;
  height: 86px;
  border: 1px solid #eee;
  position: relative;
  margin-right: 110px;;
}
#headSearch .code img{
  width: 72px;
  height: 72px;
}
#headSearch .close{
  position: absolute;
  left: -16px;
  top: -1px;

  width: 14px;
  height: 14px;
  line-height: 14px;
  font-size: 14px;
  border: 1px solid #eee;
  columns: #ddd;
  cursor: pointer;
}
#headSearch .search{
  width: 630px;
  margin: 0 auto;
}
#headSearch .searchTab{
  height: 22px;
  padding-left: 17px;
}
#headSearch .searchTab li{
  float: left;
  width: 36px;
  line-height: 22px;
  margin-right: 4px;
  text-align: center;
  color: #f40;
  cursor: pointer;
}
#headSearch .searchTab li:hover{
  background-color: #ffeee5;
}
#headSearch .searchTab li.active{
  background: pink;
  color: #fff;
  font-weight: bold;

  background-image: linear-gradient(to right, #ff9000, #ff5000);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradienType=1);
  border-radius: 6px 6px 0 0;
}
#headSearch .searchContent{
  height: 40px;
}
#headSearch .searchBox{
  width: 554px;
  height: 40px;
  box-sizing: border-box;
  border: 2px solid #ff5000;
  border-right: none;
  border-radius: 20px 0 0 20px;
  overflow: hidden;
  position: relative;
}
#headSearch .searchBox input{
  width: 490px;
  height: 36px;
  line-height: 36px;
  outline: none;
  border: none;
  text-indent: 10px;

  position: absolute;
  z-index: 2;
  background-color: transparent;
}
#headSearch .searchBox input:focus{
  background-color: #fff;
}
#headSearch .placeholder{
  position: absolute;
  top: 6px;
  left: 14px;
}
#headSearch .placeholder span{
  color: #9c9c9c;
  vertical-align: 1px;
}
#headSearch .imgSearch{
  font-size: 28px;
  color: #9c9c9c;
  position: absolute;
  right: 20px;
  top: -2px;
  cursor: pointer;
}
#headSearch .searchContent button{
  width: 74px;
  height: 40px;
  text-align: center;
  font-size: 18px;
  line-height: 40px;
  color: #fff;
  border: none;
  border-radius: 0 20px 20px 0;
  background-image: linear-gradient(to right, #ff9000, #ff5000);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradienType=1);
}
#headSearch .hotkey{
  height: 25px;
  line-height: 25px;;
}
#headSearch .hotkey a:hover{
  color: #f50;
}


/* 導航 */
#nav h2{
  width: 190px;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  color: #fff;
  text-align: center;
  background-color: #f50;
}
#nav ul{
  margin-left: 190px;
  height: 30px;
  /* width: 1000px; */
  /* width: calc(100% - 190px);    支持情況：IE9+ */
  background-image: linear-gradient(to right, #ff9000, #ff5000);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradienType=1);
}
#nav ul li{
  float: left;
  line-height: 30px;
  margin: 0 7px;
  font-size: 14px;
  color: #fff;
  padding: 0 5px;

  position: relative;
}
#nav ul li.size{
  font-size: 16px;
}
#nav ul li a{
  color: #fff;
  font-weight: bold;
}
#nav ul li.line{
  margin: 0;
  padding: 0;
}
#nav ul li:hover:before{
  content: '';
  position: absolute;
  width: 23px;
  height: 13px;
  background-image: url(../images/ico_01.png);

  top: -13px;
  left: 50%;
  margin-left: -12px;
}


/* 首屏內容 */
.firstLeft{
  width: 890px;
}

/* 側邊導航 */
.firstLeft .sideNav{
  width: 190px;
  height:522px;
  background: #fff;
  border: 1px solid #ff5000;
  box-sizing: border-box;
  border-top: none;
  padding-top: 5px;
}
.firstLeft .sideNav li{
  height: 32px;
  line-height: 32px;
  padding-left: 25px;
  color: #999;
  font-size: 14px;

  transition: background-color 0.3s;
}
.firstLeft .sideNav li a{
  font-size: 14px;
  color: #666;
}
.firstLeft .sideNav li span{
  font-size: 12px;
  margin-right: 5px;
}
.firstLeft .sideNav li:hover{
  background: #ffe4dc;
  color: #f50;
}
.firstLeft .sideNav li:hover a{
  color: #f50;
}
.firstLeft .sideNav a:hover{
  text-decoration: underline;
}

/* 圖片1容器 */
.firstLeft .img1Box{
  width: 690px;
  height: 282px;
  margin-top: 10px;
}
.firstLeft .pic{
  width: 520px;
  position: relative;
}
.firstLeft .pic button{
  width: 20px;
  height: 30px;
  line-height: 30px;
  color: #fff;
  cursor: pointer;
  border: none;
  background-color: rgba(0, 0, 0, 0.3);      /* 支持情況：IE9+ */

  background-color: #000\9;     /* IE9以下的瀏覽器 */
  filter: alpha(opacity = 30);  /* IE濾鏡：透明 */

  position: absolute;
  top: 50%;
  margin-top: -15px;

  display: none;
}
.firstLeft .pic button.leftBtn{
  border-radius: 0 15px 15px 0;
}
.firstLeft .pic button.rightBtn{
  right: 0;
  border-radius: 15px 0 0 15px;
}
.firstLeft .pic:hover button{
  display: block;
}
.firstLeft .pic .circle{
  position: absolute;
  bottom: 15px;
  left: 50%;
  margin-left: -35px;
  border-radius: 10px;
  padding: 3px 0;
  font-size: 0;

  background-color: rgba(255, 255, 255, 0.3);
}
.firstLeft .pic .circle span{
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #fff;
  margin: 0 3px;
  cursor: pointer;
}
.firstLeft .pic .circle span.active{
  background-color: #ff5000;
}
.firstLeft .ad{
  width: 160px;
}
.firstLeft .ad img{
  width: 160px;
}

/* 圖片2容器 */
.firstLeft .img2Box{
  width: 690px;
  height: 220px;
  margin-top: 10px;
}
.firstLeft .img2Box .picTitle{
  height: 20px;
}
.firstLeft .img2Box .picTitle .text{
  height: 17px;
  line-height: q7px;
}
.firstLeft .img2Box .picTitle .text .bg{
  background: url(../images/title_bg.png) no-repeat left;
  padding-left: 136px;
  color: #666;
}
.firstLeft .img2Box .picTitle .text i{
  color: #ff1648;
}
.firstLeft .img2Box .picTitle .line{
  height: 3px;
  background-color: #ff1648;
  position: relative;
}
.firstLeft .img2Box .picTitle .line span{
  width: 87px;
  height: 3px;
  background-color: #000;
  position: absolute;
  left: 0;
}
.firstLeft .img2Box .img{
  width: 520px;
  height: 200px;
  background-color: #fff;
  position: relative;

  /* display: table-cell;
  vertical-align: middle; */

  /* display: flex;
  justify-content: space-around;
  align-items: center; */
}
.firstLeft .img2Box .img img{
  margin: 0 4px;
}
.firstLeft .img2Box .ad .title{
  height: 20px;
  line-height: 20px;
}

/* 淘寶頭條 */
.firstLeft .news{
  width: 890px;
  height: 100px;
  background: #fff;
  margin-top: 10px;
  box-sizing: border-box;
  padding: 13px 13px 13px 20px;
}
.firstLeft .news .hd{
  margin-top: 15px;
}
.firstLeft .news .hd h3{
  width: 129px;
  height: 26px;
  background: url(../images/news_logo.png) no-repeat;
  text-indent: -9999px;
  overflow: hidden;
}
.firstLeft .news .hd p{
  color: #999;
  line-height: 24px;
}
.firstLeft .news .newList{
  width: 680px;
  position: relative;
}
.firstLeft .news .newList .img{
  margin-right: 15px;
}
.firstLeft .news .newList .img img{
  width: 130px;
  height: 73px;
}
.firstLeft .news .newList h4{
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  font-weight: normal;
}
.firstLeft .news .newList h4 a{
  color: #333;
}
.firstLeft .news .newList:hover h4 a,
.firstLeft .news .newList .more:hover{
  color: #ff5000;
}
.firstLeft .news .newList p{
  height: 36px;
  line-height: 18px;
  font-size: 14px;
  font-weight: normal;
  overflow: hidden;
}
.firstLeft .news .newList p a{
  color: #999;
}
.firstLeft .news .newList .more{
  position: absolute;
  top: 0;
  right: 0;
  color: #999;
}

/* 右邊的內容 */
.firstRight{
  width: 290px;
  margin-top: 10px;
}
/* 用戶 */
.firstRight .user{
  height: 140px;
  padding-top: 5px;
  background-image: url(../images/user_bg.png);
}
.firstRight .user .avatar{
  display: block;
  width: 50px;
  height: 50px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
}
.firstRight .user .avatar img{
  width: 50px;
  height: 50px;
}
.firstRight .user .username{
  text-align: center;
  line-height: 16px;
}
.firstRight .user .members{
  text-align: center;
  font-size: 0;
}
.firstRight .user .members a{
  display: inline-block;
  font-size: 12px;
  border-radius: 9px;
  padding: 0 10px 0 20px;
  margin: 0 2px;
  /* background-color: #ffe4dc; */
}
.firstRight .user .members a.gold{
  background: #ffe4dc url(../images/ico.png) 0 -572px no-repeat;
}
.firstRight .user .members a.club{
  background: #ffe4dc url(../images/ico.png) 0 -528px no-repeat;
}
.firstRight .user .btn{
  text-align: center;
}
.firstRight .user .btn button{
  width: 75px;
  height: 25px;
  line-height: 25px;
  margin: 12px 2px 0 2px;
  color: #fff;
  font-weight: bold;
  border-radius: 4px;
  border: none;
  background-image: linear-gradient(to right, #ff9000, #ff5000);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradienType=1);
}
.firstRight .user .btn button.login{
  width: 92px;
}

/* 舉報 */
.firstRight .tipOff{
  display: block;
  height: 26px;
  line-height: 26px;
  color: #f40;
  background: #ffe4dc;
  text-align: center;
}
.firstRight .tipOff i{
  font-size: 12px;
  vertical-align: 1px;
  position: relative;
  left: 30px;
}

/* 公告區 */
.firstRight .notice{
  height: 108px;
  background-color: #fff;
}
.firstRight .notice .title{
  text-align: center;
  font-size: 0;
  padding-top: 10px;
}
.firstRight .notice .title li{
  display: inline-block;
  font-size: 12px;
  line-height: 20px;
  padding: 0 4px;
  margin: 0 10px;
}
.firstRight .notice .title li.active{
  font-weight: bold;
  border-bottom: 2px solid #f40;
}
.firstRight .notice .title li a:hover{
  color: #f40;
}
.firstRight .notice .content{
  margin: 0 12px;
  padding-top: 10px;
}
.firstRight .notice .content li{
  height: 25px;
  line-height: 25px;
  overflow: hidden;
  float: left;
  width: 130px;
}
.firstRight .notice .content li a:hover,
.firstRight .notice .content li.item1 a{
  color: #ff5000;
}
.firstRight .notice .content li.item1{
  width: 100%;
}
/* 圖標區域 */
.firstRight .icon{
  width: 100%;
  height: 231px;
  background-color: #fff;
  table-layout: fixed;    /* 定義列寬的算法，計算方式爲根據表格寬度自動計算列寬，每列的寬度爲均分整個表格的寬度 */
}
.firstRight .icon td{
  border: 1px solid #f4f4f4;
  text-align: center;
}
.firstRight .icon td span{
  display: block;
  width: 24px;
  height: 24px;
  margin: 0 auto;
  background: url(../images/ico.png) no-repeat;
}
.firstRight .icon td i{
  line-height: 34px;
  color: #333;
}
.firstRight .icon .item1 span{
  background-position: 0 0;
}
.firstRight .icon .item2 span{
  background-position: 0 -87px;
}
.firstRight .icon .item3 span{
  background-position: 0 -44px;
}
.firstRight .icon .item4 span{
  background-position: 0 -132px;
}
.firstRight .icon .item5 span{
  background-position: 0 -176px;
}
.firstRight .icon .item6 span{
  background-position: 0 -220px;
}
.firstRight .icon .item7 span{
  background-position: 0 -264px;
}
.firstRight .icon .item8 span{
  background-position: 0 -308px;
}
.firstRight .icon .item9 span{
  background-position: 0 -352px;
}
.firstRight .icon .item10 span{
  background-position: 0 -396px;
}
.firstRight .icon .item11 span{
  background-position: 0 -440px;
}
.firstRight .icon .item12 span{
  background-position: 0 -484px;
}
/* APP */
.firstRight .app{
  height: 111px;
  background: #fff;
}
.firstRight .app .title{
  height: 30px;
  line-height: 30px;
}
.firstRight .app h3{
  font-size: 14px;
  padding-left: 14px;
}
.firstRight .app a{
  margin-right: 10px;
}
.firstRight .app a:hover{
  color: #f40;
}
.firstRight .app .appIcon{
  text-align: center;
  font-size: 0;
}
.firstRight .app .appIcon li{
  width: 32px;
  height: 32px;
  display: inline-block;
  margin: 0 10px 8px 10px;
}
.firstRight .app .appIcon li img{
  width: 32px;
  height: 32px;
}

/* 有好貨與愛逛街 */
/* 有好貨 */
.goods{
  width: 590px;
  height: 658px;
  background-color: #fff;

  overflow: hidden;
}
.goods .head{
  height: 24px;
  line-height: 24px;
  margin: 20px 0;
  padding: 0 20px;
}
.goods .head h3{
  font-size: 0;
  font-weight: normal;
}
.goods .head h3 img{
  height: 24px;
}
.goods .head h3 span{
  vertical-align: middle;
  color: #ccc;
  font-size: 20px;
  margin: 0 5px;
}
.goods .head h3 i{
  font-size: 12px;
  vertical-align: middle;
  color: #999;
}
.goods .head .change{
  color: #999;
}
.goods .list{
  font-size: 0;
  text-align: center;
}
.goods .list li{
  width: 180px;
  display: inline-block;
  text-align: left;
  margin: 0 2px 35px 2px;
}
.goods .list li img{
  width: 180px;
  height: 180px;
}
.goods .list li h4{
  font-size: 16px;
  height: 28px;
  line-height: 28px;
  font-weight: normal;
}
.goods .list li:hover h4 a,
.shopping .list li:hover p a{
  color: #f40;
}
.goods .list li .text{
  height: 24px;
  line-height: 24px;
  font-size: 14px;
  overflow: hidden;
}
.goods .list li .text a{
  color: #999;
}
.goods .list li .comment{
  display: block;
  height: 22px;
  line-height: 22px;
  font-size: 12px;
  color: #35b1ff;
  margin-top: 12px;
}
.goods .list li .comment span{
  font-size: 14px;
  margin-right: 4px;
}
/* 愛逛街 */
.shopping .head h3 i{
  margin-left: 10px;
}
.shopping .list li .text{
  height: 44px;
  line-height: 22px;
  font-size: 14px;
  overflow: hidden;
  margin-top: 11px;
}
.shopping .list li .text span{
  font-size: 14px;
  color: #ebebeb;
  position: relative;
  top: -5px;
}
.shopping .list li .text a:hover{
  color: #f40;
}
.shopping .list li .comment{
  color: #999;
}
.shopping .list li .comment img{
  width: 22px;
  height: 22px;
  border-radius: 50%;
}


/* 右側固定定位導航欄 */
#tool{
  width: 50px;
  height: 350px;

  position: fixed;
  top: 100px;
  right: 7%;
  /* border: 1px solid #f00; */
}
#tool span{
  font-size: 50px;
  font-weight: bold;
  color: #ff7f13;
  width: 50px;
  height: 36px;
  line-height: 36px;
  text-align: center;

  position: absolute;
  top: -25px;
}
#tool div{
  height: 350px;
  border-radius: 8px;
  overflow: hidden;
}
#tool a{
  display: block;
  width: 50px;
  height: 50px;
  text-align: center;
  background-color: #fff;
  word-break: keep-all;

  padding-top: 6px;
  box-sizing: border-box;
  position: relative;
}
#tool a:after{
  content: '';
  border-bottom: 1px solid #efefef;
  width: 34px;
  position: absolute;
  left: 8px;
  bottom: 0;
}
#tool .item6{
  line-height: 40px;
}
#tool a:hover,
#tool a.active{
  background-image: linear-gradient(135deg, #ff9000, #ff5000);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradienType=1);
  color: #fff;
  font-weight: bold;
  transition: color 0.3s;
}
#tool a:hover:after,
#tool a.active:after{
  border: none;
}

html+css仿淘寶首頁靜態頁面練習

vue-bus 切換頁面後第一次觸發事件接收不到

CentOS7 修改 MySQL 字符集

nuxt引用組件報錯：This relative module was not found:* ./xxx.vue

阿里雲Code（code.aliyun）提交代碼時報錯fatal: Authentication failed for'https://code.aliyun.com/...'身份驗證失敗

Vue+Element 計算器2

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結