第四讲：简单html+css综合演练--副区域及底部

Sian

1、先上效果图：



2、结构分析，以一个单元为例
2.1、整体分为两个部分，文字标签加多图展示，多图以20%、30%、20%、30%比例分布；

[HTML] 纯文本查看 复制代码

  <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仅做布局使用，这样可以尽可能的灵活；

[HTML] 纯文本查看 复制代码

<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>

接下为就是样式了，在标题前面加一条红色竖条小标签，使用伪类实现即可，每个格子也没做过多的处理，只是增加一个外边距，这样不至于所有的格式都粘到一起

[CSS] 纯文本查看 复制代码

.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、底部就比较简单了

[HTML] 纯文本查看 复制代码

  <div class="footer">
    <a href="#">关于我们</a>
    <a href="#">关于我们</a>
    <a href="#">关于我们</a>
    <a href="#">关于我们</a>
    <a href="#">关于我们</a>
    <div>网络文化经营许可证：浙网文[2013]0268-027号|增值电信业务经营许可证：浙B2-20080224|信息网络传播视听节目许可证：1109364号</div>
  </div>

css

[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、示例源代码下载：

游客，如果您要查看本帖隐藏内容请回复