1. 程式人生 > >413day(版心三個模組中的左中部分)

413day(版心三個模組中的左中部分)

《2018年11月21日》【連續413天】

標題:版心三個模組中的左中部分;

內容:

	 		<!-- 左部分 -->
	 		<div class="jd-clo1">
	 			<ul>
	 				<li><a href="#">家用電器</a></li>
	 				<li>
	 					<a href="#">手機</a>
	 					<span>/</span>
	 					<a href="#">運營商</a>
	 					<span>/</span>
	 					<a href="#">數碼</a>
	 				</li>
	 				<li>
	 					<a href="#">手機</a>
	 					<span>/</span>
	 					<a href="#">運營商</a>
	 					<span>/</span>
	 					<a href="#">數碼</a>
	 				</li>
	 				<li>
	 					<a href="#">手機</a>
	 					<span>/</span>
	 					<a href="#">運營商</a>
	 					<span>/</span>
	 					<a href="#">數碼</a>
	 				</li>
	 				<li>
	 					<a href="#">手機</a>
	 					<span>/</span>
	 					<a href="#">運營商</a>
	 					<span>/</span>
	 					<a href="#">數碼</a>
	 				</li>
	 				<li>
	 					<a href="#">手機</a>
	 					<span>/</span>
	 					<a href="#">運營商</a>
	 					<span>/</span>
	 					<a href="#">數碼</a>
	 				</li>
	 				<li>
	 					<a href="#">手機</a>
	 					<span>/</span>
	 					<a href="#">運營商</a>
	 					<span>/</span>
	 					<a href="#">數碼</a>
	 				</li>
	 				<li>
	 					<a href="#">手機</a>
	 					<span>/</span>
	 					<a href="#">運營商</a>
	 					<span>/</span>
	 					<a href="#">數碼</a>
	 				</li>
	 				<li>
	 					<a href="#">手機</a>
	 					<span>/</span>
	 					<a href="#">運營商</a>
	 					<span>/</span>
	 					<a href="#">數碼</a>
	 				</li>
	 				<li>
	 					<a href="#">手機</a>
	 					<span>/</span>
	 					<a href="#">運營商</a>
	 					<span>/</span>
	 					<a href="#">數碼</a>
	 				</li>
	 				<li>
	 					<a href="#">手機</a>
	 					<span>/</span>
	 					<a href="#">運營商</a>
	 					<span>/</span>
	 					<a href="#">數碼</a>
	 				</li>
	 				<li>
	 					<a href="#">手機</a>
	 					<span>/</span>
	 					<a href="#">運營商</a>
	 					<span>/</span>
	 					<a href="#">數碼</a>
	 				</li>
	 				<li>
	 					<a href="#">手機</a>
	 					<span>/</span>
	 					<a href="#">運營商</a>
	 					<span>/</span>
	 					<a href="#">數碼</a>
	 				</li>
	 				<li>
	 					<a href="#">手機</a>
	 					<span>/</span>
	 					<a href="#">運營商</a>
	 					<span>/</span>
	 					<a href="#">數碼</a>
	 				</li>
	 				<li>
	 					<a href="#">手機</a>
	 					<span>/</span>
	 					<a href="#">運營商</a>
	 					<span>/</span>
	 					<a href="#">數碼</a>
	 				</li>
	 				<li>
	 					<a href="#">手機</a>
	 					<span>/</span>
	 					<a href="#">運營商</a>
	 					<span>/</span>
	 					<a href="#">數碼</a>
	 				</li>
	 			</ul>
	 		</div>
	 		<!-- 中間 -->
	 		<div class="jd-clo2">
	 			<div class="jd-clo2-hd">
	 				<!-- 輪播圖 -->
					<div class="arrow">
						<a href="#" class="arr-l"></a>
						<a href="#" class="arr-r"></a>
					</div>
					<ol>
						<li class="current"></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ol>
					<ul>
						<li>
							<a href="#">
							<img src="images/banner.jpg" alt="">
							</a>
						</li>
					</ul>
	 			</div>
	 			<div class="jd-clo2-bd">
	 				<div class="first-pic">
	 					<img src="images/pic1.jpg" alt="">
	 				</div>
	 				<div><img src="images/pic2.jpg" alt=""></div>
	 			</div>
	 		</div>
	 		<!-- 右 -->
	 		<div class="jd-clo3">
	 			
	 		</div>
	 	</div>
/*左*/
.jd-clo1 {
	width: 190px;
	height: 465px;
	background-color: #6E6568;
	padding-top: 15px;
	float: left;
}
.jd-clo1 li {
	padding-left: 10px;
	height: 28px;
	line-height: 28px;

}
.jd-clo1 li:hover {
	background-color: #999395;	
}
.jd-clo1 li a {
	color: #fff;
	font-size: 14px;
}
.jd-clo1 li span {
	color: #fff;
	font-size: 12px;
}
/*中*/
.jd-clo2 {
	width: 790px;
	height: 480px;
	margin-left: 10px;
	float: left;
}
.jd-clo2-hd {
	height: 340px;
	margin-bottom: 10px;
	position: relative;

}
.jd-clo2-bd div {
	width: 390px;
	height: 130px;
	float: left;
}
.jd-clo2-bd div img {
	width: 100%;
}
.first-pic {
	margin-right: 10px;
}
.arr-l, .arr-r {
	position: absolute;
	top: 50%;
	margin-top: -30px;
	width: 30px;
	height: 60px;
	background: rgba(0,0,0,.3);
	font-family: "icomoon";
	color: #fff;
	text-align: center;
	line-height: 60px;
	font-size: 25px;
}
.arr-l {
	left: 0;
}
.arr-r {
	right: 0;
}
.jd-clo2-hd ol {
	position: absolute;
	bottom: 20px;
	left: 50%;
	margin-left: -90px;
	width: 180px;
	height: 20px;
	background: rgba(255,255,255,0.3);
	border-radius: 10px;
}
.jd-clo2-hd ol li {
	width: 12px;
	height: 12px;
	background-color: #fff;
	border-radius: 50%;
	float: left;
	margin: 5px;
	cursor: pointer;
}
.jd-clo2-hd .current {
	background-color: #f10215;
}
.jd-clo3 {
	width: 190px;
	height: 480px;
	float: right;
}