html后续及css

最新推荐文章于 2024-09-24 10:17:01 发布

一只小c宝

最新推荐文章于 2024-09-24 10:17:01 发布

阅读量145

点赞数

文章标签： html 前端 css

本文链接：https://blog.csdn.net/yuexinqianhepc/article/details/121742408

版权

功能标签（功能元素）
    1) table           表
      tbody         表格体 thead、tfoot
        tr          行
          td、th    列（容器）
            子标签可以为任意其他标签
      行中的列数在经过计算后应该是相同的
<table border="1" width="100%" style="border-collapse:collapse ;">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">1</td>
                <td>tom</td>
                <td>男</td>
            </tr>
            <tr>
                <td>jacky</td>
                <td>男</td>
            </tr>
            <tr>
                <td colspan="2">vicky</td>
                <td>女</td>
            </tr>
        </tbody>
        <tfoot></tfoot>
    </table>
    2) form
      用来进行前后台数据交互（默认情况下，同步交互：JavaEE(jsp)、nodejs(模板)）
      ajax 异步交互
      前置技术： http协议

      form( action 后端处理接口，enctype 表示编码方式，method请求方法)
        method取值
          get   用于查询操作，参数携带在url后面
          post 用于更新【保存、修改、删除】操作，参数携带在请求报文请求体中
        enctype取值：
          application/x-www-form-urlencoded
            查询字符串（表单编码）将特殊字符转换为16进制 key=val&key=val&...
            schoolName=太原理工大学&userName=王五
          multipart/form-data
            用于表单中有附件提交的时候，二进制，无需进行编码
          text/plain
            纯文本提交

        1) input     输入框
          注意：input(text、password、radio、checkbox)必须添加name属性，(radio、checkbox)必须添加value属性
          <input type="text" />   单行文本框
          <input type="password" /> 密码
          <input type="radio" />    单选按钮
          <input type="checkbox" /> 复选按钮
          <input type="file"/>        附件
          <input type="submit" /> 提交按钮
          <input type="reset" /> 重置按钮

          <input type="date" /> 日期选择器（h5新增，兼容性差，一般不用）
          ...
        2) textarea 多行文本
          <textarea name="description" cols="50" rows="4"></textarea>
        3) select    下拉菜单
          <select name="address">
            <option value="js">江苏</option>
            <option value="sx">山西</option>
            <option value="hn">河南</option>
          </select>
<form action="/user/submit" method="POST" enctype="application/x-www-form-urlencoded">
        <div>
        <label for="input_school_name">
            学校姓名:
            <input id="input_school_name" type="text" name="schoolName">
        </label>
        </div>
        <div>
            <label for="input_usrname">
                学生姓名:
                <input id="input_username" type="text" name="userName">
            </label>
        </div>
        <div>
            <input type="reset" value="重置">
            <input type="submit" value="提交">
        </div>
    </form>
3)iframe
<iframe width="100%" height="300" frameborder="0" scrolling="no" hspace="0" src="https://i.tianqi.com/?c=code&a=getcode&id=55&icon=1"></iframe>

css3:

css各个元素具体作用和展示方式可在此网页查询: MDN Web Docs

层叠样式表
1) 在html中应用
css嵌入到html的头部的style标签内
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html使用css</title>
    <style>
        #one,#two {
            background-color: lightcoral;
            color: #fff;
            width: 300px;
        }
    </style>
</head>

<body>
    <div id="one">
        hello world
    </div>
    <div id="two">
        你好 世界
    </div>
</body>
    css嵌入到元素style属性内
              css规则与html结构分离（解耦）
              css规则可以复用
<div style="background-color: lightcoral;color: #fff;width: 300px;">
        hello world
    </div>
css单独写入到.css文件，通过link引入到html
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html使用css</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="box">

        
        hello world
    </div>
    <div class="box" id="one">
        你好 世界
    </div>
</body>
2) 语法
    注释： /* 注释内容 */
    语法：
      选择器 {
        样式规则
      }
      .box {
        background-color:lightcoral;
        color: #fff;
        width: 300px;
        margin-bottom: 1em;
      }
