功能标签（功能元素）
    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

ps:最近课程学到vue结束，开始react。顺便过一过，总结一下前面的知识。

html后续及css相关推荐

  1. CSS 魔法：学海无涯，而吾生有涯

    非商业转载请注明作译者.出处,并保留本文的原始链接:http://www.ituring.com.cn/article/216538 图灵访谈非常有幸能邀请到"魔法哥",进行一期专 ...

  2. HTML与CSS笔记

    HTML与CSS笔记 一.HTML: IDE快捷键: tab:补全标签 ctrl+/:快速注释 常用标签: <h1.h2--h6:六级标题 <p:段落 <strong:粗体 < ...

  3. CSS入门七：列表样式（主要是列表前面序号的样式，圆圈、方框，罗马序号，图片等等）

    目录 1.列表样式的属性: ● 1.list-style-type:序号变成,空心圆.方框.数字,拉丁字母等等 ● 2.list-style-position:列表位置的"看起来像缩进的&q ...

  4. Day43 前端基础--html

    一,前端初识 Q1:前端是什么? 答:用户看到的页面就是前端工程的工作 web原理: #BS架构 2. Web的原理浏览器地址栏输入URL--> 浏览器往服务端发消息 --> 服务端接收消 ...

  5. HTML的BODY内标签介绍

    一.基本标签 <body><b>加粗</b><i>斜体</i><u>下划线</u><s>删除线</ ...

  6. Web前端开发笔记——第二章 HTML语言 第六节 区域标签、列表标签

    目录 一.区域标签 (一)div标签的定义 (二)div标签的属性 二.列表标签 (一)列表标签的定义 (二)列表标签的类型 1.有序列表 (1)有序列表的定义 (2)有序列表的属性 2.无序列表 ( ...

  7. 前端开发从入门到进阶完全指南，不用再迷茫前端要怎么学啦！

    我经常会看到很多同学在学习前端的时候比较迷茫,不知道到底应该以怎样的学习路线来入门和进阶前端领域.每次遇到这种问题我也会分享一下自己的学习经验,但是发现这是一个问得非常多的一个共性问题. 作为程序员, ...

  8. 2022-01-11总结（补）

    表格 表格标签 表格是实际开发中非常常用的标签: 1.表格的主要作用 表格主要用于显示.展示数据,因为它可以让数据显示的非常的规整,可读性非常好.特别是后台展示数据的时候,能够熟练运用表格就显得很重要 ...

  9. 柯伊玟导演作品《黑暗迷踪》顺利杀青

    2019年7月20日,悬疑推理电影<黑暗迷踪>在常德市桃花源风景区顺利杀青.这部电影由新锐导演柯伊玟亲自操刀导演.石欣监制.卯轩担任摄影指导:柯伊玟.朱宏.陆艺火.崔真真.董金龙.杨梓艺. ...

最新文章

  1. C# 是否可以将 动态或匿名类型 转成 强类型 ？
  2. 主成分分析碎石图_ISLR读书笔记十九：主成分分析（PCA）
  3. swift3.0 从相册选取或者拍照上传图片至阿里云OSS
  4. D3、EChart、HighChart绘图demol
  5. 树莓派外设、模块、传感器 —— 数码管（F3461BH）
  6. matlab滤除100hz,关于滤波器滤波的问题，要求滤除3000Hz以上，但滤除后只剩下1000Hz以内的...
  7. vuecli3 引入全局scss变量_利用scss公共库实现样式和业务组件解耦， 快速提高开发效率！...
  8. 西门子V90电机数字量输出（DO）接倍福数字量输入模块
  9. CCNA 测试题及答案 第一章
  10. 【STM32F429的DSP教程】第18章 DSP控制函数-更好用的SIN，COS计算
  11. php讲一个数组分割成字符串,PHP 分割字符串函数把字符串分割成数组示例
  12. 论文阅读：Neural Motifs: Scene Graph Parsing with Global Context
  13. ES3之cookie
  14. 即时通讯-Netty篇
  15. 项目：文件搜索助手（FileSeeker）
  16. C#按钮添加图片的解决
  17. 如何注册网站域名？需要注意哪些事项？
  18. ecshop订单总价币种汇率转换paypal付款
  19. 每天新老用户，日活，周活，月活的hive计算
  20. Photoshop 导入堆栈出错： 载入图层 无法合并智能对象文档。将跳过这些文档

热门文章

  1. Google退出中国损失的不止是搜索机会
  2. CLO如何在其软件结构中集成V-RAY
  3. 千兆以太网测试仪什么牌子好
  4. java integer long 转换_long（Long）与int（Integer）之间的转换
  5. 如何利用训练好的神经网络进行预测
  6. 传感器之方向：使用加速度传感器和地磁传感器共同实现
  7. 编译内核 解决 Gentoo 在 AUSU P5B SE 板载网卡 无法上网
  8. FlowForge 重要组件及概念
  9. 编程之美 1.2 中国象棋将帅问题
  10. 仿京东图片放大镜动效