年年有"余"

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1623|回复: 0

[HTML+CSS] 第四讲:简单html+css综合演练--副区域及底部

[复制链接]
  • TA的每日心情
    奋斗
    2022-12-13 21:26
  • 签到天数: 371 天

    [LV.9]以坛为家II

    发表于 2018-1-7 19:45:21 | 显示全部楼层 |阅读模式
    1、先上效果图:

    屏幕快照 2018-01-07 下午7.39.18.png

    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、示例源代码下载:
    游客,如果您要查看本帖隐藏内容请回复

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    手机版|小黑屋|Archiver|iOS开发笔记 ( 湘ICP备14010846号 )

    GMT+8, 2024-3-29 22:47 , Processed in 0.050177 second(s), 21 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表