|
|
@@ -0,0 +1,117 @@
|
|
|
+<!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 样式重置 把浏览器自带的标签样式去掉 */
|
|
|
+ *{
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ li{
|
|
|
+ list-style: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 工具类 */
|
|
|
+ /* 清除浮动 */
|
|
|
+ .clearfix::after{
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ clear: both;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ /* 头部导航 开始 */
|
|
|
+ .header-nav-content{
|
|
|
+ width: 1226px;
|
|
|
+ margin:0 auto;
|
|
|
+ }
|
|
|
+ .header-nav{
|
|
|
+ background-color: #333;
|
|
|
+ }
|
|
|
+ .header-nav .header-nav-left{
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .header-nav .header-nav-right{
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ .header-nav ul li{
|
|
|
+ float: left;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #b0b0b0;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ }
|
|
|
+ .header-nav-right ul,.header-nav-right .car{
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .header-nav ul li:nth-child(2n){
|
|
|
+ color: #424242;
|
|
|
+ margin:0 6px;
|
|
|
+ }
|
|
|
+ .header-nav .car{
|
|
|
+ color: #b0b0b0;
|
|
|
+ background-color: #444;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 40px;
|
|
|
+ margin-left: 20px;
|
|
|
+ padding:0 15px;
|
|
|
+ }
|
|
|
+ /* 头部导航 结束 */
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <div class="container">
|
|
|
+ <!-- 头部导航 开始 -->
|
|
|
+ <div class="header-nav">
|
|
|
+ <div class="header-nav-content clearfix">
|
|
|
+ <div class="header-nav-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="header-nav-right">
|
|
|
+ <ul>
|
|
|
+ <li>登录</li>
|
|
|
+ <li>|</li>
|
|
|
+ <li>注册</li>
|
|
|
+ <li>|</li>
|
|
|
+ <li>消息通知</li>
|
|
|
+ </ul>
|
|
|
+ <div class="car">
|
|
|
+ <span>购物车（0）</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 头部导航 开始 -->
|
|
|
+ </div>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