3) 选择器
    1. 核心选择器
      id选择器      利用了html元素的id属性，唯一
        #one {}    选中id为one的元素
      class选择器   利用html元素的class属性，非唯一
        .box {}    选中class为box的元素
      标签选择器     利用标签名进行选择
        div {}     选中所有的div元素
      并且选择器
        div.box {} 选中div元素，并且这个div的class为box
      和选择器
        div,.box{} 选中div元素和class为box的元素
      普遍选择器
        * {}       选中所有元素
    2. 层次选择器( 两个选择器配合使用)
      子选择器    通过父元素选择子元素
        >
        .menu > li {}
      后代选择器
        空格
        .menu li {}
        <ul class="menu">
          <li></li>
          <li>
            <ul>
              <li></li>
              <li></li>
            </ul>
          </li>
        </ul>
      兄弟选择器
        ~ 当前元素之后的所有兄弟
        ul.rank > li:nth-child(2) ~ *{}
          第二个li之后的所有li
        + 当前元素之后的下一个兄弟
        ul.rank > li:nth-child(2) ~ *{}
          第三个li
    3. 属性选择器(属性过滤器)，一般应用在表单元素
      input[name]
        具有name属性input元素
      input[name='username']
        具有name属性，并且name属性值为username的input元素
      input[name^='u']
        具有name属性，并且name属性值以'u'作为开始
      input[name*='u']
        具有name属性，并且name属性值包含'u'
      input[name$='u']
        具有name属性，并且name属性值以'u'作为结尾
    4. 伪类选择器(伪类过滤器)
      :first-child
      :last-child
      :nth-child(n) 第n个孩子阶段

      :visited      访问过的
      :hover        光标悬浮上去
      :active       a标签
      :focus        聚焦
    5. 伪元素选择器
      ::after
      ul.menu::after {

      }
      在class为menu的ul元素中追加一个子元素
        <ul class="menu">
          <li>one</li>
          <li>two</li>
          ::after
        </ul>

      ul.menu::before {

      }
      在class为menu的ul元素中插入一个子元素
        <ul class="menu">
          ::before
          <li>one</li>
          <li>two</li>
        </ul>

4) 计算选择器优先级
    当多个选择器中的相同规则作用于同一个元素的时候，我们纠结到底这个元素上使用哪个规则的时候。

    1. 权重（积分）
      1000 style
      100   id
      10    class、伪类
      1     元素选择器、伪元素

      1+10 + 1 + 10 + 1+ 10 + 1
      ul.menu > li.menu_item > ul.sub_menu > li {
        color: lightcyan; /* 34*/
      }
      #introduce {
        color:lightcoral    /*100*/
      }

    2. 顺序（排名）
      当权重值相同的情况下，后者覆盖前者
    3. 特权（!important）
      脱离了权重和顺序规则

      .si {
        color: gray !important;
      }

5) 样式规则
    1. 字体规则
      可被继承
      font-family 字体
        字体栈 "Microsoft YaHei","宋体"
        在浏览器所在pc从字体栈顶到底寻找字体，找不到使用默认字体
      font-size   字体大小
        12px
      font-weight 字体粗细程度
        100~900
        bold
        bolder
      font-style 是否是斜体
        italic
        normal
      color       字体颜色
      line-height 行高
      长度的相对单位
        1px
        em    相对于当前元素上的字号
        rem   相对于根元素上的字号
      font 速写形式
      font: font-style font-weight font-size/line-height font-family
        font: normal normal 14px/1.2 '宋体','微软雅黑';
        font: 14px/1.2 '宋体','微软雅黑';

      网络字体(iconfont)
        应用
        分析实现过程
          @font-face {
            font-family:"iconfont"
            src:
          }

          .iconfont {
            font-family:"iconfont"
          }
          .icon-Backward-Button:before {
            content: "\e82e";
          }
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>字体规则</title>
  <style>
    html {
      font: normal normal 14px/1.2 '宋体','微软雅黑';
    }
    .one {
      background-color: lightpink;
      font-size: 12px;
      font-family: '宋体','Microsoft Yahei';
      font-weight: bolder;
      font-style: italic;
      color: #333;
      line-height: 3em;   /*3 * 12 = 36*/
      line-height: 3rem;   /*3 * 14 = 42*/
    }
  </style>
</head>
<body>
  <div class="one">我校获批教育部首批新文科研究与实践项目两项</div>
  <div class="two">我校荣获首届全国教材建设奖（本科）</div>
