《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;
}