CSS-家用电器模块

本文主要是介绍CSS-家用电器模块，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

没有动态的日子，都是在搬烫手的砖。一个人最美好的状态，那一定是知道自己想要什么，并且为之全力以赴。

布局：

头部

文字左浮动，右侧盒子右浮动，右侧盒子内部的li标签左浮动
a标签内部的|通过 margin-right 挤开

身体:

设置5个div盒子
第一个盒子上面li左浮动，下面直接插入img标签
图片防止大小不合适，可以先给img设置一个大小

小知识：

如果a标签内部盒子有宽度，需要给a标签设置成块级元素。

在这里插入图片描述

<div class="jiadian_hd"><h3>王子喜欢的明星</h3><div class="tab_list"><ul><li><a href="#" class="style_red">热门</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="#">空气、净水</a>|</li><li><a href="#">新产品</a>|</li><li><a href="#">王子热推</a></li></ul></div></div><div class="jiadian_bd"><div class="tab_content"><div class="tab_list_item"><div class="col_210"><ul><li><a 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="#">王子帅帅哦</a></li></ul><div><a href="#"><img src="upload/jialun.jpg" alt=""></a></div></div><div class="col_329"><a href="#"><img src="upload/jialun2.jpg" alt=""></a></div><div class="col_221"><a href="#"><img src="upload/jinyi.jpg" alt=""></a></div><div class="col_221"><a href="#"><img src="upload/jinyi2.jpg" alt=""></a></div><div class="col_219"><a href="#"><img src="upload/jinyi3.jpg" alt=""></a></div></div></div></div>

/*家电模块开始*/
.jiadian_hd{height: 30px;border-bottom: 2px solid #C81623;
}
.floor .w{margin-top: 30px;
}
.jiadian_hd h3{float: left;font-size: 18px;color: #C81623;font-weight: 400;}
.jiadian_hd .tab_list{float: right;line-height: 30px;
}
.jiadian_hd .tab_list ul li{float: left;
}
.jiadian_hd .tab_list ul li a {padding: 0 25px;
}
.jiadian_bd{height: 361px;/*background-color: pink;*/
}
.tab_list_item div{float: left;height: 361px;
}
.col_210{width: 210px;text-align: center;background-color: #f9f9f9;
}
.col_210 ul li{float: left;height: 34px;width: 85px;border-bottom: 1px solid #cccccc;text-align: center;line-height: 34px;margin-right: 10px;
}
.col_210 a img{width: 160px;height: 245px;margin-left: 23px;margin-top: 5px;
}
.col_210 ul{padding-left: 12px;
}
.col_329{width: 329px;
}
.col_329 img{width: 320px;height: 360px;
}
.col_221{width: 221px;
}
.col_219{width: 219px;
}