実戦プロジェクトは小米商城のホームページのフレームワークを模倣します

137178 ワード

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>     -   MIX 3、  Note 78</title>
    <link rel="icon" href="images/favicon.ico"/>
    <link rel="stylesheet" href="css/reset.css"/>
    <link rel="stylesheet" href="css/xiaomiStyle.css"/>
    <link rel="stylesheet" href="css/iconfont.css"/>
</head>
<body>
  <!--       -->
  <div  class="black_nav">
    <div  class="wrap">
        <ul  class="left_ul">
            <li><a href="#">    </a><span></span>|</li>
            <li><a href="#">MIUI</a><span></span>|</li>
            <li><a href="#">IoT</a><span></span>|</li>
            <li><a href="#">   </a><span></span>|</li>
            <li><a href="#">  </a><span></span>|</li>
            <li><a href="#">  </a><span></span>|</li>
            <li><a href="#">      </a><span></span>|</li>
            <li><a href="#">    </a><span></span>|</li>
            <li><a href="#">    </a><span></span>|</li>
            <li><a href="#">    </a><span></span>|</li>
            <li><a href="#">  app</a><span></span>|</li>
            <li><a href="#">Select Region</a><span></span>|</li>
        </ul>
        <ul  class="right_ul">
            <li><a href="#">  </a><span>|</span></li>
            <li><a href="#">  </a><span>|</span></li>
            <li><a href="#">    </a></li>
            <li  class="cart">
                <a href="#"><i class="iconfont">&#xe622;</i>   (0)</a>
                <div  class="hidden_cart">         ,     !</div>
            </li>
        </ul>
    </div>
  </div>
  <!--       -->
  <!--       -->
  <div  class="white_nav">
      <div  class="wrap">
          <img src="images/logo-footer.png" alt=""  class="logo"/>
          <ul  class="mi_nav">
              <li>
                  <a href="#">    </a>
                  <div class="mi_nav_hidden"></div>
              </li>
              <li><a href="#">  </a> <div class="mi_nav_hidden"></div></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><a href="#">    </a></li>
              <li><a href="#">  </a></li>
              <li><a href="#">  </a></li>
              <li class="search">
                  <input type="text"/>
                  <button  class="iconfont">&#xe6e4;</button>
              </li>
          </ul>
      </div>
  </div>
  <!--       -->
 <!--         -->
  <div  class="wrap carousel">
    <div  class="hdm">
        <ul>
            <li>
                <a href="#">      </a><i class="iconfont">&#xe770;</i>
                <div  class="hdm_hidden"></div>
            </li>
            <li>
                <a href="#">     </a><i class="iconfont">&#xe770;</i>
                <div  class="hdm_hidden"></div>
            </li>
            <li><a href="#">      </a><i class="iconfont">&#xe770;</i></li>
            <li><a href="#">      </a><i class="iconfont">&#xe770;</i></li>
            <li><a href="#">      </a><i class="iconfont">&#xe770;</i></li>
            <li><a href="#">      </a><i class="iconfont">&#xe770;</i></li>
            <li><a href="#">      </a><i class="iconfont">&#xe770;</i></li>
            <li><a href="#">      </a><i class="iconfont">&#xe770;</i></li>
            <li><a href="#">      </a><i class="iconfont">&#xe770;</i></li>
            <li><a href="#">      </a><i class="iconfont">&#xe770;</i></li>
        </ul>
    </div>
      <div  class="prev"></div>
      <div  class="next"></div>
  </div>
 <!--         ->
 <!--        -->
  <div class="wrap ad">
      <ul>
          <li class="before"><i class="iconfont">&#xe622;</i><br/>    </li>
          <li class="before"><i class="iconfont">&#xe622;</i><br/>    </li>
          <li class="before"><i class="iconfont">&#xe622;</i><br/>    </li>
          <li><i class="iconfont">&#xe622;</i><br/>    </li>
          <li><i class="iconfont">&#xe622;</i><br/>    </li>
          <li><i class="iconfont">&#xe622;</i><br/>    </li>
      </ul>
      <img src="images/xmad_15500580021576_iymFx.jpg" alt=""/>
      <img src="images/xmad_15410029988871_TdzPQ.jpg" alt=""/>
      <img src="images/xmad_1550022313197_PMtDb.jpg" alt=""/>
  </div>
 <!--        -->
