首页初步完成

userWeb/UI/css/home.css

@@ -3,11 +3,14 @@
 	text-align: center;
     padding-top: 196px;
 }
+#home .input{
+    margin: 0 auto;
+    width: 39%;
+    min-width: 732px;
+}
 #home .input>p{
     height: 50px;
     text-align: center;
-    margin: 0 auto;
-    width: 38.5%;
     margin-top: 63px;
 }
 #home .input p>input{
@@ -32,33 +35,78 @@
 }
 #home .input .hot{
 	text-align: left;
-    width: 38.5%;
-    margin: 0 auto;
     margin-top: 20px;
 }
 #home .input .hot .tit{
 	margin: 0
 }
 #home .carousel{
-	height: 275px;
+	height: 341px;
     text-align: center;
+    margin: 0 auto;
+    width: 66%;
+    min-width: 1261px;
     margin-top: 82px;
 }
+#home .carousel .tit{
+	font-family:HelveticaNeue;
+	font-size:14px;
+	color:#858998;
+	text-align: left;
+	margin-bottom: 20px;
+}
 #home .carousel .main{
 	text-align: center;
+    height: 240px;
+    padding: 20px 0;
+    border-top: 1px solid #f1f1f1;
+    border-bottom: 1px solid #f1f1f1;
+}
+#home .carousel .main>span{
+	width: 50px;
+    height: 200px;
+    line-height: 200px;
+    top: -97px;
+    cursor: pointer;
+    font-size: 20px;
+    color: #767a82;
+}
+#home .carousel .main>span:hover{
+	box-shadow: 0 0 1px #999;
+}
+#home .carousel .main .glyphicon-menu-left{
+    margin-right: 25px;
+}
+#home .carousel .main .glyphicon-menu-right{
+    margin-left: 25px;
 }
 #home .carousel>span{
 	display: inline-block;
 	width: 30px;
 	height: 100%;
 }
+#home .carousel .scroll{
+	display: inline-block;
+    width: 1101px;
+    overflow-x: scroll;
+}
+#home .carousel .scroll::-webkit-scrollbar{
+	height: 0px;
+}
 #home .carousel ul{
 	display: inline-block;
+	padding: 0;
+	margin: 0;
+	width: -webkit-max-content;
+    width: -moz-max-content;
+    width: max-content; 
+    /*width: 5000px; */
 }
 #home .carousel ul li{
 	list-style: none;
 	float:left;
-	width: 80px;
-	height: 120px;
+	width: 200px;
+	height: 200px;
+	margin: 0 10px;
 	border: 1px solid #999;
 }

userWeb/UI/home.html

@@ -19,24 +19,56 @@
 		<p class="tit">Some T-shirts You May Like:</p>
 		<div class="main">
 			<span class="glyphicon glyphicon-menu-left"></span>
-			<ul>
-				<li>
-					<img src="" alt="">
-				</li>
-				<li>
-					<img src="" alt="">
-				</li>
-				<li>
-					<img src="" alt="">
-				</li>
-				<li>
-					<img src="" alt="">
-				</li>
-				<li>
-					<img src="" alt="">
-				</li>
-				<div style="clear:both;"></div>
-			</ul>
+			<div class="scroll">
+				<ul>
+					<li>
+						1<img src="" alt="">
+					</li>
+					<li>
+						2<img src="" alt="">
+					</li>
+					<li>
+						3<img src="" alt="">
+					</li>
+					<li>
+						4<img src="" alt="">
+					</li>
+					<li>
+						5<img src="" alt="">
+					</li>
+					<li>
+						6<img src="" alt="">
+					</li>
+					<li>
+						7<img src="" alt="">
+					</li>
+					<li>
+						8<img src="" alt="">
+					</li>
+					<li>
+						9<img src="" alt="">
+					</li>
+					<li>
+						10<img src="" alt="">
+					</li>
+					<li>
+						11<img src="" alt="">
+					</li>
+					<li>
+						12<img src="" alt="">
+					</li>
+					<li>
+						13<img src="" alt="">
+					</li>
+					<li>
+						14<img src="" alt="">
+					</li>
+					<li>
+						15<img src="" alt="">
+					</li>
+					<div style="clear:both;"></div>
+				</ul>
+			</div>
 			<span class="glyphicon glyphicon-menu-right"></span>
 		</div>
 	</div>

userWeb/UI/js/home.js

@@ -9,4 +9,21 @@ function homeF(){
 		
 	}
 	lang();
+	var carousel_prev= $("#home .carousel .glyphicon-menu-left");
+	var carousel_next= $("#home .carousel .glyphicon-menu-right");
+	carousel_prev[0].onclick=function(){
+		var scrollObj = $("#home .carousel .scroll")[0];
+		var current = scrollObj.scrollLeft;
+		if (current>0) {
+			scrollObj.scrollLeft=current-220;
+		}
+	}
+	carousel_next[0].onclick=function(){
+		var scrollObj = $("#home .carousel .scroll")[0];
+		var current = scrollObj.scrollLeft;
+		var maxWidth = $("#home .carousel ul").width()
+		if (current<maxWidth) {
+			scrollObj.scrollLeft=current+220
+		}
+	}
 }

userWeb/config/common.css

@@ -16,7 +16,7 @@
 /*定义滚动条轨道 内阴影+圆角*/  
 ::-webkit-scrollbar-track  {
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
-    border-radius: 10px;  /*滚动条的背景区域的圆角*/
+    border-radius: 1px;  /*滚动条的背景区域的圆角*/
     background-color: #1D2331;/*滚动条的背景颜色*/  
 }
 /*定义滑块 内阴影+圆角*/  
@@ -24,4 +24,4 @@
     border-radius: 10px;  /*滚动条的圆角*/
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
     background-color: #5F6C88;  /*滚动条的背景颜色*/
-} 
+}