</body>
2. 文本规则
      text-align 文本在容器中显示方式
        center
      text-decoration-line:underline;
      text-decoration-style: double;
      text-decoration-color: lightsalmon;
      text-decoration: none;
      text-indent     缩进
      text-transform 控制大小写
      white-space：容器内的文本是否会主动换行
        nowrap 不换行
      overflow: 容器内的内容超出部分如何处理？
        hidden
      text-overflow: 文本超出部分如何显示提示？
        ellipsis '...'
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文本规则</title>
  <style>
    html {
      font: 14px/1.4 '宋体','微软雅黑';
      color: #333;
    }
    a {
      text-decoration:none;
      color: #333;
    }
    .one {
      text-align: center;
      text-decoration-line:line-through;
      text-decoration-style: double;
      text-decoration-color: lightsalmon;
    }
    .two {
      text-indent: 2em;
      text-shadow: 3px 3px 3px gray; 
    }
    .three {
      text-transform: capitalize;
    }
    .box {
      width: 300px;
      background-color: lightsalmon;

      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  </style>
</head>
<body>
  <div class="one">我校获批教育部首批新文科研究与实践项目两项</div>
  <div class="two">我校荣获首届全国教材建设奖（本科）</div>
  <div>
    <a href="https://www.baidu.com">百度一下</a>
  </div>
  <div class="three"> hello world </div>

  <div class="box">
    矿业工程学院成功举办2021年遥感综合实习专家报告会
  </div>
</body>
    3. 列表规则
      用于设置有序列表、无需列表、自定义列表的显示方式 ul、ol、dl
      list-style:none;

    4. 其他规则
      cursor:pointer;   鼠标悬浮：小手指
      visibility:hidden   显示或隐藏元素而不更改文档的布局
      opacity:0.2   不透明度
      display:none;
        改变元素的显示方式
        none
        block   将行内元素转换为块元素
        inline 将块元素转换为行内元素
        inline-block 行内块元素
          与其他行内元素共享一行空间
          可以指定宽高

      overflow:

          超出
        overflow-x,overflow-y速写
        overflow:hidden;
        overflow:scroll;
        overflow:auto;
        容器，容器的内容的大小超过容器本身
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>overflow</title>
    <style>




        .outer {
            width: 500px;
            height: 200px;
            background-color: indianred;
            background-repeat: no-repeat;
            margin: 0 auto;
            /* overflow: hidden; */
            /* overflow-x: hidden; */
            /* overflow-y: scroll; */
            overflow: auto;
        }

        .outer>.inner {
            width: 100px;
            height: 1000px;
            background-color: indigo;
            opacity: .6;
        }

        input:focus {
            border-color: hotpink;
            outline: none;
        }
    </style>
</head>

<body>
    <input type="text">
    <div class="outer">
        <div class="inner">
            hello
            <div style="height: 100;">
                world
            </div>
        </div>
    </div>
</body>
      outline
        外圈线框
      outline-color: pink;
      outline-width: 2px;
      outline-style: solid;
      outline-offset: 1px;
      outline:
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>其他</title>
    <style>
        .one {
            cursor: pointer;
        }

        .two,
        .three {
            width: 100px;
            height: 100px;
            margin-top: 10px;
        }

        .two {
            background-color: blue;
            display: block;
        }

        .three {
            background-color: green;
            opacity: 0.2;
        }

        .four {
            height: 20px;
            background-color: pink;
        }
        .five {
            background-color: #333;
            color: #fff;
        }
        .five>span{
            display: inline-block;
        }
        .five>span>:nth-child(1){
            background-color: #fff;
        }
    </style>
</head>

<body>
    <div class="one">hello world</div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five">
        <span>one</span>
        <span>two</span>
        <span>three</span>
    </div>
</body>
    5. 盒子规则
      盒子 - 块元素
      margin 外边距（盒子外边框距离其他元素的距离）
        margin: 10px;       上右下左
        margin: 10px 20px; 上下，左右
        margin: 10px 20px 30px;   上左右下
        margin: 10px 20px 30px 40px; 下右下左
        速写形式，外边距，上下外边距会进行重叠
        margin-top
        margin-right
        margin-bottom
        margin-left
      border 边框
        border-width
          border-top-width
          border-right-width
          border-bottom-width
          border-left-width
        border-style
          border-top-style
          border-right-style
          border-bottom-style
          border-left-style
        border-color
          border-top-color
          border-right-color
          border-bottom-color
          border-left-color
        border 速写
          border: 2px solid #ccc;
      padding 内边距(内容距离盒子内边框的距离)
        padding: 10px;       上右下左
        padding: 10px 20px; 上下，左右
        padding: 10px 20px 30px;   上左右下
        padding: 10px 20px 30px 40px; 下右下左
        速写形式，外边距，上下外边距会进行重叠
        padding-top
        padding-right
        padding-bottom
        padding-left
      width/height
        宽高
      box-sizing(盒子模式)
        内容盒子（普通盒子，默认盒子）
          content-box;
          盒子实际占据的宽度 2borderWidth + 2padding + width
          盒子实际占据的高度 2borderWidth + 2padding + height
        边框盒子（怪异盒子 ie低版本）
          border-box;
          盒子实际占据的宽度 :width
            width = 2borderWidth + 2padding + 内容宽
          盒子实际占据的高度 :height
      border-radius:2px
          外圆    300px
          内圆    200px
          期望内圆由200 变化到250，并且，中心点不变
      background
        background-color 背景颜色
        background-image 背景图片
        background-repeat 背景重复
        background-size 背景大小
        background-position 背景初始位置
        background-clip 背景可见区域
        background-orign 背景摆放参考
        background-attachment 视口固定方式（滚轮滚动视觉效果）
        background 速写形式
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>盒子模型</title>
  <style>
    html {
      font:12px/1 '宋体';
    }
    body {margin: 0;}
    .box {
      box-sizing: border-box;
      width: 300px;
      height: 300px;
      background-color: pink;
      
      /* border-width: 2px;
      border-color:rebeccapurple;
      border-style: solid; */
      border: 10px rebeccapurple dashed;

      padding-top: 10px;
      padding-left: 10px;
      padding-right: 10px;

      /* margin: 10px; */
      /* margin: 10px 20px 30px 40px; */
      /* margin: 10px 20px; */
      margin: 10px 20px 30px;
    }
  </style>
</head>
<body>
  <div class="box">盒子一般指的是块元素，盒子是我们布局的重要机制。一个盒子应该由外边距、边框、内边距、内容组成。</div>
  <div class="box">盒子2</div>
</body>
          6. 默认文档流（y轴）

           块元素，独占一行空间，高度由内容决定。块元素默认从上往下排列

6) 布局
    1. 浮动布局（x轴）
      float:left
      浮动元素：
        1) 脱离文档流
        2) 块元素的宽度不再是100%，由内容决定
        3) 块元素不再支撑其父元素
        4) 同一层次（兄弟关系）浮动元素会在一行排列，当浮动元素宽度总和大于父元素的时候会发生换行。
      clear
        清理浮动
        left 不与左浮动元素在同一水平线上
        right 不与右浮动元素在同一水平线上
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>浮动布局</title>
  <style>
    html { font: 12px '微软雅黑'; }
    body {margin: 0;}
    ul {margin: 0;padding: 0;list-style: none;}
    .wrapper {
      width: 1080px;
      margin: 0 auto;
    }
    .xpsf {
      background-color:mediumpurple;
    }
    .xpsf ul.p_list {
      background-color: #f4f4f4;
      display: flex;
      flex-direction: row;
      height: 100px;
      align-items: stretch;
      justify-content:space-around;
    }
    .xpsf ul.p_list > li {
      
    }
    .xpsf ul.p_list > li:nth-child(1) {
      background-color: mediumvioletred;
      flex-basis: 100px;  /*基本工资*/
      flex-grow: 1; /*分红，份*/
      flex-shrink: 1; /*亏钱，份*/
    }
    .xpsf ul.p_list > li:nth-child(2) {
      background-color: mistyrose;
      flex-basis: 100px;
      flex-grow: 1;
    }
    .xpsf ul.p_list > li:nth-child(3) {
      background-color: olivedrab;
      flex-grow: 2;
    }
    .xpsf ul.p_list > li:nth-child(4) {
      background-color: orangered;
      flex-grow: 2;
    }

    .rqtj {
      background-color:lightsalmon;
      height: 300px;
    }
    .jjsh {
      height: 300px;
      background-color: lightseagreen;
    }
  </style>
