思维导图

graph TD 
搭建网页思维-->常用布局套路-->出现问题-->新知识

搭建网页思维

• 画出草图
• 板块分析
  • 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
• 具体分析
  • 在完成初步的分块之后，我们需要按照内容细分模块。
• 具体实现
• 页面样式风格统一布局显示正常，不错乱

常用的布局套路

一、头部底部固定，中间自适应，中间盒子里左盒子固定右盒子自适应宽度

二、上面固定，左侧固定，右侧内容可滚动

1.relative,fixed,absolute定位

2. 均使用fixed

    * {
        margin: 0;
        padding:0;
    }
    .header {
        width: 100%;
        height: 54px;
        position: fixed;
        border-bottom: 1px solid #e4e6e9;
        background: #ccc;
    }
    .sidebar {
        position: fixed;
        top: 54px;
        bottom: 0;
        left: 0;
        width: 300px;
        border-right: 1px solid #e4e6e9;
        background-color: #fff;
    }
    .content {
        position: fixed;
        top: 54px;
        right: 0;
        bottom: 0;
        left: 301px;
        overflow-y: auto;
        background-color: #fff;
    }

三、三栏布局

1. 浮动布局

出现问题

01 大部分空白

• 问题：
  • 高度不能自适应，设置了一个margin:100px auto;
  • 导致有一大段空白
  • 对盒子设置浮动的时候，影响后面的标准流的盒子
• 解决：
  • 删除高度，使高度自适应
  • 删除margin:100px auto;
  • 添加清除浮动

02 布局问题

• 对整个页面的布局不是很清晰，未把网页的基本结构分析清楚，将每个部分的位置及内容等有个清晰的了解
• 问题：
  • 超出设定位置，覆盖顶部,顶部让出自己的位置
• 解决：
  • 让顶部回到原来位置

新知识

01 颜色选择

css代码
        .color-box {
          display: inline-block;
          width: 45px;
          height: 68px;
          margin: 0px 2px;
        }
        .color1 {
          width: 28px;
          height: 28px;
          border-radius: 50%;
          background: pink;
        }

        .radius_color {
          font-size: 12px;
          text-align: center;
        }

html代码
        <div class="color-box">
            div class="color1"></div>
            <span class="radiusBoX_color">粉色</span>
        </div>

02 各种各样布局

定位布局实操、flex布局、svg的用法、float布局实操

03 cheekbox换样式

利用了伪类after，给一个定位去覆盖

        input[type=checkbox] {
            cursor: pointer;
            position: relative;
            width: 15px;
            height: 15px;
            font-size: 14px;
        }

        input[type=checkbox]::after {
            position: absolute;
            top: 0;
            color: #000;
            width: 15px;
            height: 15px;
            display: inline-block;
            visibility: visible;
            padding-left: 0px;
            text-align: center;
            content: ' ';
            border-radius: 3px
        }

        input[type=checkbox]:checked::after {
            content: "✓";
            color: #fff;
            font-size: 12px;
            font-weight: bold;
            background-color: #ff366f;
        }
    </style>