|
|
@@ -178,6 +178,58 @@
|
|
|
font-size: 14px;
|
|
|
color: #333;
|
|
|
}
|
|
|
+
|
|
|
+ /* 顶部导航 css start */
|
|
|
+ .top-nav{
|
|
|
+ padding: 20px 0;
|
|
|
+ }
|
|
|
+ .top-nav .tn-left {
|
|
|
+ float: left;
|
|
|
+ width: 56px;
|
|
|
+ height: 56px;
|
|
|
+ background-image: url("./img/logo-mi2.png");
|
|
|
+ background-size: cover;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-nav .tn-center {
|
|
|
+ float: left;
|
|
|
+ width: 850px;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-nav .tn-center li {
|
|
|
+ display: inline-block;
|
|
|
+ height: 56px;
|
|
|
+ line-height: 56px;
|
|
|
+ padding: 0 10px;
|
|
|
+ }
|
|
|
+ .top-nav .tn-center li:hover{
|
|
|
+ cursor: pointer;
|
|
|
+ color: #ff6700;
|
|
|
+ }
|
|
|
+ .top-nav .tn-right {
|
|
|
+ float: right;
|
|
|
+ width: 300px;
|
|
|
+ height: 50px;
|
|
|
+ border: 1px solid #e0e0e0;
|
|
|
+ }
|
|
|
+ .top-nav .tn-right .tnr-text{
|
|
|
+ float: left;
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ padding-left: 20px;
|
|
|
+ }
|
|
|
+ .top-nav .tn-right .tnr-inp{
|
|
|
+ float: right;
|
|
|
+ height: 50px;
|
|
|
+ width: 50px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 50px;
|
|
|
+ border-left: 1px solid #e0e0e0;
|
|
|
+ }
|
|
|
+ .top-nav .tn-right i{
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
@@ -237,7 +289,28 @@
|
|
|
</div>
|
|
|
<!-- 顶部导航 -->
|
|
|
<div class="top-nav">
|
|
|
- <i class="iconfont icon-search"></i>
|
|
|
+ <div class="content clearfix">
|
|
|
+ <div class="tn-left"></div>
|
|
|
+ <div class="tn-center">
|
|
|
+ <ul>
|
|
|
+ <li>Xiaomi手机</li>
|
|
|
+ <li>Redmi手机</li>
|
|
|
+ <li>电视</li>
|
|
|
+ <li>笔记本</li>
|
|
|
+ <li>平板</li>
|
|
|
+ <li>家电</li>
|
|
|
+ <li>路由器</li>
|
|
|
+ <li>服务中心</li>
|
|
|
+ <li>社区</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="tn-right">
|
|
|
+ <div class="tnr-text">手机</div>
|
|
|
+ <div class="tnr-inp">
|
|
|
+ <i class="iconfont icon-search"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<!-- 轮播图区域 -->
|
|
|
<div class="slider-content"></div>
|
