m-nav add scroller

bichao.dong
1 parent 4a0fbd52
Showing 8 changed files with 34 additions and 13 deletions
css/common.css
css/global.css
css/section.css
css/section.less
css/tab.css
css/tab.less
css/util.less
html/index.html
@@ -397,6 +397,9 @@ a.m-more {
 .background-gray {
   background-color: #666 !important;
 }
+.background-deep-gray {
+  background-color: #444 !important;
+}
 .background-yellow {
   background-color: #FF9D2C !important;
 }
@@ -794,17 +797,20 @@ Pagination Styles
   display: inline-block;
   width: 100px;
 }
-.scroll-wrap .m-tab {
+.scroll-wrap .m-tab,
+.scroll-wrap .m-nav {
   white-space: nowrap;
   overflow: visible;
   width: auto;
 }
-.scroll-wrap .m-tab li {
+.scroll-wrap .m-tab li,
+.scroll-wrap .m-nav li {
   float: none;
   display: inline;
   width: 90px;
 }
-.scroll-wrap .m-tab li a {
+.scroll-wrap .m-tab li a,
+.scroll-wrap .m-nav li a {
   display: inline-block;
 }
 .m-list-view {
@@ -1054,7 +1060,6 @@ Pagination Styles
 }
 .m-nav {
   width: 100%;
-  background-color: #444;
   font-size: 14px;
   color: #999;
   overflow: hidden;
@@ -1064,6 +1069,7 @@ Pagination Styles
   color: #999;
   padding: 0 10px;
   min-width: 70px;
+  display: block;
 }
 .m-nav li {
   float: left;
@@ -333,6 +333,9 @@ a.m-more {
 .background-gray {
   background-color: #666 !important;
 }
+.background-deep-gray {
+  background-color: #444 !important;
+}
 .background-yellow {
   background-color: #FF9D2C !important;
 }
@@ -534,16 +537,19 @@ a.m-more {
   display: inline-block;
   width: 100px;
 }
-.scroll-wrap .m-tab {
+.scroll-wrap .m-tab,
+.scroll-wrap .m-nav {
   white-space: nowrap;
   overflow: visible;
   width: auto;
 }
-.scroll-wrap .m-tab li {
+.scroll-wrap .m-tab li,
+.scroll-wrap .m-nav li {
   float: none;
   display: inline;
   width: 90px;
 }
-.scroll-wrap .m-tab li a {
+.scroll-wrap .m-tab li a,
+.scroll-wrap .m-nav li a {
   display: inline-block;
 }
@@ -101,16 +101,19 @@
   display: inline-block;
   width: 100px;
 }
-.scroll-wrap .m-tab {
+.scroll-wrap .m-tab,
+.scroll-wrap .m-nav {
   white-space: nowrap;
   overflow: visible;
   width: auto;
 }
-.scroll-wrap .m-tab li {
+.scroll-wrap .m-tab li,
+.scroll-wrap .m-nav li {
   float: none;
   display: inline;
   width: 90px;
 }
-.scroll-wrap .m-tab li a {
+.scroll-wrap .m-tab li a,
+.scroll-wrap .m-nav li a {
   display: inline-block;
 }
@@ -106,7 +106,7 @@
       }
     }
   }
-  .m-tab{
+  .m-tab, .m-nav{
     white-space: nowrap;
     overflow: visible;
     width: auto;
 .m-nav {
   width: 100%;
-  background-color: #444;
   font-size: 14px;
   color: #999;
   overflow: hidden;
@@ -10,6 +9,7 @@
   color: #999;
   padding: 0 10px;
   min-width: 70px;
+  display: block;
 }
 .m-nav li {
   float: left;
 .m-nav{
 	width: 100%;
-	background-color: #444;
 	font-size: 14px;
 	color: #999;
 	overflow: hidden;
@@ -9,6 +8,7 @@
 		color: #999;
     padding: 0 10px;
     min-width: 70px;
+		display: block;
 	}
 	li{
 		float: left;
@@ -179,6 +179,10 @@
 .background-gray{
 	background-color: #666 !important;
 }
+
+.background-deep-gray{
+	background-color: #444 !important;
+}
 .background-yellow{
 	background-color: #FF9D2C !important;
 }
@@ -22,12 +22,14 @@
  
  
   <!-- tab -->
+  <div class="scroll-wrap background-deep-gray">
   <ul class="m-nav border-1px border-bottom">
     <li class="on"><a href="#">秒杀专区</a></li>
     <li><a href="#">活动专区</a></li>
     <li><a href="#">最低专区</a></li>
     <li><a href="#">精品专区</a></li>
   </ul>
+</div>
   <!-- slider -->
   <div class="m-slider">
     <!-- Swiper -->