<!--      -->
  <div  class="wrap sg">
      <div>
          <h2>    </h2>
          <div  class="sg_arrow">
              <span>&lt;</span>
              <span>&gt;</span>
          </div>
      </div>
      <div  class="sg_box">
          <div><img src="images/sj.png" alt=""/> </div>
          <div  class="sg_item">
              <img src="images/pms_1538031692.35815325!220x220.jpg" alt=""/>
              <h4>            </h4>
              <p>      </p>
              <span>259 <s>296 </s></span>
          </div>
          <div  class="sg_item"><img src="images/pms_1538031692.35815325!220x220.jpg" alt=""/>
              <h4>            </h4>
              <p>      </p>
              <span>259 <s>296 </s></span></div>
          <div  class="sg_item"><img src="images/pms_1538031692.35815325!220x220.jpg" alt=""/>
              <h4>            </h4>
              <p>      </p>
              <span>259 <s>296 </s></span></div>
          <div  class="sg_item"><img src="images/pms_1538031692.35815325!220x220.jpg" alt=""/>
              <h4>            </h4>
              <p>      </p>
              <span>259 <s>296 </s></span></div>
      </div>
      <img src="images/xmad_15500232485691_uYPkv.jpg" alt=""  class="ad_img"/>
  </div>
<!--      -->
<!--    -->
  <div  class="phone_container">
    <div  class="wrap">
        <div class="phone_box">
            <h2>   <a href="#">     <i  class="iconfont">&#xe770;</i></a></h2>
        </div>
        <div class="phone_item">
            <div class="item_left"><img src="images/xmad_1544580545953_UvEXK.jpg" alt=""/></div>
            <div class="item_right">
                <div>
                        <b>  </b>
                        <img src="images/pms_1545457703.71734471!220x220.png" alt=""/>
                        <h4>            </h4>
                        <p>      </p>
                        <span>259 <s>296 </s></span>
                </div>
                <div> <b>  </b>
                        <img src="images/pms_1545457703.71734471!220x220.png" alt=""/>
                        <h4>            </h4>
                        <p>      </p>
                        <span>259 <s>296 </s></span></div>
                <div> <b>  </b>
                        <img src="images/pms_1545457703.71734471!220x220.png" alt=""/>
                        <h4>            </h4>
                        <p>      </p>
                        <span>259 <s>296 </s></span></div>
                <div> <b>  </b>
                        <img src="images/pms_1545457703.71734471!220x220.png" alt=""/>
                        <h4>            </h4>
                        <p>      </p>
                        <span>259 <s>296 </s></span></div>
                <div> <b>  </b>
                        <img src="images/pms_1545457703.71734471!220x220.png" alt=""/>
                        <h4>            </h4>
                        <p>      </p>
                        <span>259 <s>296 </s></span></div>
                <div> <b>  </b>
                        <img src="images/pms_1545457703.71734471!220x220.png" alt=""/>
                        <h4>            </h4>
                        <p>      </p>
                        <span>259 <s>296 </s></span></div>
                <div> <b>  </b>
                        <img src="images/pms_1545457703.71734471!220x220.png" alt=""/>
                        <h4>            </h4>
                        <p>      </p>
                        <span>259 <s>296 </s></span></div>
                <div> <b>  </b>
                        <img src="images/pms_1545457703.71734471!220x220.png" alt=""/>
                        <h4>            </h4>
                        <p>      </p>
                        <span>259 <s>296 </s></span></div>
            </div>
        </div>
        <img src="images/xmad_15486596829568_opVwS.jpg" alt=""  class="ad_img"/>
    </div>
  </div>
<!--    -->
</body>
</html>