</head>
<body>
  
  <div class="container">
    
    <div class="xpsf">
      
      <div class="wrapper">
        <ul class="p_list">
          <li>one</li>
          <li>two</li>
          <li>three</li>
          <li>four</li>
        </ul>
      </div>
    </div>
    
    <div class="rqtj">
      <div class="wrapper">
        人气推荐
      </div>
    </div>
    
    <div class="jjsh">
      <div class="wrapper">
        居家生活
      </div>
    </div>
  </div>
</body>
    2. 伸缩盒布局（x轴）
      div.container > div
      ul.container > li
      1) 概念
        伸缩盒容器 div.container 、ul.container
        伸缩盒元素 div、li
        主轴    默认主轴x轴，伸缩盒中，伸缩盒子元素沿着主轴来进行排列
        交叉轴与主轴垂直的轴
      2) 规则
        伸缩盒容器
          display:flex;
            强制让它的子元素沿着主轴方向中显示，并且子元素不会脱离文档流，交叉轴上元素的高度如果没有指定，应该和父元素保持一致。
          flex-direction:row;
            定义主轴方向，row 表示主轴是x轴，column表示主轴为y轴
          flex-wrap:nowrap
            当子元素的长度加起来超过主轴上的父元素的宽度，默认不换行，
          align-items: stretch;
            定义伸缩盒容器中的子元素在交叉轴上的排列方式
          justify-content:space-around;
            定义伸缩盒容器中的子元素在主轴上的排列方式
        伸缩盒元素
          flex-basic:   主轴上的基础长度（基本工资）
          flex-grow:    主轴上剩余空间分配的份数（分红）
          flex-shrink: 主轴上亏损空间的分摊份数（亏损）
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>伸缩盒</title>
  <style>
    div.container {
      width: 500px;
      height: 300px;
      margin: 0 auto;
      background-color: #ccc;
      padding: .5em;

      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }
    div.container > div {
      /* flex-grow: 1; */
    }
    div.container > div:nth-child(1) {
      background-color: lightblue;
      flex-basis: 150px;
    }
    div.container > div:nth-child(2) {
      background-color: lightcoral;
      flex-basis: 150px;
    }
    div.container > div:nth-child(3) {
      background-color: lightgreen;
      flex-basis: 150px;
    }
    div.container > div:nth-child(4) {
      background-color: lightpink;
      flex-basis: 150px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
  </div>
</body>
    3. 定位布局(z轴)
      position:
        static 静态（默认、非定位元素）
        relative 相对（定位元素）
        absolute 绝对（定位元素）
        fixed     固定（定位元素）
        sticky    粘滞（定位元素）
      定位元素的特点: 可以使用定位规则。top right bottom left
      1) 相对定位
        1. 不脱离文档流
        2. 相对于它原来所在位置移动
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>相对定位</title>
  <style>
    body {
      margin: 0;
    }
    .one , .two{
      height: 100px;
    }
    .one {
      width: 500px;
      background-color: lightblue;
      opacity: .6;
      
      position: relative;
      top: 50px;
      left: 50px;
    }
    .two {
      width: 600px;
      background-color: lightcoral;
    }
  </style>
