小米简单页面

1.html

  <!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>小米商城</title>
  <link rel="icon" href="images/favicon.ico"/>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/iconfont.css">
  <link rel="stylesheet" href="css/mi.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="#">Select Region</a> </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">&#xf0179;</i>购物车(0) </a>
  <div class="hidden_cart">购物车中还没有商品，赶紧选购吧</div>
  </li>
  </ul>
  </div>
  </div>
  <div class="white_nav">
  <div class="Wap">
  <img src="images/logo-footer.png" alt="" class="logo">
  <img src="images/16366pclogoyuyue.gif" alt="" class="note5">
  <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">&#xe6dd</button>
  </li>
  </ul>
  </div>
  </div>
  <div class="WCL">
  <div class="HM">
  <ul>
  <li>
  <a href="#">手机 路由器</a><i class="iconfont"></i>
  <div class="HM_DD">1</div>
  </li>
  <li>
  <a href="#">手机 路由器</a><i class="iconfont"></i>
  <div class="HM_DD">2</div>
  </li>
  <li><a href="#">手机 路由器</a><i class="iconfont"> </li>
  <li><a href="#">手机 路由器</a><i class="iconfont"> </li>
  <li><a href="#">手机 路由器</a><i class="iconfont"> </li>
  <li><a href="#">手机 路由器</a><i class="iconfont"> </li>
  <li><a href="#">手机 路由器</a><i class="iconfont"> </li>
  <li><a href="#">手机 路由器</a><i class="iconfont"> </li>
  <li><a href="#">手机 路由器</a><i class="iconfont"></li>
  <li><a href="#">手机 路由器</a><i class="iconfont"></li>
  </ul>
  </div>
  <div class="prev"></div>
  <div class="next"></div>
  </div>
  <div class="wrap ad">
  <ul>
  <li class="befre"><i class="iconfont">&#xf0179;</i><br/>选购手机 </li>
  <li class="befre two"><i class="iconfont">&#xf0179;</i><br/> 选购手机</li>
  <li class="befre "><i class="iconfont">&#xf0179;</i><br/> 选购手机</li>
  <li><i class="iconfont">&#xf0179;</i><br/>选购手机</li>
  <li class="two"><i class="iconfont">&#xf0179;</i><br/>选购手机 </li>
  <li><i class="iconfont">&#xf0179;</i><br/>选购手机</li>
  </ul>
  <img src="images/xmad_15211176909037_rchsK.jpg" alt="">
  <img src="images/xmad_15206024681899_MksYR.jpg" alt="">
  <img src="images/xmad_15093727304372_CPkWS.jpg" alt="">
  </div>
  </body>
  </html>

 

 

 

2.css

.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: #ffffff;}
.right_ul{float: right;}
.cart i{margin-right: 5px;}
.cart{width: 120px;height:40px;background-color: #424242;position: relative;}
.cart:hover{background-color: #ffffff;}
.cart:hover a {color: #ff6700;}
.hidden_cart{
    width: 320px;
    height: 0;
    background-color: #fff;
    position: absolute;
    right: 0;
    top: 40px;
    font-size: 12px;
    overflow: hidden;
    transition: all .5s;
    z-index: 333;
}
.cart:hover .hidden_cart{
    height: 100px;
    line-height: 100px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
.white_nav{
    clear: both;
    width: 100%;
    height: 100px;
    line-height: 100px;
    position: relative;
}
.logo,.note5,.mi_nav{
    float: left;
}
.logo{
    margin-top: 21.5px; ;
}
.note5{
    margin-left: 20px;
    margin-top: 17px;
}
.mi_nav{width: 987px;}
.mi_nav>li{float: left;}
.mi_nav>li>a{font-size: 16px;color: #333333;margin-right: 20px;}
.mi_nav>li>a:hover{color: #ff6700;}
.mi_nav>.search{float: left;}
.search{margin-top: 25px;}
.search>input{width: 243px;height: 48px;border: 1px solid #e0e0e0;
float: left;outline: none;border: none;transition: all.3s;}
.search>input:focus,.search>input:focus+button{border-color: #ff6700;}
.search>button{width: 52px;height: 50px;border: 1px solid #e0e0e0;
float: left;background-color: #ffffff;outline: none;transition: all.3s;
font-weight: bold;font-size: 20px;}
.search>button:hover{background-color: #ff6700;color: #ffffff;border-color: #ff6700;}
.mi_nav_hidden{width: 100%;height: 230px;background-color: red;
border-top: 1px solid #e0e0e0;position: absolute;left: 0;top: 100px;
display: none;}
.mi_nav>li:hover>.mi_nav_hidden{display: block;}
.WCL{width: 1226px;
     height: 460px;
     background: url("../images/xmad_15199022255582_tPcaG.jpg");
    -webkit-animation:WCL 10s infinite ;
     position: relative;}
@-webkit-keyframes WCL {
    0%{
        background-image: url("../images/xmad_15199022255582_tPcaG.jpg");
    }
     20%{
         background-image: url("../images/xmad_15214325178256_oSqlR.jpg");
     }
     40%{
         background-image: url("../images/T12LJ_B7Kv1RXrhCrK.jpg");
     }
     60%{
         background-image: url("../images/T1OBbvBbbv1RXrhCrK.jpg");
     }
     80%{
         background-image: url("../images/T11qLvBQKv1RXrhCrK.jpg");
     }
     100%{
         background-image: url("../images/xm.jpg");
     }
 }
.HM{ width: 234px;
    height: 460px;
    background-color: rgba(0,0,0,.5);
    padding: 20px 0;
    box-sizing: border-box;
    position: relative;}
.HM li{   height: 42px;
    line-height: 42px;
    text-align: left;
    padding-left: 30px;}
.HM li a{color: #ffffff;}
.HM li:hover{background-color: #ff6700;}
.HM i{float: right;margin-right: 30px;color: rgba(255,255,255,.5);
font-weight: bold;font-size: 20px;}
.HM_DD{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: 222;}
.HM li:hover>.HM_DD{display: block;}
.prev,.next{
    width: 41px;
    height: 69px;
    background: url("../images/icon-slides.png");
    position: absolute;
    top: 50%;
    margin-top: -34.5px;
    cursor: pointer;
}
.next{
    right: 0;
    background-position: -124px 0;
}
.prev{
    left: 234px;
    background-position: -83px 0;
}
.prev:hover{
    background-position: 0 0;
}
.next:hover{
    background-position: -42px 0;
}
.ad{margin-top: 15px;  }
.ad>ul,.ad>img{float: left;}
.ad>ul{width: 234px;height: 170px;background-color: #5f5750;}
.ad>img{
    margin-left: 14.6px;
}
.ad>ul>li{
    float: left;
    width: 77px;
    color: rgba(255,255,255,0.7);
    padding:24.25px 0 ;
    font-size: 12px;
}
.ad>ul>li:hover{
    color: #fff;
}
.ad .before{
    border-bottom: 1px solid #665e57;
}
.ad .two{
    border-left: 1px solid #665e57;
    border-right: 1px solid #665e57;
}
3.截图

 



 







            

            
posted @ 
2018-10-29 11:01 
*小宇子* 
阅读(191) 
评论(0) 
 
收藏 
举报