設(shè)計
注意這個floor,不能給高度篷朵,內(nèi)容有多少哗戈,算多少
- 上模塊 box_hd
- 下模塊 box_bd
<div class="floor">
<div class="w jiadian">
<div class="box_hd">頭部</div>
<div class="box_bd">主體</div>
</div>
</div>
.floor {
margin-top: 25px;
}
.box_hd {
height: 30px;
border-bottom: 2px solid #c81623;
}
box_hd
- 有高度可以不用清除浮動
- 左邊h3,盒子左浮動
- 右邊tab-list玻佩,右浮動出嘹,因為用到tab切換效果,所以里面要用ul和li來做
<div class="box_hd">
<h3>家用電器</h3>
<div class="tab_list">
<ul>
<li><a class="style_red" href="#">熱門</a>|</li>
<li><a href="#">大家電</a>|</li>
<li><a href="#">生活電器</a>|</li>
<li><a href="#">廚房電器</a>|</li>
<li><a href="#">個護健康</a>|</li>
<li><a href="#">應(yīng)季電器</a>|</li>
<li><a href="#">空氣/凈水</a>|</li>
<li><a href="#">新奇特</a>|</li>
<li><a href="#">高端電器</a></li>
</ul>
</div>
</div>
.box_hd {
height: 30px;
border-bottom: 2px solid #c81623;
}
.box_hd h3 {
float: left;
font-weight: 400;
font-size: 18px;
color: #c81623;
}
.box_hd .tab_list {
float: right;
line-height: 30px;
}
.box_hd .tab_list ul li{
float: left;
}
.box_hd .tab_list ul li a {
margin: 0 15px
}
box_bd
- 左邊分為兩部分咬崔,上面用ul li税稼,下面插入圖片,總體居中對齊
- 右邊都是圖片鏈接垮斯,將寬度單獨設(shè)為類郎仆,再將部分鏈接設(shè)為block,加入底邊框
<div class="box_bd">
<div class="tab_content">
<div class="tab_list_item">
<div class="col_210">
<ul>
<li><a href="#">節(jié)能補貼</a></li>
<li><a href="#">4K電視</a></li>
<li><a href="#">空氣凈化器</a></li>
<li><a href="#">IH電飯煲</a></li>
<li><a href="#">滾筒洗衣機</a></li>
<li><a href="#">電熱水器</a></li>
</ul>
<a href="#">
<img src="./upload/floor-1-1.png" alt="">
</a>
</div>
<div class="col_320">
<a href="#">
<img src="./upload/pic1.jpg" alt="">
</a>
</div>
<div class="col_221">
<a href="#" class="border_bottom">
<img src="./upload/floor-1-2.png" alt="">
</a>
<a href="#">
<img src="./upload/floor-1-3.png" alt="">
</a>
</div>
<div class="col_221">
<a href="#">
<img src="./upload/floor-1-4.png" alt="">
</a>
</div>
<div class="col_219">
<a href="#" class="border_bottom">
<img src="./upload/floor-1-5.png" alt="">
</a>
<a href="#">
<img src="./upload/floor-1-6.png" alt="">
</a>
</div>
</div>
</div>
</div>
.tab_list_item>div {
height: 361px;
float: left;
}
.col_210 {
width: 210px;
text-align: center;
background-color: #f9f9f9;
}
.col_210 ul {
padding-left: 12px;
}
.col_210 ul li {
margin-right: 10px;
float: left;
width: 85px;
height: 34px;
text-align: center;
line-height: 34px;
border-bottom: 1px solid #ccc;
}
.col_320 {
width: 320px;
}
.col_221 {
width: 221px;
border-right: 1px solid #ccc;
}
.col_219 {
width: 219px;
}
.border_bottom {
display: block;
border-bottom: 1px solid #ccc;
}