</head>
<body>
  <div class="one"></div>
  <div class="two"></div>
</body>
     2) 绝对定位
        1. 脱离文档流
        2. 相对于距离它最近的父定位元素位置移动！如果所有的父元素都不是定位元素，相对于浏览器视口位置移动
        一般情况下，绝对定位元素应该嵌套在相对定位元素内容来使用
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>绝对定位</title>
  <style>
    body {
      margin: 0;
    }
    .one , .two{
      height: 100px;
    }
    .one {
      width: 500px;
      background-color: lightblue;
      opacity: .6;
      
      position: absolute;
      left: 50px;
      top: 50px;
      
    }
    .two {
      width: 600px;
      background-color: lightcoral;
    }
  </style>
</head>
<body>
  <div class="one"></div>
  <div class="two"></div>
</body>
      3) 固定定位
        1. 脱离文档流
        2. 相对于浏览器视口进行定位
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>固定定位</title>
  <style>
    body {
      margin: 0;
      min-height: 5000px;
    }
    .one , .two{
      height: 100px;
    }
    .one {
      width: 500px;
      background-color: lightblue;
      opacity: .6;
      
      position: fixed;
      bottom: 10px;
      right: 10px;
    }
    .two {
      width: 600px;
      background-color: lightcoral;
    }
  </style>
</head>
<body>
  <div class="one"></div>
  <div class="two"></div>
</body>
      4) 粘滞定位
        1. 在没有达到阈值的时候是不脱离文档流（相对），达到阈值脱离文档流（固定）
        2. 通过left、top、right、bottom来设定阈值
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>粘滞定位</title>
  <style>
    body {
      margin: 0;
      min-height: 5000px;
    }
    .one , .two{
      height: 100px;
    }
    .one {
      width: 500px;
      background-color: lightblue;
    }
    .two {
      background-color: lightcoral;
      position: sticky;
      top: 0;
    }
    .three {
      background-color: limegreen;
      height: 50px;
      width: 80px;
    }
  </style>
</head>
<body>
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
  <div class="one"></div>