CSSスタイルシートreset
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, legend, input, textarea, button, p, blockquote, th, td{margin: 0;padding: 0;}
body {padding:0;margin:0;text-align:center;color:#333;font-size:14px;font-family:"  ", arial;}
li{list-style-type:none;}
a{text-decoration: none;}
img,input{border:none;vertical-align:middle;}

iconfont
@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1550044414267'); /* IE9 */
  src: url('iconfont.eot?t=1550044414267#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAW0AAsAAAAACmAAAAVoAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHgqHeIZqATYCJAMUCwwABCAFhG0HYRv7CBEVpPGR/RxwN4PLn5OikqJl24I+W5mhkR5JmZm5g+f/136/zz13hHmIN7XoSVQbnkS7WaQ0CAlCYpHEo3wL9c8QnnaDks1JR7Ed1A5iOuihgXrIwQvY2hT9hxERiiWxXX56Rn6s0JDvEFo2AA6OmS6aNrA82mwuFbfIxtLNBjjBAUW01Rf+2/M/2aP+Up7FhKNS4bf5MAQISKcUafTwCwM+FqSXvGw5PZUFfM+OreEIvskFFlqRC8CDbw45L1BxLn9f/jAIPxgcBU3snXVPArVfRf9Dxf5jxHACUI7nBXbLQIFSwIJMg/5RVOtKJQYQ2nqdux8lmK+1ZxX/Q0o7rFO+Rx3jn+eCMDqn1hYsfK1RMRS+dkSwxMm2F0Tide4HmBKd/YIAiAdpB8gNQObcMf9Kg+IliBlwm2lxyPDKCwoGUYmKiRt2zgxg/dPrbbtmB9lDc7tZwWbxGyZ6upGw/j2Q8JDIBoBNawi3zaan0BgkA2qb7O3lYM+pw/UeVLqDVMln59CzKzcQiIHhnSHoiAZ1zrLn4A2oJNVSOYNN6tpAL0bvGEXWN0tbJDnYyWuTMfwKDrWd09GbPnJEax6Xm5djDBkuUa5zx4/rOi7Wf9x1agNxlSiPh6BhBhQWJgi6hiLaO+BE1oYuyajwcHZnXmKCEJNVONnXRRkcwpH1XtkhMgzHETIFJQg6QYVTZBJOMigldb04HgWx20e0s47HybDxBU7TnJrBpsPbOzv7ujo6uhOH7MhBPSJt7VgHTD0gvHPULhxB2rsBNoNKdmEfQV/xpbso3DEl26q7X5qEfvcjzUc9BloKPbKmW/4Qh4R9z8OI5aD5mR72yB92l/tH+tZ+d2/UyssIRfMa6yAOy9LIqt6ogeE/8VSpGn+RgJOeELqPmYpuvKrtJKlgz+iMwjhU99AAmQOVMcPupaVuQ3uIVEjNhjFCvL08D1tUSsW580Gkvc6SybKq21FYmMxc254fFM+0rOuQc00TEm8WE+Qf8UHjzKM73VZzj46iT4qPkq4q3r4iwWyEOnSDPlp+TeN6PWNlmcSKen5EFdxX6yh6p/oo0HNtqpoEqmpjg3gzd+r4Fj2gpT8Q3yOAZ990uzqdr06ENovO8iWUmtOHWpxM+ZQOBpj/VjTaCX1IsQVf5Z2mIeIu1x7VqybryFRrWLoy5VN0NvdqWQULpymjjXfTSnmq+P9PFalayXGxBUFlXEOJnEGcgUNZZbxl3MMMfQfO4OGyLs1cVLk5gmP5s7tqrUIgw2ZbP8HCNQ6HbKM07rgv5stVK/35VGVUfR+67XPpTpPsJHwv9R4cDAlNesFvPYNpL95jdWuPhUTdPqyMjH2rkDN0p/M6adjoKDiLHrFVA/mX9f2gDAh/hjP6Vt3yLKZHtFLyGvSBuVEc1x9m+Zs7iP/ftYXxInZf+eFPc+r58O2/Qtbfh1nQz4n/XgYEvqcJyx3+P51NQDnHAjUKqaKKFgKHbbysAQKcghCgcCKf4xhTWiv/BsYUCwaPNFB8comWWgoOEcrAxacGAkpoWR4hiRUUsVFAMbsZCPFcgSGWW1DiuSNa6gc4pPIPXOKFCwKGRWLDCPkicerAOAmuMP/ALZQ1cYlS5Vc0JU7sqiX3iby7FPRNF5YumJHHmLK/zSCiQTMlOGfHYYwEG5PHRRorso1tq6EnNQulSnFgnARXmH/gFsqatxYV/fwVTYkT19S9SD6Rd9c+9E3XgnjB3KruWrrvbzOI6HKYZkpwzr0YcZ5gg/t5XKSxPbLb2BbNdFts5jemx1j5e2mILnLEiIoVR1zqOSqfslgMlE0tyHp9S/6gm0m9XnG1d1Ouvy5HgQayVRU=') format('woff2'),
  url('iconfont.woff?t=1550044414267') format('woff'),
  url('iconfont.ttf?t=1550044414267') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1550044414267#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-gouwuchekong:before {
  content: "\f0179";
}

