|
|
@@ -5,6 +5,7 @@
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>Document</title>
|
|
|
+ <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_5060986_mzmp3egex0s.css">
|
|
|
<style>
|
|
|
/* css reset */
|
|
|
* {
|
|
|
@@ -20,7 +21,9 @@
|
|
|
/* 页面主宽度且居中 */
|
|
|
.main-width {
|
|
|
width: 1226px;
|
|
|
- margin: 0 auto;
|
|
|
+ /* margin: 0 auto; */
|
|
|
+ margin-left: auto;
|
|
|
+ margin-right: auto;
|
|
|
}
|
|
|
/* 清除浮动 */
|
|
|
.clearfix::after{
|
|
|
@@ -58,12 +61,14 @@
|
|
|
}
|
|
|
.top-nav .top-nav-left{
|
|
|
float: left;
|
|
|
+ height: 40px;
|
|
|
}
|
|
|
.top-nav .top-nav-right{
|
|
|
float: right;
|
|
|
}
|
|
|
.top-nav .top-nav-right .tnr-link{
|
|
|
float: left;
|
|
|
+ height: 40px;
|
|
|
}
|
|
|
.top-nav .top-nav-right .tnr-car{
|
|
|
float: left;
|
|
|
@@ -115,6 +120,52 @@
|
|
|
color: #333;
|
|
|
}
|
|
|
/* 顶部导航栏 end */
|
|
|
+ /* nav 区域 start */
|
|
|
+ .nav .nav-logo{
|
|
|
+ float: left;
|
|
|
+ margin-top: 22px;
|
|
|
+ }
|
|
|
+ .nav .nav-logo img{
|
|
|
+ width: 56px;
|
|
|
+ height: 56px;
|
|
|
+ }
|
|
|
+ .nav .nav-list{
|
|
|
+ float: left;
|
|
|
+ margin-left: 160px;
|
|
|
+ }
|
|
|
+ .nav .nav-list li{
|
|
|
+ float: left;
|
|
|
+ height: 100px;
|
|
|
+ line-height: 100px;
|
|
|
+ margin:0 10px;
|
|
|
+ }
|
|
|
+ .nav .nav-search{
|
|
|
+ float: right;
|
|
|
+ width: 296px;
|
|
|
+ height: 50px;
|
|
|
+ border:1px solid #e0e0e0;
|
|
|
+ margin-top: 25px;
|
|
|
+ }
|
|
|
+ .nav .nav-search input{
|
|
|
+ float: left;
|
|
|
+ height: 50px;
|
|
|
+ border: none;
|
|
|
+ outline: none;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ .nav .nav-search .search-btn{
|
|
|
+ float: right;
|
|
|
+ height: 50px;
|
|
|
+ width: 50px;
|
|
|
+ border-left: 1px solid #e0e0e0;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 50px;
|
|
|
+ }
|
|
|
+ .nav .nav-search .search-btn i{
|
|
|
+ font-size: 25px;
|
|
|
+ color: #616161;
|
|
|
+ }
|
|
|
+ /* nav 区域 end */
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
@@ -167,9 +218,31 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
<!-- 导航栏 -->
|
|
|
- <div class="nav"></div>
|
|
|
+ <div class="nav main-width clearfix" >
|
|
|
+ <div class="nav-logo">
|
|
|
+ <img src="./img/xiaomi/logo-mi2.png" alt="logo">
|
|
|
+ </div>
|
|
|
+ <div class="nav-list">
|
|
|
+ <ul class="clearfix">
|
|
|
+ <li>Xiaomi手机</li>
|
|
|
+ <li>Redmi手机</li>
|
|
|
+ <li>电视</li>
|
|
|
+ <li>笔记本</li>
|
|
|
+ <li>平板</li>
|
|
|
+ <li>家电</li>
|
|
|
+ <li>路由器</li>
|
|
|
+ <li>服务中心</li>
|
|
|
+ <li>社区</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="nav-search">
|
|
|
+ <input type="text" placeholder="搜索">
|
|
|
+ <div class="search-btn">
|
|
|
+ <i class="iconfont icon-search"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<!-- 轮播图区域 -->
|
|
|
<div class="swiper"></div>
|
|
|
<!-- bnner 区域 -->
|