</body>
定位布局的应用：1. 二级栏目 2. 模态框 3. 特殊布局
1. 二级栏目
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>二级栏目</title>
  <style>
    html {
      font: 12px '微软雅黑';
    }
    body , ul {
      margin: 0;
      padding: 0;
    }
    ul {
      list-style: none;
    }
    .content {
      background-color: lightpink;
      height: 400px;
    }

    .header {
      position: relative;
    }
    .header ul.menu {
      background-color: lightseagreen;
      color: #fff;
      width: 1024px;
      margin: 0 auto ;
    }
    .header ul.menu::after {
      content: "";
      display: block;
      clear: both;
    }
    .header ul.menu >li.menu_item {
      float: left;
      line-height: 3em;
      text-align: center;
      width: 100px;
      cursor: pointer;
    }
    .header ul.menu >li.menu_item:hover > .sub_menu {
      display: block;
    }
    .header ul.menu .sub_menu {
      display: none;
      position: absolute;
      left: 0;
      height: 200px;
      width: 100%;
      background-color: rgb(163, 204, 238);
    }
  </style>
</head>
<body>
  <div class="header">
    <ul class="menu">
      <li class="menu_item">
        <span>首页</span>
        <div class="sub_menu">===</div>
      </li>
      <li class="menu_item">
        <span>居家生活</span>
        <div class="sub_menu">。。。</div>
      </li>
      <li class="menu_item">
        <span>服饰鞋包</span>
        <div class="sub_menu">。。。</div>
      </li>
      <li class="menu_item">
        <span>美食酒水</span>
        <div class="sub_menu"></div>
      </li>
      <li class="menu_item">
        <span>个护清洁</span>
        <div class="sub_menu"></div>
      </li>
    </ul>
  </div>
  <div class="content">

  </div>
