CSS-家用电器模块

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

布局：

头部

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

身体:

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

小知识：

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

"jiadian_hd">
王子喜欢的明星
"tab_list">
"#" class="style_red">热门|
"#">大家电|
"#">生活电器|
"#">厨房电器|
"#">个护健康|
"#">空气、净水|
"#">新产品|
"#">王子热推
"jiadian_bd">"tab_content">"tab_list_item">"col_210">
"#">王子帅帅哦
"#">王子帅帅哦
"#">王子帅帅哦
"#">王子帅帅哦
"#">王子帅帅哦
"#">王子帅帅哦
"#">"upload/jialun.jpg" alt="">"col_329">"#">"upload/jialun2.jpg" alt="">"col_221">"#">"upload/jinyi.jpg" alt="">"col_221">"#">"upload/jinyi2.jpg" alt="">"col_219">"#">"upload/jinyi3.jpg" alt="">

/*家电模块开始*/
.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;
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！