|
|
@@ -0,0 +1,115 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <style>
|
|
|
+ /* css reset */
|
|
|
+ body,ul{
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ li{
|
|
|
+ list-style: none;
|
|
|
+ }
|
|
|
+ /* css 工具类 */
|
|
|
+ .clearfix::after{
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ clear: both;
|
|
|
+ }
|
|
|
+ .content{
|
|
|
+ width: 1226px;
|
|
|
+ margin:0 auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 头部导航 css start */
|
|
|
+ .header-nav{
|
|
|
+ background-color: #333;
|
|
|
+ color: #b0b0b0;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 40px;
|
|
|
+ }
|
|
|
+ .header-nav .content{
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+ .header-nav .hn-left{
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .header-nav .hn-right{
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ .header-nav li{
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ .header-nav .hn-right ul{
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .header-nav li:nth-child(even){
|
|
|
+ color: #424242;
|
|
|
+ }
|
|
|
+ .header-nav .hn-right .car-content{
|
|
|
+ float: right;
|
|
|
+ background-color: #424242;
|
|
|
+ color: #b0b0b0;
|
|
|
+ padding: 0 20px;
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="container">
|
|
|
+ <!-- 头部导航 -->
|
|
|
+ <div class="header-nav">
|
|
|
+ <div class="content clearfix">
|
|
|
+ <div class="hn-left">
|
|
|
+ <ul>
|
|
|
+ <li>小米官网</li>
|
|
|
+ <li>|</li>
|
|
|
+ <li>小米商城 </li>
|
|
|
+ <li>|</li>
|
|
|
+ <li>小米澎湃OS </li>
|
|
|
+ <li>|</li>
|
|
|
+ <li> 小米汽车 </li>
|
|
|
+ <li>|</li>
|
|
|
+ <li>云服务 </li>
|
|
|
+ <li>|</li>
|
|
|
+ <li>IoT </li>
|
|
|
+ <li>|</li>
|
|
|
+ <li>有品 </li>
|
|
|
+ <li>|</li>
|
|
|
+ <li>小爱开放平台 </li>
|
|
|
+ <li>|</li>
|
|
|
+ <li>资质证照 </li>
|
|
|
+ <li>|</li>
|
|
|
+ <li>协议规则 </li>
|
|
|
+ <li>|</li>
|
|
|
+ <li>下载app </li>
|
|
|
+ <li>|</li>
|
|
|
+ <li> Select Location</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="hn-right">
|
|
|
+ <ul>
|
|
|
+ <li>登录</li>
|
|
|
+ <li>|</li>
|
|
|
+ <li>注册</li>
|
|
|
+ <li>|</li>
|
|
|
+ <li>消息通知</li>
|
|
|
+ </ul>
|
|
|
+ <div class="car-content">
|
|
|
+ <span>购物车(0)</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 顶部导航 -->
|
|
|
+ <div class="top-nav"></div>
|
|
|
+ <!-- 轮播图区域 -->
|
|
|
+ <div class="slider-content"></div>
|
|
|
+ <!-- 商品展示区域 -->
|
|
|
+ <div class="goods-content"></div>
|
|
|
+ </div>
|
|
|
+</body>
|
|
|
+</html>
|