</body>
2. 模态框
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>布局应用-模态框</title>
  <style>
    body {
      margin: 0;
    }
    
    .content {
      min-height: 5000px;
    }
    .dialog_container {
      display: none;
      position: fixed;
      width: 100%;
      top: 0;
      bottom: 0;
      background-color: rgb(0, 0, 0,.5);

    }
    .dialog_container .dialog {
      position: absolute;
      top: 100px;
      background-color: #fff;
      width: 400px;
      text-align: center;
      left: 50%;
      margin-left: -200px;
      min-height: 300px;
      border-radius: 5px;
    }
    .footer {
      line-height: 200px;
    }
    .container:hover > .dialog_container{
      display: block
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h2>网易严选</h2>
    </div>
    <div class="content"></div>
    <div class="footer">
      版权信息
    </div>

    <div class="dialog_container">
      <div class="dialog">
        <div class="dialog_header">关闭</div>
        <div class="dialog_content">二维码</div>
        <div class="dialog_footer">遇到问题？</div>
      </div>
    </div>

  </div>
</body>
        3. 特殊布局

7) 动画特效
    1. 动画
      设计师；美工；前端（实现）
      动态网站（具有动画错误！）是数据是动态的。

      1) 实现步骤
        1. 定义动画帧
          @keyframes 动画名{
            from {
              // 开始帧
            }
            to {
              // 结束帧
            }
          }

          @keyframes 动画名{
            0% {
              // 开始帧
            }
            20% {

            }
            ...
            100% {
              // 结束帧
            }
          }
        2. 设定动画（贺卡）
          animation-name: move;
            动画名
          animation-duration: 2s;
            持续时间
          animation-timing-function: linear;
            时间曲线函数（自由落体，贝塞尔曲线）
          animation-fill-mode:forwards;
            填充模式，动画结束后保留哪一帧规则
          animation-iteration-count: 2;
            动画迭代次数 infinite
          animation-direction: alternate-reverse;
            动画执行的方向 from->to , to->from
          animation-play-state: paused;
            动画状态
          animation-delay: 1s;
            延迟时间
          animation: move 2s 1s 2 linear;
            动画的速写形式
      2) 案例（呼吸灯）
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>呼吸灯</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        div{
            box-sizing: border-box;
        }
        .content{
            width: 400px;
            height: 600px;
            background-color: thistle;
            margin: 0 auto;
        }
        .content>.box{
            border: 1px solid tomato;
            height: 400px;
            padding: 40px;
            animation-name: outer;
            animation-duration: 5s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }
        .content>.box>.outer{
            border: 5px solid gold;
            height: 100%;
            padding: 20px;
            animation-name: inner;
            animation-duration: 5s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }
        .content>.box>.outer>.inner{
            border: 5px solid greenyellow;
            height: 100%;
        }
        .content>.box>.circle,
        .content>.box>.outer>.circle{
            border-radius: 50%;
        }
        @keyframes outer {
            25%{
                padding: 30px;
            }
            50%{
                padding: 40px;
            }
        }
        @keyframes inner {
            25%{
                padding: 30px;
            }
            50%{
                padding: 20px;
            }
            75%{
                padding: 30px;
            }
            100%{
                padding: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="box">
            <div class="outer circle">
                <div class="inner circle"></div>
            </div>
        </div>
    </div>
</body>
3) 案例（梦幻西游）
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>梦幻西游</title>
    <style>
        body,ul{
            margin: 0;
            padding: 0;
        }
        .main{
            width: 100%;
            overflow-x: hidden;
            height: 786px;
        }
        .main>.bg{
            width: 3920px;
            height: 100%;
            margin-left: -1920px;
            background-image: url("././images/bg.jpg");
            background-repeat: repeat-x;
            animation-name: bg;
            animation-duration: 30s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }
        @keyframes bg{
            from{
                margin-left: -1920px;
            }
            to{
                margin-left: 0px;
            }
        }
        .content{
            width: 950px;
            position: absolute;
            left: 50%;
            margin-left: -475px;
            bottom: 80px;
        }
        .content>ul::after{
            display: block;
            content: "";
            clear: both;
        }
        .content>ul>li{
            float: left;
            width: 200px;
            margin-right: 30px;
            overflow: hidden;
        }
        .content>ul>li>img{
            width: 1600px;
            animation-name: people;
            animation-duration: 1s;
            animation-timing-function: steps(8);
            animation-iteration-count: infinite;
        }
        @keyframes people{
            from{
                margin-left: 0;
            }
            to{
                margin-left: -1600px;
            }
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="bg">
        
        </div>
    </div>
    <div class="content">
        <ul>
            <li><img src="./images/wk.png" alt="悟空回花果山了"></li>
            <li><img src="./images/bj.png" alt="八戒睡着了"></li>
            <li><img src="./images/ts.png" alt="师傅被妖怪抓走啦"></li>
            <li><img src="./images/ss.png" alt="沙僧呢？"></li>
        </ul>
    </div>
</body>
    2. 动画库 animate.css
      动画帧、动画设定规则都有第三方完成，我们直接使用class即可
      1) 引入动画库
        <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.css">
      2) 使用
        1. 直接调用动画设定类
          <div class="box animate__animated animate__infinite animate__bounce"></div>
        2. 引用关键帧
          <style>
            .bounce {
              animation: flash 10s linear infinite;
            }
          </style>
          <div class="box bounce"></div>

    3. 过渡
      过渡是轻量级的动画，过渡中无需定义关键帧，它解决的问题是当属性改变的时候实行缓缓改变。一般通过伪类来触发。过渡一定发生在属性值改变上（状态发生变化的时候）
      transition-property: width;
        过渡属性，取值可以为多个，多个值通过逗号分割；关键字：all 所有属性
      transition-duration: 2s;
        过渡持续时间
      transition-delay: 0;
        过渡延迟时间
      transition-timing-function: linear;
        时间曲线函数
      transition:transform,background-color 2s,2s 0s linear;
        速写形式
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>过渡</title>
  <style>
    .box {
      width: 300px;
      height: 300px;
      background-color: lightcoral;
      cursor: pointer;
      margin: 100px auto;

      transition: transform,background-color 2s,2s 0s linear;
    }

    .box:hover {
      background-color: #f4f4f4;
      transform: scale(1.2);
      /* width: 600px; */
      /* transition-property: width;
      transition-duration: 2s;
      transition-delay: 0;
      transition-timing-function: linear; */
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
    4. 变形
      transform:变形函数
      1. 缩放
        scale(2)
      2. 平移
        translate(100px,50px)
      3. 旋转
        rotate(360deg)
      4. 拉伸
        skew(45deg)
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>变形</title>
  <style>
    .box {
      width: 300px;
      height: 300px;
      background-color: lightcoral;
      cursor: pointer;
      margin: 100px auto;
      transform-origin: top left;

      transition: transform 2s 0s linear;
    }

    .box:hover {
      /* transform: scale(1.2); */
      /* transform: translate(100px ,100px); */
      /* transform: skewY(45deg) */
      transform: rotate(45deg);
     
      /* width: 600px; */
      /* transition-property: width;
      transition-duration: 2s;
      transition-delay: 0;
      transition-timing-function: linear; */
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
8) 媒体查询（响应式布局）
    pc、 pad 、phone (中小型网页)
      一套网页(pc、pad、phone)

    网易严选（非响应式）
      pc 定宽
      mobile 响应式
    腾讯视频（半响应式）复杂，to-c
      pc (响应：4k 2k 1080p 普通) https://v.qq.com/
        1. 定宽？ 1190px (淘宝)
        2. 非定宽（响应 4k 2k 1080p 普通）
      mobile (响应)                https://m.v.qq.com/
    newbalance (全响应)中国、汇智网
      pc、mobile - 简单，小众
        https://www.newbalance.com.cn/
        https://www.newbalance.com.cn/

    黑话：
    to-C client    个人（抖音、淘宝、京东）互联网
    to-B business 企业级
    to-G 政府       学校/政府 - 监控终端、大屏、二手房交易网、健康码

    1. 如何实现
      1) 非响应式
        2套
          - pc
            1190px 宽度写死   400px 700px
          - mobile(响应式)
      2) 半响应式
          - pc（4k 2k 1080p 普通）
          - mobile(响应式) 宽度尽可能使用百分比
      3) 全响应式
          -pc、mobile (4k 2k 1080 普通 pad phone)
    2. 技术
      @media 判断媒体类型（屏幕类型）
      @media screen and (min-width:900px) and (max-width:1200px) {
        /* 当屏幕满足上述条件，执行该代码块内部的css*/
        .container {
          background-color: pink;
        }
      }
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>媒体查询</title>
  <style>
    body {margin: 0;}

    .container {
      background-color: lightblue;
      height: 100px;
    }
    /* 屏幕 900px ~ 1200px */
    @media screen and (min-width:900px) and (max-width:1200px) {
      .container {
        background-color: pink;
      }
    }
    /* 屏幕 > 1200px */
    @media screen and (min-width:1200px) {
      .container {
        background-color: teal;
      }
    }
  </style>