.icon-tengxunweibo:before {
  content: "\f01b0";
}

.icon-qqkongjian:before {
  content: "\e674";
}

.icon-xinlangweibo:before {
  content: "\e67a";
}



xiaomiStyle
/*       */
.black_nav{
    width: 100%;
   height: 40px;
    line-height: 40px;
    background-color: #333;
     color:  #424242;
}
.wrap{
    width: 1226px;
    margin: 0 auto;
}
.left_ul,.left_ul>li,.right_ul>li{
    float: left;
}
.left_ul a,.right_ul a{
    color: #b0b0b0;
    font-size: 12px;
    margin: 0 5px;
}
.left_ul a:hover,.right_ul a:hover{
    color: #fff;
}
.right_ul{
    float: right;
}
.cart i{
    margin-right: 5px;
}
.cart{
    width: 120px;
    height: 40px;
    background-color: #424242;
    position: relative;
}
.cart:hover{
    background-color: #fff;
}
.cart:hover a{
   color:orange;
}
.hidden_cart{
    width: 320px;
    height: 0;
    background-color: #fff;
    position: absolute;
    right: 0;
    top:40px;
    overflow: hidden;
    transition: all .5s;
    z-index: 88;
    /*line-height: 100px;*/
}
.cart:hover .hidden_cart{
    height: 100px;
    line-height: 100px;
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
/*       */
/*       */
.white_nav{
    clear: both;
    width: 100%;
    height: 100px;
    line-height: 100px;
    position:relative;
}
.logo,.mi_nav{
    float: left;
}
.mi_nav>li{
    float: left;
}
.logo{
    margin-top: 21.5px;
    margin-right: 190px;
}
.mi_nav>li>a{
    color: #757575;
    font-size: 16px;
    margin-right: 20px;
}
.mi_nav>li>a:hover{
    color: #ff6700;
}
.mi_nav{
    width: 980px;
}
.mi_nav>.search{
    float: right;
}
.search>input{
    width: 243px;
    height: 48px;
    border: 1px solid #e0e0e0;
    float: left;
    border-right: none;
    outline: none;
    transition: all .3s;
}
.search{
    margin-top: 25px;
}
.search>button{
    width: 50px;
    height: 50px;
    border: 1px solid #e0e0e0;
    float: left;
    background-color: #fff;
    font-weight: bold;
    outline: none;
    font-size: 20px;
    transition: all .3s;
}
.search>button:hover{
    background-color: #ff6700;
    color: #fff;
    border-color:  #ff6700;
}
.search>input:focus,.search>input:focus+button{
    border-color:  #ff6700;
}
.mi_nav_hidden{
    width: 100%;
    height: 230px;
    background-color: red;
    position: absolute;
    left: 0;
    top: 100px;
    display: none;
}
.mi_nav>li:hover>.mi_nav_hidden{
    display: block;
}
/*       */
/*         */
.carousel{
    width: 1226px;
    height: 460px;
    background: url("../images/xmad_15481253648514_fHtzd.jpg");
    background-size: cover;
    -webkit-animation:carousel 10s infinite ;
    position: relative;
}
@-webkit-keyframes carousel {
    0%{
        background-image: url("../images/xmad_15481253648514_fHtzd.jpg");
    } 25%{
        background-image: url("../images/xmad_15486597522208_HOEjJ.jpg");
    } 50%{
        background-image: url("../images/xmad_15489036241498_XVwut.jpg");
    } 75%{
        background-image: url("../images/xmad_15500560064953_Bgumq.jpg");
    }100%{
        background-image: url("../images/xmad_15488151829917_hENZU.jpg");
    }
}
.hdm{
    width: 234px;
    height: 460px;
    background-color: rgba(0,0,0,.5);
    padding: 20px 0;
    box-sizing: border-box;
    position: relative;
}
.hdm li{
    height: 42px;
    line-height: 42px;
    text-align: left;
    padding-left: 30px;
}
.hdm li a{
    color: #fff;
}
.hdm li:hover{
    background-color: #ff6700;
}
.hdm i{
    float: right;
    margin-right: 30px;
    color: rgba(255,255,255,.5);
    font-weight: bold;
    font-size: 20px;
}
.hdm_hidden{
    width: 992px;
    height: 460px;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 234px;
    box-shadow: 5px 5px 10px rgba(0,0,0,.2);
    display: none;
    z-index: 66;
}
.hdm li:hover>.hdm_hidden{
    display: block;
}
.prev,.next{
    width: 41px;
    height: 69px;
    background: url("../images/icon-slides.png");
    position: absolute;
    top:50%;
    margin-top: -34.5px;
    cursor: pointer;
}
.prev{
    left: 234px;
    background-position: -83px 0;
}
.next{
    right: 0;
    background-position: -124px 0;
}
.prev:hover{
    background-position: 0 0;
}
.next:hover{
    background-position: -42px 0;
}
/*         */
/*        */
.ad{
    margin-top: 15px;
    overflow: hidden;
}
.ad>ul,.ad>img{
    float: left;
}
.ad>img{
    width: 316px;
    height: 170px;
}
.ad>ul{
    width: 234px;
    height: 170px;
    background-color: #5f5750;;
}
.ad>ul>li{
 float: left;
    width: 70px;
    color: rgba(255,255,255,0.7);
    padding: 25px 0;
    font-size: 12px;
    border-right: 3px solid #665e57;
}
.ad>ul>li:nth-child(3),.ad>ul>li:nth-child(6){
    border-right:0;
}
.ad .before{
    border-bottom:3px solid #665e57;
}
.ad>img{
    margin-left: 14.6px;
}
/*        */
/*      */
.sg{
    margin-top: 40px;
}
.sg h2{
    text-align: left;
    float: left;
    font-weight: normal;
}
.sg_arrow{
    float: right;
}
.sg_arrow>span{
    width: 36px;
    height: 24px;
    border: 1px solid #e0e0e0;
    display: inline-block;
    line-height: 24px;
    float: left;
    font-weight: bold;
    color:#e0e0e0;
}
.sg_box{
    clear: both;
    padding-top: 20px;
}
.sg_box>div{
    width: 234px;
    height: 339px;
    background-color: #fafafa;
    float: left;
    margin-right: 14px;
}
.sg_box>div:last-child{
    margin-right: 0;
}
.sg_box>div:first-child{
    border-top:1px solid #e53935;
}
.sg_box>div:nth-child(2){
    border-top:1px solid #ffac13;
}
.sg_box>div:nth-child(3){
    border-top:1px solid #83c44e;
}.sg_box>div:nth-child(4){
    border-top:1px solid #2196f3;
}.sg_box>div:nth-child(5){
    border-top:1px solid #83c44e;
}
 .sg_item>img,.item_right img{
    width: 160px;
     margin: 30px 0 25px 0;
 }
.sg_item>h4,.item_right h4{
    font-weight: normal;
    margin-bottom: 10px;
}
.sg_item>p,.item_right p{
    font-size: 12px;
    color: #b0b0b0;
    margin-bottom: 20px;
}
.sg_item>span,.item_right span{
    color: #ff6700;
}
.sg_item>span>s,.item_right s{
    color: #b0b0b0;
    display: inline-block;
    margin-left: 10px;
}
.ad_img{
    width: 100%;
    margin: 40px 0;
}
/*      */
/*    */
.phone_container{
    width: 100%;
    background-color: #f5f5f5;
    padding-top: 40px;
    overflow: hidden;
}
.phone_box>h2{
    text-align: left;
    font-weight: normal;
}
.phone_box>h2>a{
    float: right;
    font-size: 16px;
    color: #333333;
}
.phone_box>h2>a:hover{
    color: #ff6700;
}
.phone_box>h2 i{
    font-size: 20px;
}
.item_left,.item_right{
    height: 614px;
    float: left;
}
.item_left{
    width: 234px;
    transition: all .5s;
}
.item_left>img{
    width: 100%;
}
.phone_item{
    margin-top: 20px;
}
.item_right{
    width: 992px;
}
.item_right>div{
    width: 234px;
    height: 300px;
    background-color: #fff;
    float: left;
    margin-left: 14px;
    margin-bottom: 14px;
    position:relative;
    transition: all .5s;
}
.item_right b{
    width: 64px;
    height: 20px;
    background-color: #83c44e;;
    display: inline-block;
    color: #fff;
    font-weight: normal;
    font-size: 12px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -32px;
}
.item_left:hover,.item_right>div:hover{
    transform: translate(0,-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,.2);
}
/*    */