第四讲：简单html+css综合演练--副区域及底部
1、先上效果图：2、结构分析，以一个单元为例
2.1、整体分为两个部分，文字标签加多图展示，多图以20%、30%、20%、30%比例分布；<div class="cat-promote">
<div class="container">
<div class="title"></div>
<div class="content">
<div class="col-2"></div>
<div class="col-3"></div>
<div class="col-2"></div>
<div class="col-3"></div>
</div>
</div>
</div>2.2、在每个格子里面再嵌套一个div，外部的div仅做布局使用，这样可以尽可能的灵活；<div class="cat-promote">
<div class="container">
<div class="title">
<div class="text">女装</div>
</div>
<div class="content cf">
<div class="col-2">
<div class="card"></div>
</div>
<div class="col-3">
<div class="card"></div>
</div>
<div class="col-2">
<div class="card"></div>
</div>
<div class="col-3">
<div class="card"></div>
</div>
</div>
</div>
</div>接下为就是样式了，在标题前面加一条红色竖条小标签，使用伪类实现即可，每个格子也没做过多的处理，只是增加一个外边距，这样不至于所有的格式都粘到一起.cat-promote .title:before {
content: "";
display: inline-block;
width: 5px;
height: 20px;
background: red;
vertical-align: middle;
}
.cat-promote .title .text {
display: inline-block;
padding: 5px;
font-size: 20px;
vertical-align: middle;
}
.cat-promote .content .card {
background: #ccc;
height: 250px;
margin: 0 5px;
}2.3、底部就比较简单了<div class="footer">
<a href="#">关于我们</a>
<a href="#">关于我们</a>
<a href="#">关于我们</a>
<a href="#">关于我们</a>
<a href="#">关于我们</a>
<div>网络文化经营许可证：浙网文0268-027号|增值电信业务经营许可证：浙B2-20080224|信息网络传播视听节目许可证：1109364号</div>
</div>css.footer {
color: #999;
margin-top:30px;
text-align: center;
background: #eee;
padding: 20px 0;
}
.footer a{
color: #999;
padding: 10px;
display: inline-block;
}3、示例源代码下载：
**** Hidden Message *****
页:
[1]