效果如下:
可以根据特征分为三块,然后每块对应具体样式
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#one{
color: white;
width: 400px;
height: 40px;
line-height: 40px;
background-color: rgb(5,123,193);
font-size: 20px;
text-indent: 20px;
}
.two{
color: rgb(7,128,207);
width: 400px;
height: 35px;
line-height: 35px;
background-color: rgb(228,241,250);
font-size: 20px;
text-indent: 20px;
}
.three{
width: 400px;
/* height: 50px;
line-height: 50px; */
}
p{
text-indent: 16px;
}
</style>
</head>
<body>
<div id="one">
家用电器
</div>
<div class="two">
大家电
</div>
<div class="three">
<p>平板电视 洗衣机 冰箱</p>
<p>空调 烟机/灶具 热水器</p>
<p>冷柜/酒柜 消毒柜 家庭影院</p>
</div>
<div class="two">
生活电器
</div>
<div class="three">
<p>电风扇 净化器 吸尘器</p>
<p>净水设备 挂烫机 电话机</p>
</div>
<div class="two">
厨房电器
</div>
<div class="three">
<p>榨汁机 电压力锅 电饭煲</p>
<p>豆浆机 微波炉 电磁炉</p>
</div>
<div class="two">
五金家装
</div>
<div class="three">
<p>淋浴/水槽 电动工具 手动工具</p>
<p>仪器仪表 浴霸/排气 灯具</p>
</div>
</body>
</html>
页面效果如下: