413day(版心三個模組中的左中部分)
阿新 • • 發佈:2018-11-24
《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; }