</head>
<body>
  <div class="container">

  </div>
</body>
    3. bootstrap中响应式
      <div class="row">
        <div class="col-sm-3"></div>
        <div class="col-sm-3"></div>
        <div class="col-sm-3"></div>
        <div class="col-sm-3"></div>
      </div>
      <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4"></div>
        <div class="col-md-4"></div>
      </div>
      <div class="row">
        <div class="col-lg-6"></div>
        <div class="col-lg-6"></div>
      </div>

9) 补充样式
    verticle-align 行内元素在垂直方向上的排列规则。这个规则只能应用于行内元素
    1. 前提
      盒子中存在多个行内元素
    2. 基线
      行内元素默认在基线上下排列
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>垂直居中</title>
  <style>
    .box {
      background-color:cornflowerblue;
      color: #fff;
      margin-bottom: 1em;
    }
  </style>
</head>
<body>
  <div class="box"> 
    <input type="text">
    <span>sphigx</span>
    <span>中国话</span>
    <button>按钮</button>
    <img src="../day08/images/cat.jpg" alt="">
  </div>

  <div class="box"> 
    <span>sphinx</span>
    <img src="../day08/images/cat.jpg" style="vertical-align: middle;" alt="" ">
  </div>

  <div class="box"> 
    <img src="../day08/images/cat.jpg" alt="" style="display: block;">
  </div>
  <div class="box" style="font-size: 0;"> 
    <img src="../day08/images/cat.jpg" alt=" ">
  </div>
</body>

        面试题：

        如何将一个文本在块元素进行水平居中？
          text-align:center
        如何将一个文本在块元素进行垂直居中？

         1 line-height   =   height

    2 vertical-align 是否为行内元素？
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>垂直</title>
    <style>
        .one {
            background-color: skyblue;
            color: #fff;
            height: 100px;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div class="one">hello world</div>
</body>
        盒子应该位于容器内部，容器通常情况下要比盒子大
              盒子在容器中水平居中?
        1) margin: 0 auto;
        2) 定位 margin-left:50%; left:-50px; position:relative;
        3)
              盒子在容器中垂直居中？
        2) 父元素padding, box-sizing:border-box
        2) 父元素padding + 子元素margin, box-sizing:border-box

        水平垂直居中：

                为⽗元素设定⼀个伪元素：：after,其⾼度为⽗元素的⾼度，display:inline-block,将其设定为vertical-align:middle即可撑开line box，同时line box的baseline为⽗元素⾼度⼀半的位置。然后设定⼦元素vertical-align:middle，即可实现居中。

          如何将一个块元素进行水平居中？【3种】

                通过margin、padding挤压
                通过相对定位、绝对定位
                通过flex布局display:flex   align-items:center