第二弹：走进CSS世界，学习记录

大橙子房2024-05-06 21:24

目录

[1.1. 了解CSS](#1.1. 了解CSS)

[1.2. 放置CSS的几种方式](#1.2. 放置CSS的几种方式)

[1.3. CSS选择器](#1.3. CSS选择器)

[1.3.1. 基本选择器](#1.3.1. 基本选择器)

[1.3.2. 层级选择器](#1.3.2. 层级选择器)

[1.3.3. 属性选择器](#1.3.3. 属性选择器)

[1.3.4. 结构性伪类选择器](#1.3.4. 结构性伪类选择器)

[1.3.5. 状态伪类选择器](#1.3.5. 状态伪类选择器)

[1.3.6. 选择器优先级](#1.3.6. 选择器优先级)

[1.3.7. 文本属性](#1.3.7. 文本属性)

[1.3.8. 背景属性](#1.3.8. 背景属性)

[1.3.9. 尺寸属性](#1.3.9. 尺寸属性)

[1.3.10. 列表属性](#1.3.10. 列表属性)

[1.3.11. 定位属性](#1.3.11. 定位属性)

[1.3.12. calc 计算属性](#1.3.12. calc 计算属性)

[1.3.13. 布局属性](#1.3.13. 布局属性)

[1.3.14. 浮动属性](#1.3.14. 浮动属性)

[1.3.15. 浮动布局实战](#1.3.15. 浮动布局实战)

[1.3.16. 盒子模型](#1.3.16. 盒子模型)

[1.3.17. EWSHOP布局实战](#1.3.17. EWSHOP布局实战)

[1.3.18. 弹性盒模型](#1.3.18. 弹性盒模型)

[1.3.19. CSS3新增属性](#1.3.19. CSS3新增属性)

[1.3.20. 媒体查询](#1.3.20. 媒体查询)

1.1. 了解CSS

  • CSS层叠样式表 cascading style sheet

  • 作用：用于==增强控制网页样式==并且允许==样式信息与内容分离==的一种标记性语言

  • CSS不需要编译，可由浏览器直接解析

  • CSS3是目前被使用最广泛的版本，但是部分特性尚不能得到支持

  • CSS的基本语法

    • CSS定义分别由：选择符、属性、属性取值组成

    • 格式：

      p{color:yellowgreen}

    • CSS大小写不敏感，推荐使用小写。

    • 属性和值之间用冒号(:)分开，多个属性之间用分号(;)隔开

  • CSS中的注释

    /*书写注释的内容*/

1.2. 放置CSS的几种方式

  1. 内联样式表(行内引用)

    <p style=""></p>
    • 内联的样式比其它方式更加灵活，但是需要和展示的内容混在一起，内联样式会失去样式表的优点。

  2. 内嵌样式表(内部引用)

    <!DOCTYPE html>
<html>
  <head>
    <style></style>
  </head>
</html>
    • 适用于一个HTML文档具有独一无二的样式时。

  3. 外联样式表(外部引用)

    <!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="文件地址" />
  </head>
</html>

<!--了解-->
<style>
      @import "CSS文件地址"
</style>
    • 外部样式引用了外接的CSS文件。一般浏览器有缓存的功能所以用户不用每次都下载此CSS文件，并且外部引用相对于内部和内联来说高效的是节省带宽，外部引用是W3C推荐使用的标准。

  4. 多重样式表的叠加

    • 依照后定义的优先，所以优先级最高的是内联样式。连入的外部样式和内部样式表之间是最后定义的优先级高。

    • 案例

      <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>放置CSS的几种方式</title>
        <link rel="stylesheet" href="./style.css" />

        <style>
            /*@import "./style.css";*/
            #one{
                background-color:tomato;
                color:#fff;
                font-size:50px;
            }
        </style>
        <style>
            /*@import "style.css";*/
        </style>
    </head>
    <body>
        <p>女孩子最喜欢西游记里面的哪个人物？猪八戒</p>
        <p>女孩子最喜欢西游记里面的哪个人物？猪八戒</p>
        <p>女孩子最喜欢西游记里面的哪个人物？猪八戒</p>
        <p style="background-color:blue;color:white">女孩子最喜欢西游记里面的哪个人物？猪八戒</p>
        <div>唐僧喜欢哪个女孩子只有白龙马知道</div>
        <div id="one" style="font-size:100px">唐僧喜欢哪个女孩子只有白龙马知道</div>
        <div id="two">唐僧喜欢哪个女孩子只有白龙马知道</div>
        <div>唐僧喜欢哪个女孩子只有白龙马知道</div>
    </body>
</html>

      • style.css文件

        #two{
        background-color:yellow;
        color:pink;
        }
        #one{
        font-size:200px;
        color:#000;
        }

1.3. CSS选择器

1.3.1. 基本选择器

  • 类选择器(class选择器)

    • 在css中使用(.)来查找，类选择器可以有多个属性值，使用空格分开即可。

      • 案例：

        <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本选择器</title> <style> /*CSS区间 写CSS代码*/ /*查找class选择器*/ .one{ background-color:tomato; } .two{ color:#fff; } 
              </style>
  </head>
  <body>

              <div class="one">我是第一个div元素</div>
      <div class="one two">我是第二个div元素</div>
  </body>
        </html> `

  • 唯一选择器(ID选择器)

    • 在CSS中使用(#)来查找。

      • 案例

        <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本选择器ID选择器</title> <style> /*CSS区间 写CSS代码*/ /*查找id选择器 #*/ #one{ background-color: fuchsia; } #one_two{ background-color:pink; } </style> </head> <body>
        我是第三个元素 我设置的属性是id属性
        我是第四个元素 我设置的属性是id属性
        </body> </html>

  • 通配符选择器(*)

    • 匹配所有标签

      • 案例

        <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本选择器-通配符选择器</title> <style> /*CSS区间 写CSS代码*/ /*通配符选择器*/ *{ font-size:30px; } 
              </style>
  </head>
  <body>
      <div class="one">我是第一个div元素</div>
      <div class="one two">我是第二个div元素</div>
      <div id="one">我是第三个元素 我设置的属性是id属性</div>
      <div id="one_two">我是第四个元素 我设置的属性是id属性</div>
      <p>我是p标签</p>
      <a href="">我是a标签</a>
      <ul>
          <li>我是无序列表</li>
      </ul>
      <ol>
          <li>我是有序列表</li>
      </ol>
  </body>
        </html>

  • tagName标签选择器

    • 根据HTML标签名来选择对应的标签，此时在页面中出现的所有该标签都会被选择。

      • 案例：

        <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本选择器</title> <style> /*CSS区间 写CSS代码*/ /*查找class选择器*/ /*标签选择器*/ div{ background-color:blue; } li{ background-color:tomato; } </style> </head> <body>
        我是第一个div元素
        我是第二个div元素
        我是第三个元素 我设置的属性是id属性
        我是第四个元素 我设置的属性是id属性

        我是p标签

        我是a标签
        • 我是无序列表
        1. 我是有序列表
        </body> </html>

1.3.2. 层级选择器

  • 组合选择器：选择器1,选择器2 多个选择器之间用逗号分隔。例：div,p

    • 案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>层级选择器-组合选择选择器</title> <style> 
                /*.one{*/
          /*    background-color:tomato;*/
          /*}*/
          /*p{*/
          /*    background-color:tomato;*/
          /*}*/
          /*.two{}*/
           /*组合选择器*/
          .one,p,.two{
              background-color:tomato;
          }
      </style>
  </head>
  <body>
      <div class="one">我是div元素</div>
      <p>我是P元素</p>
      <p>我是第二个p元素</p>
      <div>我是第二个div元素</div>
      <a href="" class="two">我是a</a>
  </body>
      </html>

  • 包含选择器：选择器1 选择器2 表示选择器2被选择器1包含即可。例：div p

    • 案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>层级选择器-包含选择器</title> <style> /*包含选择器*/ div p{ background-color:red; } </style> </head> <body>

      我是div中的p

      我是div中section里面所包含的p标签

      </body> </html>

  • 子选择器：选择器1 > 选择器2 表示选择器1的子元素为选择器2(只有父子关系才可以)。例：div > p

    • 案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>层级选择器-子代选择器</title> <style> /*子代选择器*/ div>p{ background-color:tomato; } </style> </head> <body>

      我是div中的p

      我是div中section里面所包含的p标签

      我是div中div里面的p元素

      </body> </html>

  • 相邻选择器：选择器1 + 选择器2 表示选择紧贴在选择器1之后的选择器2元素。例 div + p

    • 案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>层级选择器-相邻选择器</title> <style> /*相邻选择器*/ div + p{ background-color:pink; } </style> </head> <body>
      我是div元素

      我是P元素

      我是第二个p元素

      我是第二个div元素
      我是a

      我是div中的p

      我是div中section里面所包含的p标签

      我是div之后的p元素

      我是div中div里面的p元素

      我是div之后的a

      我是a后面的p元素

      </body> </html>

  • 兄弟选择器：选择器1 ~ 选择器2 表示选择器1后面的所有兄弟元素选择器2。 例 div ~ p

  • ~ shift+键盘1键盘的那个键

    • 案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>层级选择器-兄弟选择器</title> <style> /*兄弟选择器*/ div ~ p { background-color:red; } </style> </head> <body>
      我是div元素

      我是P元素

      我是第二个p元素

      我是第二个div元素
      我是a

      我是div中的p

      我是div中section里面所包含的p标签

      我是div之后的p元素

      我是div中div里面的p元素

      我是div之后的a

      我是a后面的p元素

      </body> </html>

1.3.3. 属性选择器

  • 属性选择器就是根据属性名或者属性值来查找到某个元素

  • E element元素标签 ATT attribute 属性 VAL value 值

  • 标签[属性]

    1. E[ATT] 匹配所有具有ATT属性的E元素，不考虑属性值。

      • 案例

        <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性选择器</title> <style> /*E[ATT] 匹配所有具有ATT属性的E元素*/ /*p[title]{*/ /* background-color:red;*/ /*}*/ [title]{ background-color: tomato; } </style> </head> <body>

        我是一个P标签

        我是第二个P标签

        我是第三个P标签

        我是a标签

        我是最后一个P标签

        </body> </html>

    2. E[ATT = VAL] 匹配所有ATT属性等于VAL的E元素。

      • 案例
      html 复制代码 
      <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>属性选择器</title>
        <style>
            /*E[ATT = VAL] 匹配所有ATT属性等于VAL的E元素。*/
            [title = "this is a test"]{
                background-color: red;
            }
        </style>
    </head>
    <body>
        <p title="this is a test">我是一个P标签</p>
        <p title="this is a test">我是第二个P标签</p>
        <p title="this">我是第三个P标签</p>
        <a href="" title="this is a test">我是a标签</a>
        <p index="1000">我是最后一个P标签</p>
        <span title="this is a test">我是span标签</span>
    </body>
</html>

    3. E[ATT ~= VAL] 匹配所有ATT属性具有多个空格分隔的值，其中一个值等于VAL的E元素。

      • 案例
      html 复制代码 
      <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>属性选择器</title>
        <style>
            /*E[ATT ~= VAL] 匹配所有ATT属性具有多个空格分隔的值，其中一个值等于VAL的E元素。*/
            p[title ~= 'is']{
                background-color:blue;
            }
        </style>
    </head>
    <body>
        <p title="this is a test">我是一个P标签</p>
        <p title="this is a test">我是第二个P标签</p>
        <p title="this">我是第三个P标签</p>
        <a href="" title="this is a test">我是a标签</a>
        <p index="1000">我是最后一个P标签</p>
        <span title="this is a test">我是span标签</span>
    </body>
</html>

    4. E[ATT |= VAL] 匹配所有的ATT属性具有多个连接分隔符的值，其中一个值以val-开头的E元素，主要用于lang属性。比如：'en-us','en-gb'（了解）。

      • 案例
      html 复制代码 
      <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>属性选择器</title>
        <style>
            /*E[ATT |= VAL] 匹配所有的ATT属性具有多个连接分隔符的值，其中一个值以val-开头的E元素*/
            p[title |= this]{
                background-color: fuchsia;
            }
        </style>
    </head>
    <body>
        <p title="this is a test">我是一个P标签</p>
        <p title="this is a test">我是第二个P标签</p>
        <p title="this">我是第三个P标签</p>
        <a href="" title="this is a test">我是a标签</a>
        <p index="1000">我是最后一个P标签</p>
        <p title="this-is-a-test">我是新增的P</p>
        <span title="this is a test">我是span标签</span>
    </body>
</html>

    5. E[ATT ^= VAL]属性ATT的值以VAL开头的E元素。

      • ^ 英文状态下shift + 6

      • 案例

      html 复制代码 
      <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>属性选择器</title>
        <style>
            /*E[ATT ^= VAL]属性ATT的值以VAL开头的E元素。*/
            p[title ^= 't']{
                background-color:pink;
            }
        </style>
    </head>
    <body>
        <p title="this is a test">我是一个P标签</p>
        <p title="this is a test">我是第二个P标签</p>
        <p title="this">我是第三个P标签</p>
        <a href="" title="this is a test">我是a标签</a>
        <p index="1000">我是最后一个P标签</p>
        <p title="this-is-a-test">我是新增的P</p>
        <span title="this is a test">我是span标签</span>
    </body>
</html>

    6. E[ATT $= VAL] 属性ATT的值以VAL结尾的E元素。

      • $ 英文状态下shift + 4

      • 案例

      html 复制代码 
      <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>属性选择器</title>
        <style>
            /*E[ATT $= VAL] 属性ATT的值以VAL结尾的E元素。*/
            p[title $= 's']{
                background-color: fuchsia;
            }
        </style>
    </head>
    <body>
        <p title="this is a test">我是一个P标签</p>
        <p title="this is a test">我是第二个P标签</p>
        <p title="this">我是第三个P标签</p>
        <a href="" title="this is a test">我是a标签</a>
        <p index="1000">我是最后一个P标签</p>
        <p title="this-is-a-test">我是新增的P</p>
        <span title="this is a test">我是span标签</span>
    </body>
</html>

    7. E[ATT *= VAL] 属性ATT的值中有VAL存在的E元素。

      • 案例
      html 复制代码 
      <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>属性选择器</title>
        <style>
            /*E[ATT *= VAL] 属性ATT的值中有VAL存在的E元素。*/
            p[title *= 'a']{
                background-color:tomato;
            }
        </style>
    </head>
    <body>
        <p title="this is a test">我是一个P标签</p>
        <p title="this is a test">我是第二个P标签</p>
        <p title="this">我是第三个P标签</p>
        <a href="" title="this is a test">我是a标签</a>
        <p index="1000">我是最后一个P标签</p>
        <p title="this-is-a-test">我是新增的P</p>
        <span title="this is a test">我是span标签</span>
    </body>
</html>

1.3.4. 结构性伪类选择器

  • 伪元素选择器(不是对真正的元素选择)

    1. E:first-line E元素的第一行。

      • 案例

        <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪元素选择器</title> <style> /*E:first-line E元素的第一行*/ p:first-line{ background-color: tomato; } </style> </head> <body>

        我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签
        我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签 我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签 我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签 我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签 我是P标签我是P标签我是P标签我是P标签

        </body> </html>

    2. E:first-letter E元素的第一个字母。

      • 案例
      html 复制代码 
      <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>伪元素选择器</title>
        <style>
            /*E:first-letter E元素的第一个字母。*/
            p:first-letter{
                font-size:50px;
            }
        </style>
    </head>
    <body>
        <p>
            我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签 <br>
            我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签
            我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签
            我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签
            我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签
            我是P标签我是P标签我是P标签我是P标签
        </p>
    </body>
</html>

    3. E:before E元素的内容之前。

      • 案例
      html 复制代码 
      <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>伪元素选择器</title>
        <style>
            /*E:before E元素的内容之前。*/
            div:before{
                content: '小母牛';
                font-size:100px;
                color:tomato;
            }
        </style>
    </head>
    <body>
        <div>迎风劈叉</div>
    </body>
</html>

    4. E:after E元素的内容之后。

      • 案例
      html 复制代码 
      <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>伪元素选择器</title>
        <style>
            /*E:after E元素的内容之后。*/
            div:after{
                font-size:100px;
                content: '->凉快';
                color:purple;
            }
        </style>
    </head>
    <body>
        <div>迎风劈叉</div>
    </body>
</html>

      注意：在使用before或者after时，一定要配合content属性一起来使用

  • 结构性伪类选择器

    • 在CSS中引入的结构性伪类选择器的共同特征是允许开发者根据文档树中的结构来指定元素的样式

      • 四个最基本的结构性伪类选择器

        1. :root 将样式绑定到页面的根元素。

          • 案例

            <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>四个最基本的结构伪类选择器</title> <style> /*:root 将样式绑定到页面的根元素。*/ :root{ /*background-color:#000;*/ /*声明变量*/ --bgColor:#ccc; --fontColor:#000; } body{ /*var() 使用变量*/ background-color: var(--bgColor); } p{ color:var(--fontColor) } </style> </head> <body>

            我是P标签中的文字颜色

            </body> </html>

            1. E:not() 对某个结构元素使用样式，但是想排除这个元素下的某个子结构元素。

              • 案例
              html 复制代码 
              <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>四个最基本的结构伪类选择器</title>
        <style>
            /*E:not() 对某个结构元素使用样式，但是想排除这个元素下的某个子结构元素。*/
            /*li{*/
            /*    background-color:tomato;*/
            /*}*/
            /*.one{*/
            /*    background-color: tomato;*/
            /*}*/
            li:not(.two){
                background-color: tomato;
            }
        </style>
    </head>
    <body>
        <ol>
            <li class="one">我是第一行有序列表</li>
            <li class="one">我是第二行有序列表</li>
            <li class="two">我是第三行有序列表</li>
            <li class="one">我是第四行有序列表</li>
            <li class="one">我是第五行有序列表</li>
        </ol>
    </body>
</html>

            2. E:empty 匹配所有为空的E元素。

              • 案例
              html 复制代码 
              <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>四个最基本的结构伪类选择器</title>
        <style>
            /*E:empty 匹配所有为空的E元素。*/
            li:empty{
                background-color: tomato;
            }
        </style>
    </head>
    <body>
        <ol>
            <li class="one">我是第一行有序列表</li>
            <li></li>
            <li class="one">我是第二行有序列表</li>
            <li></li>
            <li class="two">我是第三行有序列表</li>
            <li></li>
            <li class="one">我是第四行有序列表</li>
            <li></li>
            <li class="one">我是第五行有序列表</li>
        </ol>
    </body>
</html>

            3. :target 代表链接到目标时。（a标签）

              • 案例
              html 复制代码 
              <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>四个最基本的结构伪类选择器</title>
        <style>
            /*:target 代表链接到目标时。（a标签）*/
           a:target{
                font-size:50px;
                font-weight: bold;
                color:tomato;
            }
        </style>
    </head>
    <body>
        <a href="#ly">摸柳岩</a>
        <a href="#ty">摸唐嫣</a>
        <ol>
            <li class="one">我是第一行有序列表</li>
            <li></li>
            <li class="one">我是第二行有序列表</li>
            <li></li>
            <li class="two">我是第三行有序列表</li>
            <li></li>
            <li class="one">我是第四行有序列表</li>
            <li></li>
            <li class="one">我是第五行有序列表</li>
        </ol>
        <a id="ly">柳岩</a>
        <a id="ty">唐嫣</a>
    </body>
</html>
        • 其他的结构伪类选择器

          • E:first-child 对一个父元素中的第一个子元素E设置样式。

            • 案例
            html 复制代码 
            <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>其它的结构伪类选择器</title>
        <style>
            /*E:first-child 对一个父元素中的第一个子元素E设置样式。*/
            li:first-child{
                background-color: tomato;
            }
        </style>
    </head>
    <body>
        <ol>
            <li>风筝大剑五只鸟->寒冰</li>
            <li>卖萌蘑菇快点跑->提莫</li>
            <li>国王三刀真五秒->蛮王</li>
            <li>我还是有序列表项一</li>
            <li>我还是有序列表项二</li>
            <li>我还是有序列表项三</li>
            <li>我还是有序列表项四</li>
            <li>我还是有序列表项五</li>
        </ol>
    </body>
</html>

          • E:last-child 对一个父元素中的最后一个子元素E设置样式。

            • 案例
            html 复制代码 
            <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>其它的结构伪类选择器</title>
        <style>
            /*E:last-child 对一个父元素中的最后一个子元素E设置样式。*/
            li:last-child{
                background-color: tomato;
            }
        </style>
    </head>
    <body>
        <ol>
            <li>风筝大剑五只鸟->寒冰</li>
            <li>卖萌蘑菇快点跑->提莫</li>
            <li>国王三刀真五秒->蛮王</li>
            <li>我还是有序列表项一</li>
            <li>我还是有序列表项二</li>
            <li>我还是有序列表项三</li>
            <li>我还是有序列表项四</li>
            <li>我还是有序列表项五</li>
            <li>我还是有序列表项六</li>
        </ol>
    </body>
</html>

          • E:nth-child(n) 对指定需要的子元素E设置样式。

            • 案例
            html 复制代码 
            <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>其它的结构伪类选择器</title>
        <style>
            /*E:nth-child(n) 对指定需要的子元素E设置样式。*/
            li:nth-child(8){
                background-color: tomato;
            }
        </style>
    </head>
    <body>
        <ol>
            <li>风筝大剑五只鸟->寒冰</li>
            <li>卖萌蘑菇快点跑->提莫</li>
            <li>国王三刀真五秒->蛮王</li>
            <li>我还是有序列表项一</li>
            <li>我还是有序列表项二</li>
            <li>我还是有序列表项三</li>
            <li>我还是有序列表项四</li>
            <li>我还是有序列表项五</li>
            <li>我还是有序列表项六</li>
        </ol>
    </body>
</html>

          • E:nth-last-child() 对指定需要的子元素E设置样式。（倒序）

            • 案例
            html 复制代码 
            <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>其它的结构伪类选择器</title>
        <style>
            /*E:nth-last-child() 对指定需要的子元素E设置样式。（倒序）*/
            li:nth-last-child(3){
                background-color: tomato;
            }
        </style>
    </head>
    <body>
        <ol>
            <li>风筝大剑五只鸟->寒冰</li>
            <li>卖萌蘑菇快点跑->提莫</li>
            <li>国王三刀真五秒->蛮王</li>
            <li>我还是有序列表项一</li>
            <li>我还是有序列表项二</li>
            <li>我还是有序列表项三</li>
            <li>我还是有序列表项四</li>
            <li>我还是有序列表项五</li>
            <li>我还是有序列表项六</li>
        </ol>
    </body>
</html>

          • E:nth-of-type() 与:nth-child()作用类似，但是仅匹配使用的同种标签元素。

            • 案例
            html 复制代码 
            <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>其它的结构伪类选择器</title>
        <style>
            /*E:nth-of-type() 与:nth-child()作用类似，但是仅匹配使用的同种标签元素。*/
            /*不会匹配到*/
            li:nth-child(5){
                background-color: tomato;
            }
            /*仅匹配使用的同种标签元素*/
            li:nth-of-type(5){
                background-color: fuchsia;
            }
        </style>
    </head>
    <body>
        <ol>
            <li>风筝大剑五只鸟->寒冰</li>
            <li>卖萌蘑菇快点跑->提莫</li>
            <li>国王三刀真五秒->蛮王</li>
            <li>我还是有序列表项一</li>
            <p>我是列表标签里面放的其它标签</p>
            <li>我还是有序列表项二</li>
            <li>我还是有序列表项三</li>
            <li>我还是有序列表项四</li>
            <li>我还是有序列表项五</li>
            <li>我还是有序列表项六</li>
        </ol>
    </body>
</html>

          • E:nth-last-of-type() 与:nth-last-child()作用类似，但是仅匹配使用的同种标签(倒叙)

            • 案例
            html 复制代码 
            <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>其它的结构伪类选择器</title>
        <style>
            /*E:nth-last-of-type() 与:nth-last-child()作用类似，但是仅匹配使用的同种标签*/
            li:nth-last-of-type(6){
                background-color: tomato;
            }
        </style>
    </head>
    <body>
        <ol>
            <li>风筝大剑五只鸟->寒冰</li>
            <li>卖萌蘑菇快点跑->提莫</li>
            <li>国王三刀真五秒->蛮王</li>
            <li>我还是有序列表项一</li>
            <p>我是列表标签里面放的其它标签</p>
            <li>我还是有序列表项二</li>
            <li>我还是有序列表项三</li>
            <li>我还是有序列表项四</li>
            <li>我还是有序列表项五</li>
            <li>我还是有序列表项六</li>
        </ol>
    </body>
</html>

          • E:nth-child(an+b)循环设置样式

            • a 表示每次循环中间隔几个改变样式。
            • b 表示指定在循环中开始的位置。
            • 案例
            html 复制代码 
            <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>其它的结构伪类选择器</title>
        <style>
           /*E:nth-child(an+b)循环设置样式*/
            /*li:nth-child(2n+1){*/
            /*    background-color: tomato;*/
            /*}*/
            li:nth-of-type(2n+1){
                background-color: tomato;
            }
        </style>
    </head>
    <body>
        <ol>
            <li>风筝大剑五只鸟->寒冰</li>
            <li>卖萌蘑菇快点跑->提莫</li>
            <li>国王三刀真五秒->蛮王</li>
            <li>我还是有序列表项一</li>
            <p>我是列表标签里面放的其它标签</p>
            <li>我还是有序列表项二</li>
            <li>我还是有序列表项三</li>
            <li>我还是有序列表项四</li>
            <li>我还是有序列表项五</li>
            <li>我还是有序列表项六</li>
        </ol>
    </body>
</html>

          • E:only-child 匹配父元素下仅有一个子元素，并且该子元素为E元素。

            • 案例
            html 复制代码 
            <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>其它的结构伪类选择器</title>
        <style>
            /*E:only-child 匹配父元素下仅有一个子元素，并且该子元素为E元素。*/
            p:only-child{
                background-color: tomato;
            }
        </style>
    </head>
    <body>
        <div>
            <p>我是div中的p</p>
        </div>
        <div>
            <p>我是第二个div中的第一个P</p>
            <b>我是第二个div中的第一个B</b>
        </div>
        <div>
            <p>我是第三个div中的第一个P</p>
            <p>我是第三个div中的第二个P</p>
        </div>
    </body>
</html>

          • E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素E。

            • 案例
            html 复制代码 
            <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>其它的结构伪类选择器</title>
        <style>
           /*E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素E。*/
            p:only-of-type{
                background-color: tomato;
            }
        </style>
    </head>
    <body>
        <div>
            <p>我是div中的p</p>
        </div>
        <div>
            <p>我是第二个div中的第一个P</p>
            <b>我是第二个div中的第一个B</b>
        </div>
        <div>
            <p>我是第三个div中的第一个P</p>
            <p>我是第三个div中的第二个P</p>
        </div>
    </body>
</html>

          • E:enabled 匹配表单中激活的元素(只要没有disabled都是激活的)

            • 案例
            html 复制代码 
            <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>其它的结构伪类选择器-表单相关</title>
        <style>
            /*E:enabled 匹配表单中激活的元素*/
            input:enabled{
                background-color: tomato;
            }
        </style>
    </head>
    <body>
        <form action="" method="get">
            <input type="text" name="user" value="admin" />
            <br>
            <input type="text" readonly name="user1" value="admin1" />
            <br>
            <input type="text" disabled name="user2" value="admin2" />
        </form>
    </body>
</html>

          • E:disabled 匹配表单中未激活的元素。(有disabled属性)

            • 案例
            html 复制代码 
            <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>其它的结构伪类选择器-表单相关</title>
        <style>
            /*E:disabled 匹配表单中未激活的元素。(有disabled属性)*/
            input:disabled{
                background-color: tomato;
                color:#fff;
            }
        </style>
    </head>
    <body>
        <form action="" method="get">
            <input type="text" name="user" value="admin" />
            <br>
            <input type="text" readonly name="user1" value="admin1" />
            <br>
            <input type="text" disabled name="user2" value="admin2" />
        </form>
    </body>
</html>

          • E:checked 匹配表单中被选择的radio或者checkbox元素。

            • 案例
            html 复制代码 
            <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>其它的结构伪类选择器-表单相关</title>
        <style>
            /*E:checked 匹配表单中被选择的radio或者checkbox元素。*/
            /*input:checked{*/
            /*    width: 100px;*/
            /*    height: 100px;*/
            /*}*/
            input[type=radio]:checked+label{
                font-size:20px;
                font-weight: bold;
            }
            input[type=checkbox]:checked+label{
                color:tomato;
            }
        </style>
    </head>
    <body>
        <form action="" method="get">
            <input type="radio" name="sex" value="0" id="nv"><label for="nv">女</label>
            <input type="radio" name="sex" value="1" id="nan"><label for="nan">男</label>
            <input type="radio" name="sex" value="2" id="baomi"><label for="baomi">保密</label>
            <hr>
            <input type="checkbox" name="hobby[]" value="0" id="one"><label for="one">混球</label>
            <input type="checkbox" name="hobby[]" value="1" id="two"><label for="two">足球</label>
            <input type="checkbox" name="hobby[]" value="2" id="three"><label for="three">篮球</label>
        </form>
    </body>
</html>

          • :focus 设置元素在其获取鼠标焦点的样式。(只有输入域有效)

            • 案例
            html 复制代码 
            <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>其它的结构伪类选择器-表单相关</title>
        <style>
            /*:focus 设置元素在其获取鼠标焦点的样式。*/
            input:focus{
                background-color: tomato;
                color:#fff;
            }
        </style>
    </head>
    <body>
        <form action="" method="get">
            <input type="text" name="user" value="admin5" />
            <br>
            <input type="text" name="user" value="admin4" />
            <br>
            <input type="text" name="user" value="admin3" />
            <br>
            <input type="text" name="user" value="admin2" />
            <br>
            <input type="text" readonly name="user1" value="admin1" />
            <br>
            <input type="text" disabled name="user2" value="admin2" />
        </form>
    </body>
</html>

          • ::selection 匹配用户当前选中的元素(了解)。

            • 案例
            html 复制代码 
            <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>其它的结构伪类选择器-表单相关</title>
        <style>
            /*::selection 匹配用户当前选中的元素(了解)。*/
            div::selection{
                background-color: tomato;
                color: white;
            }
        </style>
    </head>
    <body>
        <form action="" method="get">
            <input type="text" name="user" value="admin5" />
            <br>
            <input type="text" name="user" value="admin4" />
            <br>
            <input type="text" name="user" value="admin3" />
            <br>
            <input type="text" name="user" value="admin2" />
            <br>
            <input type="text" readonly name="user1" value="admin1" />
            <br>
            <input type="text" disabled name="user2" value="admin2" />
            <hr>
            <input type="radio" name="sex" value="0" id="nv"><label for="nv">女</label>
            <input type="radio" name="sex" value="1" id="nan"><label for="nan">男</label>
            <input type="radio" name="sex" value="2" id="baomi"><label for="baomi">保密</label>
            <hr>
            <input type="checkbox" name="hobby[]" value="0" id="one"><label for="one">混球</label>
            <input type="checkbox" name="hobby[]" value="1" id="two"><label for="two">足球</label>
            <input type="checkbox" name="hobby[]" value="2" id="three"><label for="three">篮球</label>
        </form>
        <div>
            我是div中的内容
        </div>
    </body>
</html>

1.3.5. 状态伪类选择器

  1. :link 设置超链接a在未被访问前的样式。

  2. :visited 设置超链接a在其链接地址已经被访问的样式。

  3. :hover 设置元素在鼠标悬停时的样式。(重点)

  4. :active 设置元素在被用户激活时的样式。

    • 案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>状态伪类选择器</title> <style> /*1. :link 设置超链接a在未被访问前的样式。*/ a:link{ color:red; } /*2. :visited 设置超链接a在其链接地址已经被访问的样式。*/ a:visited{ color:blue; } /*3. :hover 设置元素在鼠标悬停时的样式。(重点)*/ a:hover{ color:green; } /*4. :active 设置元素在被用户激活时的样式。*/ a:active{ color:purple; } li:hover{ background-color: tomato; } </style> </head> <body> 去360
      • aaaaaaaaaaaaaa
      • aaaaaaaaaaaaaa
      • aaaaaaaaaaaaaa
      • aaaaaaaaaaaaaa
      • aaaaaaaaaaaaaa
      </body> </html>

1.3.6. 选择器优先级

  • 内联样式，优先级1000

  • id选择器，优先级100

  • 类和伪类，优先级10

  • 元素选择器，优先级1

  • 通配符选择器，优先级0

    当选择器包含多种选择器时，需要将多种选择器优先级相加然后进行比较。选择器的优先级不会超过它最大数量级，如果选择器优先级一样，则使用靠后的样式。

    并集(组合)选择器的优先级是单独计算。

    可以在样式的最后添加一个!important,则此时该样式会获得一个最高的一个优先级，将会超过所有样式甚至内联样式，所以在开发中尽量避免使用。

    • 案例
    html \ 复制代码 
        <head>
        <meta charset="UTF-8">
        <title>选择器的优先级</title>
        <style>
            #one{
                font-size: 50px;
            }
            .one{
                font-size:30px!important;
                color:tomato;
            }
            .two>.three{
                color:green;
            }
            .two>div{
                color:blue!important;
            }

        </style>
    </head>
    <body>
        <div class="one" id="one">
            我是内容
        </div>
        <div id="two" class="two">
            <div class="three" style="color: purple">我是包含中的div</div>
        </div>
        <div class="two">
            <div class="three">我是包含中的div2</div>
        </div>
    </body>

1.3.7. 文本属性

  • overflow | overflow-x | overflow-y 当内容溢出元素框时隐藏|自动|显示混动条

    • 取值

      • visible： 对溢出内容不做处理，内容可能会超出容器。
      • hidden： 隐藏溢出容器的内容且不出现滚动条。
      • scroll： 隐藏溢出容器的内容，溢出的内容可以通过滚动呈现。
      • auto： 当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。textarea元素的overflow默认值就是auto。

    • 案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本属性</title> <style> .visible{ width:100px; height: 100px; border:1px solid blue; margin-bottom: 50px; overflow: visible; } .scroll{ width: 100px; height: 100px; border:1px solid red; margin-bottom: 50px; 
                    overflow: scroll;

          }
          .auto{
              width:100px;
              height: 100px;
              border:1px solid blue;
              margin-bottom: 50px;
              overflow: auto;

          }
          .hidden{
              width: 100px;
              height: 100px;
              border: 1px solid red;
              /*隐藏会截断内容*/
              overflow: hidden;
          }
      </style>
  </head>
  <body>
      <div class="visible">
          aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
          我是div标签中间的内容，我不知道我会不会超出元素的大小元素的大
      </div>
      <div class="scroll">
          aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
          我是div标签中间的内容，我不知道我会不会超出元素的大小元素的大
      </div>
      <div class="auto">
          aaaaa
          我是div标签中间的内容，我不知道我会不会超出元素的大小元素的大
      </div>
      <div class="hidden">
          aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
          我是div标签中间的内容，我不知道我会不会超出元素的大小元素的大
      </div>
  </body>
      </html>

  • text-overflow 让溢出的文字以省略号显示

    • 取值：

      • clip： 当内联内容溢出块容器时，将溢出部分裁切掉。
      • ellipsis： 当内联内容溢出块容器时，将溢出部分替换为（...）。

    • 案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本属性</title> <style> /*text-overflow 溢出的文字处理方式*/ .clip{ width: 100px; height: 100px; border:1px solid blue; margin-top:50px; /*不能单独设置*/ text-overflow: clip; /*培超超出部分隐藏*/ overflow: hidden; } .ellipsis{ width: 100px; height: 100px; border:1px solid blue; margin-top:50px; /*不能单独设置*/ text-overflow: ellipsis; overflow: hidden; /*针对与中文会默认换行 必须设置内容才同一行才能显示省略号*/ white-space:nowrap; } </style> </head> <body>
      aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 我是div标签中间的内容，我不知道我会不会超出元素的大小元素的大 
            <div class="ellipsis">
          我是div标签中间的内容，我不知道我会不会超出元素的大小元素的大
      </div>
  </body>
      </html>

  • white-space 设置文字是否在同一行显示

    • 取值：

      • normal： 默认处理方式。会将序列的空格合并为一个，内部是否换行由换行规则决定。
      • pre： 原封不动的保留你输入时的状态，空格、换行都会保留，并且当文字超出边界时不换行。等同 pre 元素效果
      • nowrap： 与normal值一致，不同的是会强制所有文本在同一行内显示。
      • pre-wrap： 与pre值一致，不同的是文字超出边界时将自动换行。
      • pre-line： 与normal值一致，但是会保留文本输入时的换行。

    • 案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本属性</title> <style> /*white-space 设置文本是否在同一行显示*/ ul p{ width: 100px; border:1px solid red; } .normal>p{ white-space: normal; } .pre>p{ white-space: pre; } .pre-wrap>p{ white-space: pre-wrap; } .pre-line{ white-space: pre-line; } .nowarp{ white-space: nowrap; } </style> </head> <body>

      • 我是第一个P标签，我来测试normal aaaaaa

      • 我是第二个P标签 我来测试pre属性值

      • 我是第三个 p标签 我来测试 pre-wrap

      • 我是第四个 p标标签 我来测试 pre-line hello

      • 我是第五个P标签 我来测试的是nowarp

      </body> </html>

  • text-align 元素内容对齐方式

    • 取值：

      • left： 内容左对齐。
      • center： 内容居中对齐。
      • right： 内容右对齐。

    • 案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本属性-内容对齐方式</title> <style> .left{ text-align: left; } .center{ text-align: center; } .right{ text-align: right; } </style> </head> <body>
      • 我是第一个li标签，我是左对齐
      • 我是第一个li标签，我是居中对齐
      • 我是第一个li标签，我是右对齐
      </body> </html>

  • text-decoration 指定文本是否有修饰

    • 取值：

      • none： 指定文字无装饰 （取消修饰）
      • underline： 指定文字的装饰是下划线
      • overline： 指定文字的装饰是上划线
      • line-through： 指定文字的装饰是贯穿线

    • 案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本属性-文本修饰</title> <style> /*text-decoration 指定文本是否修饰*/ .none{ text-decoration: none; } .underline{ text-decoration: underline; } .overline{ text-decoration: overline; } .line-through{ text-decoration: line-through; } </style> </head> <body>

      文本修饰-取消修饰
      为文本修饰-上划线
      为文本修饰-下划线
      为文本修饰-删除线

      </body> </html>

  • text-indent 文本首行缩进

    • 取值：用长度值指定文本的缩进，可以为负值

    • 案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本属性-内容对齐方式</title> <style> .text-indent{ text-indent: 2em; } </style> </head> <body>

      这是HTML中的段落标签，特点与上行文本和下行文本间隔一行

      这是HTML中的段落标签，特点与上行文本和下行文本间隔一行

      </body> </html>

  • word-wrap 设置当前行超过指定容器的边界时是否换行。

    • 取值：

      • normal： 允许内容顶开或溢出指定的容器边界。
      • break-word： 内容将在边界内换行，如果需要，单词内部允许断行。

    • 案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本属性-内容对齐方式</title> <style> .break-word{ width: 100px; border:1px solid red; word-break: break-word; } </style> </head> <body>
      aaaaaaaaaaaaaaaaaaaaaaaaa
      </body> </html>

  • vertical-align 设置对象内容的垂直对齐方式。

    • 取值：

      • baseline： 把当前盒的基线与父级盒的基线对齐。如果该盒没有基线，就将底部外边距的边界和父级的基线对齐
      • sub： 把当前盒的基线降低到合适的位置作为父级盒的下标（该值不影响该元素文本的字体大小）
      • super： 把当前盒的基线提升到合适的位置作为父级盒的上标（该值不影响该元素文本的字体大小）
      • text-top： 把当前盒的top和父级的内容区的top对齐
      • text-bottom： 把当前盒的bottom和父级的内容区的bottom对齐
      • middle： 把当前盒的垂直中心和父级盒的基线加上父级的半x-height对齐
      • top： 把当前盒的top与行盒的top对齐
      • bottom： 把当前盒的bottom与行盒的bottom对齐

    • 案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本属性-内容垂直对齐方式</title> <style> /*vertical-align 设置元素垂直对齐方式*/ .test p{ border:1px solid red; line-height: 2em; font-size:16px; } .test a{ font-size:12px; margin-left:10px } .baseline a{ vertical-align: text-top; } .sub a{ vertical-align: sub; } .super a{ vertical-align: super; } .top a{ vertical-align: top; } .text-top a{ vertical-align: text-top; } .middle a{ vertical-align: middle; } .bottom a{ vertical-align: bottom; } .text-bottom a{ vertical-align: text-bottom; } </style> </head> <body> </body> </html>

  • line-height 设置对象的行高

    • 作用：设置一行的高度用于美化效果，第二个作用可让让内容垂直居中

    • 取值：用长度值指定行高。不允许负值。

    • 案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本属性-行高</title> <style> /*line-height*/ .line-height{ border:1px solid red; /*line-height: 3em;*/ /*给元素添加高度*/ height: 50px; /*行高等于高度即可实现垂直居中*/ line-height: 50px; } </style> </head> <body>
      我是div的内容，我的作用可以设置行高也可以设置垂直居中
      </body> </html>

1.3.8. 背景属性

  • background-color 背景颜色

    • 取值：color设置所有值均可

    • 案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景颜色</title> <style> div{ width: 100px; height: 100px; } .name{ background-color:tomato; } .jinzhi{ background-color:#0ff; } .rgb{ background-color: rgb(255,255,0); } .rgba{ background-color:rgba(255,255,0,0.5) } .hsl{ background-color: hsl(180deg,50%,50%); } .hsla{ background-color: hsla(180,100%,50%,0.5); } .transparent{ border:1px solid red; background-color: transparent; } </style> </head> <body>
      </body> </html>

  • background-image 背景图片

    • 案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景图片</title> <style> .img{ width: 100%; height: 800px; /*背景图片如果小于元素的大小 默认沿水平和垂直方向重复*/ background-image:url('./a.webp') } </style> </head> <body> 
            </div>
  </body>
      </html>

  • background-repeat 背景图片是否重复

    • 取值：

      • repeat-x： 背景图像在横向上平铺
      • repeat-y： 背景图像在纵向上平铺
      • repeat： 背景图像在横向和纵向平铺
      • no-repeat： 背景图像不平铺

    • 案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景图片</title> <style> .img{ width: 100%; height: 800px; /*背景图片如果小于元素的大小 默认沿水平和垂直方向重复*/ background-image:url('./a.webp'); /*设置背景图片不重复*/ /*background-repeat:no-repeat;*/ /*设置背景图片沿X轴重复*/ /*background-repeat: repeat-x;*/ /*设置背景图片沿Y轴重复*/ /*background-repeat: repeat-y;*/ /*设置背景图片沿x,Y轴重复*/ background-repeat: repeat; } </style> </head> <body> 
            </div>
  </body>
      </html>

  • background-size 设置背景图片大小

    • 取值：

      • ： 用长度值指定背景图像大小。不允许负值。
      • ： 用百分比指定背景图像大小。不允许负值。
      • auto： 背景图像的真实大小。
      • cover： 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
      • contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

    • 案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景图片</title> <style> .img{ width: 100%; height: 800px; background-color:tomato; /*背景图片如果小于元素的大小 默认沿水平和垂直方向重复*/ background-image:url('./a.webp'); /*设置背景图片不重复*/ background-repeat:no-repeat; 
                    /*设置背景图的大小*/
              /*background-size:100% 100%;*/
              /*background-size:100px 100px;*/
              /*background-size:auto;*/
              /*background-size:cover;*/
              background-size: contain;
          }
      </style>
  </head>
  <body>
      <div class="img">

      </div>
  </body>
      </html>

  • background-position 背景图片位置(相对于外层容器)

    • 取值：

      • ： 用百分比指定背景图像在元素中出现的位置。可以为负值。参考容器尺寸减去背景图尺寸进行换算。
      • ： 用长度值指定背景图像在元素中出现的位置。可以为负值。
      • center： 背景图像横向或纵向居中。
      • left： 背景图像从元素左边开始出现。
      • right： 背景图像从元素右边开始出现。
      • top： 背景图像从元素顶部开始出现。
      • bottom： 背景图像从元素底部开始出现。

    • 案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景图片</title> <style> .img{ width: 100%; height: 800px; background-color:tomato; /*背景图片如果小于元素的大小 默认沿水平和垂直方向重复*/ background-image:url('./a.webp'); /*设置背景图片不重复*/ background-repeat:no-repeat; /*设置背景图片的位置*/ /*background-position:center;*/ /*background-position: 100px 100px;*/ background-position: -100px -100px; } </style> </head> <body> 
            </div>
  </body>
      </html>

  • background-attachment 背景图片是否随内容滚动

    • 取值

      • fixed： 背景图像相对于视口（viewport）固定。
      • scroll： 背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。

    • 案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景图片</title> <style> .img{ width: 100%; height: 1800px; background-color:tomato; /*背景图片如果小于元素的大小 默认沿水平和垂直方向重复*/ background-image:url('./a.webp'); /*设置背景图片不重复*/ background-repeat:no-repeat; /*设置背景图居中*/ background-position: center; /*设置背景图是否随内容而滚动*/ background-attachment: fixed; } </style> </head> <body> 
            </div>
  </body>
      </html>

  • background 背景属性简写属性(推荐使用)

    • 案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景的简写属性</title> <style> .back{ width: 1300px; height: 1800px; /*background: no-repeat center/contain tomato fixed url('./a.webp');*/ background: no-repeat center tomato fixed url('./a.webp'); } </style> </head> <body>
      </body> </html>

1.3.9. 尺寸属性

  • width 设置元素的宽度

    • 取值：

      • auto： 无特定宽度值，取决于其它属性值
      • ： 用长度值来定义宽度。不允许负值
      • ： 用百分比来定义宽度。百分比参照包含块宽度。不允许负值

    • 案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>尺寸属性</title> <style> .one{ width: 100px; height: 100px; background: tomato; } </style> </head> <body>
      </body> </html>

  • height 设置元素的高度

    • 取值：

      • auto： 无特定高度值，取决于其它属性值
      • ： 用长度值来定义高度。不允许负值
      • ： 用百分比来定义高度。不允许负值

    • 案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>尺寸属性</title> <style> .one{ width: 100px; height: 100px; background: tomato; } </style> </head> <body>
      </body> </html>

    标尺工具的下载地址：PicPick---NGWIN，一款全功能的设计工具，包含屏幕截图、图片编辑器、颜色选择器、像素标尺和其它更多的功能

  • min-height 设置最小高度

    • 取值：

      • ： 用长度值来定义最小高度。不允许负值
      • ： 用百分比来定义最小高度。不允许负值

    • 案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>尺寸属性</title> <style> .two{ width: 100px; min-height: 100px; background: tomato; } </style> </head> <body>
      我是留言的内容 我是留言的内容 我是留言的内容 我是留言的内容 我是留言的内容 我是留言的内容 我是留言的内容 我是留言的内容
      </body> </html>

    最小高度属性默认显示最小高度，当内容超过最小高度时，最小高度会随内容大小而增加

  • max-height 设置最大高度

    • 取值：

      • ： 用长度值来定义最小高度。不允许负值
      • ： 用百分比来定义最小高度。不允许负值

    • 案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>尺寸属性</title> <style> .three{ width: 100px; max-height: 100px; background: cyan; } </style> </head> <body>
      我是留言的内容 我是留言的内容 我是留言的内容 我是留言的内容
      </body> </html>

    最大高度属性默认没有高度，当内容增加时告诉随内容增加，当增加到最大高度时，高度不会在增加

  • min-width 设置最小宽度

    • 取值：
      • ： 用长度值来定义最小高度。不允许负值
      • ： 用百分比来定义最小高度。不允许负值

  • max-width 设置最大宽度

    • 取值：
      • ： 用长度值来定义最小高度。不允许负值
      • ： 用百分比来定义最小高度。不允许负值

    最小高度和最大高度适用于页面布局，最小宽度和最大宽度适用于媒体查询

1.3.10. 列表属性

  • list-style-type 设定列表的符号样式

    • 取值：

      • disc： 实心圆(CSS1)
      • circle： 空心圆(CSS1)
      • square： 实心方块(CSS1)
      • decimal： 阿拉伯数字(CSS1)
      • lower-roman： 小写罗马数字(CSS1)
      • upper-roman： 大写罗马数字(CSS1)
      • lower-alpha： 小写英文字母(CSS1)
      • upper-alpha： 大写英文字母(CSS1)
      • none： 不使用项目符号(CSS1)
      • armenian： 传统的亚美尼亚数字(CSS2)
      • cjk-ideographic： 浅白的表意数字(CSS2)
      • georgian： 传统的乔治数字(CSS2)
      • lower-greek： 基本的希腊小写字母(CSS2)
      • hebrew： 传统的希伯莱数字(CSS2)
      • hiragana： 日文平假名字符(CSS2)
      • hiragana-iroha： 日文平假名序号(CSS2)
      • katakana： 日文片假名字符(CSS2)
      • katakana-iroha： 日文片假名序号(CSS2)
      • lower-latin： 小写拉丁字母(CSS2)
      • upper-latin： 大写拉丁字母(CSS2)

    • 案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表属性</title> <style> ul>li{ list-style-type:decimal; } ol>li{ list-style-type:none; } </style> </head> <body>
      • 我是无序列表
      • 我是无序列表
      • 我是无序列表
      • 我是无序列表
      1. 我是有序列表
      2. 我是有序列表
      3. 我是有序列表
      4. 我是有序列表
      </body> </html>

  • list-style-image 使用指定的图片来代替列表的序号

    • 案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表属性</title> <style> ul>li{ list-style-image:url('./b.webp') } </style> </head> <body>
      • 我是无序列表
      • 我是无序列表
      • 我是无序列表
      • 我是无序列表
      </body> </html>

  • list-style-position 设定列表需要的位置

    • 取值：

      • outside： 列表项目标记放置在文本以外，且环绕文本不根据标记对齐
      • inside： 列表项目标记放置在文本以内，且环绕文本根据标记对齐

    • 案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表属性</title> <style> ul>li{ list-style-image:url('./b.webp'); border:1px solid red; list-style-position:inside ; 
                }
      </style>
  </head>
  <body>
      <ul>
          <li>我是无序列表</li>
          <li>我是无序列表</li>
          <li>我是无序列表</li>
          <li>我是无序列表</li>
      </ul>
  </body>
      </html>

  • list-style 列表简写属性

    • 案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表属性</title> <style> ol>li{ list-style: none url('./b.webp') inside; } </style> </head> <body>
      1. 我是有序列表
      2. 我是有序列表
      3. 我是有序列表
      4. 我是有序列表
      </body> </html>

1.3.11. 定位属性

  • position 设定元素的定位方式

    • static 静态定位(默认)

    • relative 相对定位

      • 以当前元素为参照物，移动指定距离的定位方式

      • 相对定位的元素会占据原有的物理位置

      • 案例

        <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>相对定位</title> <style> .one,.two,.three{ width:100px; height:100px; } .one{ background:blue; } .two{ background:tomato; /*相对定位*/ position:relative; /*移动指定的距离*/ left:100px; top:100px; } .three{ background:green } .other{ width:200px; height:200px; background:red; position:relative; left:200px; } .inner{ width: 100px; height: 100px; background: purple; position:relative; left:100px; top:100px; } .grand{ width:300px; height:300px; background:yellow; position: relative; left:400px; } .fahter{ width: 200px; height:200px; background:beige; } .son{ width:100px; height: 100px; background:tomato; position: relative; left:100px; } </style> </head> <body>
        </body> </html>

    • absolute 绝对定位

      • 以其它元素为参照物，移动指定距离的定位方式

      • 在绝对定位的时候，被定位的元素不会占据原有物理位置

      • 关于绝对定位参考点

        1. 如果该元素的外层元素中没有任何一个元素采用position定位，那么此时定位的参考元素变为body或者说是页面

          • 案例

            <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        .one,.two,.three{
            width:100px;
            height:100px;
        }
        .one{
            background:blue;
        }
        .two{
            background:tomato;
            position: absolute;
            left:100px;
            top:100px;

        }
        .three{
            background:green
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</body>
</html>

        2. 如果元素的外层元素有定位设置，那么这个外层元素就成为该元素的定位参考点

          • 案例

            html 复制代码 
            <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        .other{
            width:200px;
            height:200px;
            background:red;
            position: relative;
            left:200px;
        }
        .inner{
            width: 100px;
            height: 100px;
            background: purple;
            position: absolute;
            left:100px;
            top:100px;

        }
    </style>
</head>
<body>
    <div class="other">
        <div class="inner"></div>
    </div>
</body>
</html>

        3. 如果元素的外层元素没有设置position的值，那么该元素将寻找距离自己最近的其它设定过position的外层元素作为参照物(多层嵌套)

          • 案例

            html 复制代码 
            <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        .grand{
            width:300px;
            height:300px;
            background:yellow;
            /*position:relative;*/
            /*left:400px;*/

        }
        .fahter{
            width: 200px;
            height:200px;
            background:beige;
            /*margin-left:20px;*/
            position: relative;
            left:200px;
        }
        .son{
            width:100px;
            height: 100px;
            background:brown;
            position: absolute;
            left:100px;
            top:100px;

        }
    </style>
</head>
<body>
    <div class="grand">
        <div class="fahter">
            <div class="son"></div>
        </div>
    </div>
</body>
</html>
      • 实战百度登录
      html 复制代码 
      <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>百度一下-你就知道</title>
        <style>
            /*头部区域*/
           header>div:first-child{
               position:absolute;
               left:8px;
               top:8px;
           }
           header>span:last-child{
               position: absolute;
               right:10px;
               top:8px;
           }
           /*搜索区域*/
           .center{
                width: 500px;
                height:300px;
                background: tomato;
                position: relative;
                top:100px;
               /*计算属性*/
                left:calc(50% - 250px);
           }
           .list>div:first-child{
               position: absolute;
               top:50px;
               left:0px;
               background: beige;
               width: 250px;
           }
           .list>div:last-child{
               position: absolute;
               top:50px;
               left:250px;
               width: 250px;
               background: cyan;
           }
           /*底部区域*/
            footer{
                width:100%;
                background: tomato;
                position: absolute;
                bottom:10px;
            }
            /*侧边栏*/
            aside{
                width: 30px;
                height: 100px;
                background: purple;
                position: absolute;
                right:10px;
                bottom:80px;
            }
            /*遮罩层*/
            .mask{
                position: absolute;
                background: #ccc;
                opacity: 0.3;
                left:0px;
                right:0px;
                top:0px;
                bottom:0px;
            }
            /*登录*/
            .login{
                width: 600px;
                height: 300px;
                background: white;
                position: absolute;
                top:calc(50% - 150px);
                left:calc(50% - 300px);
            }
        </style>
    </head>
    <body>
        <div id="content">
            <header>
                <span><a href="http://news.baidu.com">新闻</a> hao123 地图 贴吧 视频 图片 网盘 更多</span>
                <span>设置 登录</span>
            </header>
            <div class="center">
                <form action="">
                    <input type="search" name="search" id="">
                    <input type="submit" value="百度一下">
                </form>
                <div class="list">
                    <div class="list_left">左边列表</div>
                    <div class="list_right">右边列表</div>
                </div>
            </div>
            <aside>侧边栏</aside>
            <footer>
                关于百度About Baidu使用百度前必读帮助中心企业推广京公网安备11000002000001号京ICP证030173号信息网络传播视听节目许可证 0110516互联网宗教信息服务许可证编号：京（2022）0000043药品医疗器械网络信息服务备案（京）网药械信息备字（2021）第00159号
                医疗器械网络交易服务第三方平台备案凭证（京）网械平台备字（2020）第00002号
                ©2023 Baidu
            </footer>
        </div>
        <div class="mask"></div>
        <div class="login">
            <form action="">
                登录
            </form>
        </div>
    </body>
</html>

      • fixed 根据窗口定位

        • 案例
        html 复制代码 
        <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>固定定位</title>
        <style>
            header{
                width: 100%;
                height: 80px;
                background: tomato;
                position: fixed;
                top:0px;
            }
            footer{
                width: 100%;
                height: 50px;
                background: cyan;
                position: fixed;
                bottom: 0px;
            }
            .main{
                width: 100%;
                height: 1800px;
                position: absolute;
                top:80px;
                background: antiquewhite;
            }
        </style>
    </head>
    <body>
        <header>
            我是头部内容，我是固定定位到头部
        </header>
        <section class="main">
            我是中间的内容
        </section>
        <footer>
            我是底部内容，我是固定到底部的
        </footer>
    </body>
</html>

      • z-index 设定定位元素Z轴的距离

        • 案例
        html 复制代码 
        <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>固定定位</title>
        <style>
            header{
                width: 100%;
                height: 80px;
                background: tomato;
                position: fixed;
                top:0px;
                /*调整Z轴的距离*/
                z-index: 2;
            }
            footer{
                width: 100%;
                height: 50px;
                background: cyan;
                position: fixed;
                bottom: 0px;
            }
            .main{
                width: 100%;
                height: 1800px;
                position: absolute;
                top:80px;
                background: antiquewhite;
            }
        </style>
    </head>
    <body>
        <header>
            我是头部内容，我是固定定位到头部
        </header>
        <section class="main">
            我是中间的内容
        </section>
        <footer>
            我是底部内容，我是固定到底部的
        </footer>
    </body>
</html>

      • 定位取值

        • left:设定定位元素的水平移动位置(距离左边的距离)
        • top:设定定位元素的垂直移动位置(距离顶部的距离)
        • right:设定定位元素的水平移动位置(距离右边的距离)
        • bottom:设定定位元素的垂直移动位置(距离底部的距离)

1.3.12. calc 计算属性

  • calc()是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。

  • calc(）语法：

    • 加 （+）、减（-）、乘（*）、除（/），注意的是：乘数中至少要有一个是 类型的、被除数（/右面的数）必须是 类型的

    • calc()使用通用的数学运算规则，但是也提供更智能的功能：

      • 使用"+"、"-"、"*" 和 "/"四则运算

      • 可以使用百分比、px、em、rem等单位

      • 可以混合使用各种单位进行计算

      • 表达式中有"+"和"-"时，其前后必须要有空格，如"widht: calc(100% + 5px)"

      • 表达式中有"*"和"/"时，其前后可以没有空格，但建议留有空格

  • 案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .one{ /*width: calc(50% - 100px);*/ /*width: calc(100% / 4);*/ width: calc(20% * 4); height: 100px; background:red; } </style> </head> <body>
    </body> </html>

1.3.13. 布局属性

  • 块状元素与行内元素的特点

    • 块状元素：独占一行，具有宽高属性

    • 行内元素：不会独占一行，没有宽高属性

    • 案例

      <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>块状元素和行内元素</title>
        <style>
            div{
                width: 100px;
                height: 100px;
                background: tomato;
            }
            span{
                background: cyan;
                width: 100px;
                height: 100px;
            }
            a{
                background: antiquewhite;
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div>我是块状元素，我独占一行</div>
        <span>我是行内元素，我不会独占一行</span>
        <a href="">是不是也是行内元素</a>
    </body>
</html>

  • display 设置元素的显示方式

    • inline 将元素作为行内元素样式显示

    • block 将元素作为块状元素显示

      • 案例

        <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>布局属性</title> <style> div{ width:100px; height:100px; background:tomato; display: inline; } span{ width: 100px; height: 100px; background: cyan; display: block; } </style> </head> <body>
        我是快转个元素
        我是行内元素 </body> </html>

      • inline-block 设定一个元素既可以设定宽高属性，也可以在一行显示。

        • 案例
        html 复制代码 
        <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>布局属性</title>
        <style>
            div{
                width:100px;
                height:100px;
                background:tomato;
                display: inline;
            }
            span{
                width: 100px;
                height: 100px;
                background: cyan;
                display: block;
            }
            section{
                width: 350px;
                height: 450px;
                background: purple;
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <div>我是快转个元素</div>
        <span>我是行内元素</span>
        <section>
            <img src="./a.webp" alt="">
            我也是块状元素
        </section>
        <section>
            <img src="./a.webp" alt="">
            我也是块状元素
        </section>
        <section>
            <img src="./o.webp" width="350" alt="">
            我也是块状元素
        </section>
        <section>
            <img src="./b.webp" alt="">
            我也是块状元素我是另外一张图片
        </section>
        <section>
            <img src="./a.webp" alt="">
            我也是块状元素
        </section>
        <section>
            <img src="./a.webp" alt="">
            我也是块状元素
        </section>

    </body>
</html>

      • none 设置元素不显示(隐藏元素)

        • 案例
        html 复制代码 
        <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>布局属性</title>
        <style>
            section{
                width: 350px;
                height: 450px;
                background: purple;
                display: inline-block;
            }

            /*设置元素隐藏*/
            .one{
                display: none;
                /*display: inline-block;*/
            }
            .two{
                display: inline-block;
            }
            .two:hover>.one{
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <section>
            <img src="./a.webp" alt="">
            我也是块状元素
        </section>
        <section>
            <img src="./a.webp" alt="">
            我也是块状元素
        </section>
        <div class="two">
            aaa
            <section class="one">
                <img src="./o.webp" width="350" alt="">
                我也是块状元素
            </section>
        </div>

        <section>
            <img src="./b.webp" alt="">
            我也是块状元素我是另外一张图片
        </section>
        <section>
            <img src="./a.webp" alt="">
            我也是块状元素
        </section>
        <section>
            <img src="./a.webp" alt="">
            我也是块状元素
        </section>

    </body>
</html>

        使用display:none隐藏元素不会占据原有的物理位置

  • visibility 设置元素是否显示

    • visible 显示
    • hidden 隐藏
    • 案例
    html \ 复制代码 
        <head>
        <meta charset="UTF-8">
        <title>布局属性</title>
        <style>
            section{
                width: 350px;
                height: 450px;
                background: purple;
                display: inline-block;
            }

              /*使用visibility设置元素的隐藏和显示*/
              .one{
                  visibility: hidden;

              }
              .two{
                  display: inline-block;
              }
              .two:hover>.one{
                  /*显示*/
                  visibility: visible;
              }
          </style>
      </head>
      <body>
          <section>
              <img src="./a.webp" alt="">
              我也是块状元素
          </section>
          <section>
              <img src="./a.webp" alt="">
              我也是块状元素
          </section>
          <div class="two">
              aaa
              <section class="one">
                  <img src="./o.webp" width="350" alt="">
                  我也是块状元素
              </section>
          </div>
          <section>
              <img src="./b.webp" alt="">
              我也是块状元素我是另外一张图片
          </section>
          <section>
              <img src="./a.webp" alt="">
              我也是块状元素
          </section>
          <section>
              <img src="./a.webp" alt="">
              我也是块状元素
          </section>

      </body>
  </html>
  ```

  > 使用visibility设置元素隐藏后会占据原有的物理位置
  >
  > > 使用visibility隐藏元素不能使用display方式进行显示
  > >
  > > 使用display隐藏的元素也同样不能使用visibility进行显示

1.3.14. 浮动属性

  • float 浮动属性

    • left 设置元素向左浮动

    • right 设置元素向右浮动

    • none 设置元素不浮动(默认值)

    • 案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动属性一</title> <style> .father{ width: 620px; height: 220px; background: pink; } /*元素一旦浮动不会占据原有的物理位置 会到浮动层*/ .one{ width: 200px; height: 200px; background: purple; float:right; } .two{ width: 200px; height: 200px; background: cyan; /*float:left;*/ float:right; } .three{ width: 200px; height: 200px; background: tomato; float:left; } </style> </head> <body>
      </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动属性一</title> <style> .father{ width: 620px; height: 220px; background: pink; } /*元素一旦浮动不会占据原有的物理位置 会到浮动层*/ .one1{ width: 200px; height: 200px; background: purple; float:left; } .two1{ width:200px; height:200px; background:cyan; float:left; } .three1{ width: 200px; height: 200px; background: tomato; float:left; } </style> </head> <body>
      1 2 3
      </body> </html>

  • clear 用于清除其他元素的浮动属性对当前元素的影响

    • left 用于抵消float:left效果
    • right 用于抵消float:right效果
    • both 用于清除float效果

  • 案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .father{ width: 620px; height: 420px; background: antiquewhite; } .one{ width: 200px; height: 200px; background: tomato; float:left; } .two{ width:200px; height: 200px; background: cyan; float:left; } .three{ width: 200px; height: 200px; background: purple; float:right; } .four{ width: 610px; height: 210px; background: brown; /*float:left;*/ /*clear:right;*/ /*clear:left*/ /*推荐使用 清楚两端浮动*/ clear:both; } </style> </head> <body>
    </body> </html>

  • 注意：

    • 任何元素一旦使用float属性，那么他的display属性将失效，均可以设置宽高。效果类似于inline-block

    • 当子类浮动后父类感知不到子类高度时，可以给父类设置overflow:hidden，此时父类可以感知到子类高度并且父类没有失去display的特性

      • 案例

        <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动后对父类的影响</title> <style> .father{ width: 620px; background: antiquewhite; /*父类依然时快转元素*/ overflow: hidden; /*设置块状元素居中*/ margin:0 auto; } .father>div:first-child{ width: 200px; height: 200px; background: red; float:left; } .father>div:nth-child(2){ width: 200px; height: 200px; background: deeppink; float:left; } .father>div:last-child{ width: 200px; height: 200px; background: tomato; float:left; } </style> </head> <body>
        </body> </html>

    • 当子类浮动后父类感知不到子类高度时，也可以设置父类浮动，让父类跟子类同时到达浮动层感知子类高度，但是此时父类会失去display的特点

      • 案例

        <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动后对父类的影响</title> <style> .father{ width: 620px; background: antiquewhite; /*设置父类浮动也能感知高度 但是不能使用margin进行居中*/ float:left; /*margin:0 auto;*/ } .father>div:first-child{ width: 200px; height: 200px; background: red; float:left; } .father>div:nth-child(2){ width: 200px; height: 200px; background: deeppink; float:left; } .father>div:last-child{ width: 200px; height: 200px; background: tomato; float:left; } </style> </head> <body>
        </body> </html>

    • 当子类浮动后父类感知不到子类高度时，也可以设置父类的宽高，子类浮动不会超过父类宽高

1.3.15. 浮动布局实战

  • 参考页面：EWShop首页 - 欢迎使用EWShop商城系统

  • 案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿制ewshop布局</title> <style> /* header style start */ header{ width: 100%; height: 30px; background: #ccc; } .top{ width: 980px; height: 100%; background: antiquewhite; margin:0 auto; } .top_left{ width: 200px; height: 100%; background: tomato; float:left; } .top_right{ width: 500px; height: 100%; background: deeppink; float:right; } /* header style end */ 
              /*search style start*/
          .search{
              width:980px;
              height: 100px;
              background: antiquewhite;
              margin:0 auto;
          }
          .logo{
              width:150px;
              height:100%;
              background:blueviolet;
              float:left;
          }
          .search_form{
              width:600px;
              height: 100%;
              background: cyan;
              float:left
          }
          .phone{
              width: 200px;
              height: 100%;
              background:sienna;
              float:right;
          }
          /*search style end*/
          /*nav style start */
          nav{
              width:980px;
              height: 40px;
              background: red;
              margin:0 auto;
          }
          li{
              list-style:none;
              float:left;
          }
          a{
              text-decoration: none;
              float:left;
              width: 85px;
              text-align: center;
              color:#fff;
              font-size:14px;
              font-weight: bold;
              line-height: 40px;
          }
          a:hover{
              background: #fff;
              color:red;
          }
          /*nav style end  */
          /*ad style start*/
          .ad{
              width:980px;
              height: 120px;
              background:#ff1;
              margin:0 auto;
          }
          /*ad style end*/
          /*banner style start*/
          .banner{
              width: 980px;
              height: 300px;
              margin:0 auto;
              background:navajowhite;
          }
          .banner_left{
              width: 200px;
              height: 100%;
              background: sienna;
              float:left;
          }
          .banner_left_top{
              width: 200px;
              height: 30px;
              background: aliceblue;
              float:left;
          }
          .banner_left_bottom{
              width: 200px;
              height: 270px;
              background: blue;
              float:left;
          }
          .banner_conter{
              width: 530px;
              height: 100%;
              background: aqua;
              float:left;
          }
          .banner_right{
              width:240px;
              height:100%;
              background: blueviolet;
              float:right;
          }
          .banner_right_top{
              width: 100%;
              height: 30px;
              background: #cccccc;
              float:left;
          }
          .banner_right_bottom{
              width: 100%;
              height: 270px;
              background: deeppink;
              float:left;
          }
          /*banner style end*/
      </style>
  </head>
  <body>
      <!--header tagName start-->
      <header>
          <div class="top">
              <div class="top_left"></div>
              <div class="top_right"></div>
          </div>
      </header>
      <!--header tagName end-->

          <section class="search">
          <div class="logo"></div>
          <div class="search_form"></div>
          <div class="phone"></div>
      </section>

          <nav>
          <li><a href="">首页</a></li>
          <li><a href="">前端</a></li>
          <li><a href="">后端</a></li>
          <li><a href="">云计算</a></li>
          <li><a href="">产品设计</a></li>
          <li><a href="">前沿</a></li>
          <li><a href="">关于我们</a></li>
      </nav>

          <div class="ad"></div>

          <section class="banner">
          <div class="banner_left">
              <div class="banner_left_top"></div>
              <div class="banner_left_bottom"></div>
          </div>
          <div class="banner_conter"></div>
          <div class="banner_right">
              <div class="banner_right_top"></div>
              <div class="banner_right_bottom"></div>
          </div>
      </section>

      </body>
    </html>

1.3.16. 盒子模型

  • 标准盒模型

    • margin 外边距

      • 派生类

        • margin-left : 设置距离左边的距离
        • margin-top：设置距离顶部的距离
        • margin-right：设置距离右边的距离
        • margin-bottom：设置距离底部的距离

      • 案例

        <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>外间距</title> <style> .father{ width: 640px; height: 640px; background: pink; } .top{ width: 600px; height: 200px; background: #ffff11; float:left; } .left{ width: 200px; height: 200px; background: blue; float:left; } .self{ width: 200px; height: 200px; background: tomato; float:left; margin-top:10px; margin-right:10px; margin-left:10px; margin-bottom:10px; } .right{ width: 200px; height: 200px; background: deeppink; float:left; } .bottom{ width: 600px; height:200px; background: indianred; float:left; } </style> </head> <body>
        顶部元素
        左侧元素
        当前元素
        右侧元素
        底部元素
        </body> </html>

      • margin 简写属性

        • 四个参数设置四个边的距离 上、右、下、左

        • 三个参数设置四个边的距离 上、右左、下

        • 两个参数设置四个边的距离 上下、右左

        • 一个参数设置四个边的距离(设置设置上右下左)

        • 案例

          <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>外间距</title> <style> .father{ width: 640px; height: 640px; background: pink; } .top{ width: 600px; height: 200px; background: #ffff11; float:left; } .left{ width: 200px; height: 200px; background: blue; float:left; } .self{ width: 200px; height: 200px; background: tomato; float:left; /*- 四个参数设置四个边的距离 上、右、下、左*/ /*margin:10px 15px 20px 25px;*/ /*- 三个参数设置四个边的距离 上、右左、下*/ /*margin:10px 20px 15px;*/ /*- 两个参数设置四个边的距离 上下、右左*/ /*margin:10px 20px;*/ /*- 一个参数设置四个边的距离(设置设置上右下左)*/ margin:10px; } .right{ width: 200px; height: 200px; background: deeppink; float:left; } .bottom{ width: 600px; height:200px; background: indianred; float:left; } </style> </head> <body>
          顶部元素
          左侧元素
          当前元素
          右侧元素
          底部元素
          </body> </html>

        • margin上下会右合并问题(垂直方向)

          • 取最大的值

          • 案例

            <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>外间距</title> <style> /*margin 合并问题 只有垂直会有合并问题 取最大值*/ .one{ width: 100px; height: 100px; background: red; margin-bottom: 50px; } .two{ width: 100px; height: 100px; background: blue; margin-top:100px; } </style> </head> <body>
            </body> </html>

          • margin可以设置块状元素居中

            • 取值

              • margin-left:auto
              • margin-right:auto

            • 简写

              • margin:0 auto

            • 案例

              html 复制代码 
              <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>外间距</title>
        <style>
            .three{
                width: 300px;
                height: 300px;
                background: tomato;
                /*margin-left: auto;*/
                /*margin-right: auto;*/
                margin: 20px auto;
            }
        </style>
    </head>
    <body>
        <div class="three"></div>
    </body>
</html>

      • border 边框

        • 边框样式取值
          • none： 无轮廓。当定义了该值时，border-color将被忽略，border-width计算值为0，除非边框轮廓应用了border-image。
          • hidden： 隐藏边框。
          • dotted： 点状轮廓。
          • dashed： 虚线轮廓。
          • solid： 实线轮廓
          • double： 双线轮廓。两条单线与其间隔的和等于指定的border-width值
          • groove： 3D凹槽轮廓。
          • ridge： 3D凸槽轮廓。
          • inset： 3D凹边轮廓。
          • outset： 3D凸边轮廓。
        • border-top 设置顶部边框颜色、样式、宽度
        • border-left 设置左侧边框颜色、样式、宽度
        • border-right 设置右侧边框颜色、样式、宽度
        • border-bottom 设置底部边框颜色、样式、宽度
        • 案例
        html 复制代码 
        <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>边框</title>
        <style>
            .one{
                width:100px;
                height:100px;
                border-top:1px solid red;
                border-bottom: 5px double blue;
                border-left:1px solid tomato;
                border-right:tomato 5px dashed;
            }
        </style>
    </head>
    <body>
        <div class="one"></div>
    </body>
</html>

        • 派生类

          • border-top-style 设置顶部边框样式
          • border-top-color 设置顶部边框颜色
          • border-top-width 设置顶部边框宽度
          • border-left-style 设置左侧边框样式
          • border-left-color 设置左侧边框颜色
          • border-left-width 设置左侧边框宽度
          • border-right-style 设置右侧边框样式
          • border-right-color 设置右侧边框颜色
          • border-right-width 设置右侧边框宽度
          • border-bottom-style 设置底部边框样式
          • border-bottom-color 设置底部边框颜色
          • border-bottom-width 设置底部边框宽度
          • border-style:设置四个边的边框样式
          • border-width:设置四个边的边框宽度
          • border-color:设置四个边的边框颜色
          • 案例
          html 复制代码 
          <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>边框</title>
        <style>
             /*单独设定每条边的 样式  颜色   宽度*/
            .two{
                margin-top:10px;
                width: 100px;
                height: 100px;
                border-top-style: solid;
                border-top-color: #000;
                border-top-width: 5px;
                border-left-style:solid;
                border-left-width: 5px;
            }
            /*同时设置四个边的样式 颜色  宽度*/
            .three{
                width: 100px;
                height: 100px;
                margin-top: 20px;
                border-style:solid;
                border-color:tomato;
                border-width: 10px;
            }
        </style>
    </head>
    <body>
        <div class="two"></div>
        <div class="three"></div>
    </body>
</html>

        • border 简写属性

          • border:同时设置四个边框的边框样式、颜色、宽度
          • 案例
          html 复制代码 
          <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>边框</title>
        <style>
            /*同时设置四条边的边框颜色 样式 宽度*/
            .four{
                width: 100px;
                height: 100px;
                border:1px solid red;
                margin-top: 20px;
            }
        </style>
    </head>
    <body>
        <div class="four"></div>
    </body>
</html>

      • padding 内边距

        • 派生类

      • padding-left : 设置距离左边的距离

        • padding-top：设置距离顶部的距离
        • padding-right：设置距离右边的距离
          • padding-bottom：设置距离底部的距离

      • 案例

        html 复制代码 
        <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>内间距</title>
        <style>
            .one{
                width:100px;
                height:100px;
                border:1px solid tomato;
                padding-top:20px;
                padding-left:20px;
                padding-bottom:20px;
                padding-right:20px;
            }
        </style>
    </head>
    <body>
        <div class="one">我是内容</div>
    </body>
</html>

        • padding简写属性

          • 四个参数设置四个边的距离 上、右、下、左
          • 三个参数设置四个边的距离 上、右左、下
          • 两个参数设置四个边的距离 上下、右左
          • 一个参数设置四个边的距离(设置设置上右下左)
          • 案例
          html 复制代码 
          <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>内间距</title>
        <style>
            .two{
                width: 100px;
                height: 100px;
                border:1px solid red;
                /*四个参数设置四个边的距离 上、右、下、左*/
                /*padding:10px 20px 30px 40px;*/
                /*三个参数设置四个边的距离 上、右左、下*/
                /*padding:10px 20px 10px*/
                /*两个参数设置四个边的距离 上下、右左*/
                /*padding:10px 20px;*/
                /*一个参数设置四个边的距离(设置设置上右下左)*/
                padding:10px;
                margin-bottom: 20px;
            }
            span{
                border:1px solid red;
                margin:20px 20px;
                padding: 10px 20px;
            }
        </style>
    </head>
    <body>
        <div class="two">我是内容</div>
        <span>我是行内元素</span>
    </body>
</html>

          使用padding也能实现元素内容水平垂直居中

      • 关于标准盒模型

        • padding + border 在标准盒模型中会算入元素大小范围内
        • 案例
        html 复制代码 
        <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .one{
                width: 100px;
                height: 100px;
                background: tomato;
                border:10px solid red;
                padding: 50px;
            }
        </style>
    </head>
    <body>
        <div class="one">我是内容</div>
    </body>
</html>

  • 怪异盒模型

    • box-sizing 定义当前元素使用哪种盒模型

      • border-box（怪异）

      • content-box (标准)

      • 案例

        <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*标准盒模型 需要减去对应的边框和内间距*/ .one{ width: 40px; height: 40px; background: tomato; border:10px solid red; padding: 20px; } /*怪异盒模型*/ .two{ margin-top: 10px; width: 100px; height: 100px; background: tomato; /*设置成怪异盒 怪异的边框和内间距不会占据元素大小*/ box-sizing: border-box; border:5px solid red; padding: 10px; } </style> </head> <body>
        我是内容
        怪异盒
        </body> </html>

1.3.17. EWSHOP布局实战

  • 目录结构

    /ewshop/
    |- index.html 首页
    |- css/ CSS目录
    |- global.css 全局样式
    |- index.css index.html文件样式
    |- img/ 图像资源目录
    |- font/字体图标目录

  • global.css

    • 主要作用：设置全局样式 ，清空默认样式 base.css,设置常用的基础类

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>EWshop</title> <style> body,ul,ol,li,p,div,section{ padding:0px; margin:0px; } ul,ol{ border:1px solid red; } li{ list-style:none; border:1px solid black; } a{ text-decoration: none; } /*设置通用的颜色*/ :root{ --border-color:black; --bg-color:#ccc; --font-color:#666; } 
                div{
              font-color:var(--font-color)
          }
      </style>
  </head>
  <body>
      <div>我是你的优乐美</div>
      <ul>
          <li>aaaaa</li>
      </ul>
      <ol>
          <li>bbbbb</li>
      </ol>
  </body>
      </html>

  • iconfont字体图标

  • Unicode在线图标使用方式

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>EWshop</title>
        <style>
            /*font unicode方式 在线方式 只右针对自己生成的在线链接才管用*/
            /*@font-face {*/
            /*    font-family: 'iconfont';  !* Project id 3978920 *!*/
            /*    src: url('https://at.alicdn.com/t/c/font_3978920_oewa1j06rbk.woff2?t=1679897692963') format('woff2'),*/
            /*    url('https://at.alicdn.com/t/c/font_3978920_oewa1j06rbk.woff?t=1679897692963') format('woff'),*/
            /*    url('https://at.alicdn.com/t/c/font_3978920_oewa1j06rbk.ttf?t=1679897692963') format('truetype');*/
            /*}*/
            /*只要右更新就需要从新加载*/
            @font-face {
                font-family: 'iconfont';  /* Project id 3978920 */
                src: url('https://at.alicdn.com/t/c/font_3978920_hr7ehafwe7d.woff2?t=1679897884734') format('woff2'),
                url('https://at.alicdn.com/t/c/font_3978920_hr7ehafwe7d.woff?t=1679897884734') format('woff'),
                url('https://at.alicdn.com/t/c/font_3978920_hr7ehafwe7d.ttf?t=1679897884734') format('truetype');
            }

            .iconfont{
                font-family:"iconfont" !important;
                font-size:16px;font-style:normal;
                -webkit-font-smoothing: antialiased;
                -webkit-text-stroke-width: 0.2px;
                -moz-osx-font-smoothing: grayscale;}
        </style>
    </head>
    <body>
        <i class="iconfont">&#xe621;</i>
        <i class="iconfont">&#xe600;</i>
    </body>
</html>

  • fontClass在线图标使用方式

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3978920_hr7ehafwe7d.css">
</head>
<body>
    <i class="iconfont icon-gouwuche"></i>
    <i class="iconfont icon-MBEfenggeduosetubiao-gouwuche"></i>
</body>
</html>

  • Symbol在线图标使用方式

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://at.alicdn.com/t/c/font_3978920_hr7ehafwe7d.js"></script>
    <style>
        .icon {
            width: 1em; height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-gouwuche"></use>
    </svg>

    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-MBEfenggeduosetubiao-gouwuche"></use>
    </svg>
</body>
</html>

  • 离线图标使用

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @font-face {
            font-family: 'iconfont';
            src: url('./font/iconfont.woff2?t=1679898366337') format('woff2'),
            url('./font/iconfont.woff?t=1679898366337') format('woff'),
            url('./font/iconfont.ttf?t=1679898366337') format('truetype');
        }
        .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    </style>
    <script src=""></script>
</head>
<body>
<span class="iconfont">&#xe600;</span>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/iconfont.js"></script>
    <style>
        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
    </style>
</head>
<body>
<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-lanmu"></use>
</svg>
</body>
</html>

  • 布局实战

    • global.css文件内容

      /base.css/
      body,ul,li,ol,p,h3,a,div,section,form,input,textarea{
      margin:0px;
      padding:0px;
      }
      li{
      list-style:none;
      }
      a{
      text-decoration: none;
      color:black;
      }
      body{
      font-size:12px;
      }
      :root{
      --font-white:white;
      --bg-red:#E60012;
      --bgcolor-f5:#f5f5f5;
      --bgcolor-fc:#fcfcfc;
      --border-40:#404040;
      --border-d4:#d4d4d4;
      --border-ea:#eaeaea;
      --border-dd:#ddd;
      --font-red:red;
      --font-666:#666;
      --font-dddadb:#dddadb;
      --font-555:#555;
      --font-333:#333;
      }

    • ewshop.css文件内容

      /设置公告样式样式/
      .fl{
      float:left;
      }
      .fr{
      float:right
      }
      .c{
      clear: both;
      }

      /宽度/
      .w-100{
      width:100%;
      }
      .w-980px{
      width: 980px;
      }
      /高度/
      .h-100{
      height: 100%;
      }
      /外间距/

      /顶部/
      .mt-0{
      margin-top: 0px;
      }
      .mt-1{
      margin-top:5px;
      }
      .mt-2{
      margin-top:10px;
      }
      .mt-3{
      margin-top: 15px;
      }
      .mt-4{
      margin-top: 20px;
      }
      /左侧/
      .ml-0{
      margin-left: 0px;
      }
      .ml-1{
      margin-left:5px;
      }
      .ml-2{
      margin-left: 10px;
      }
      .ml-3{
      margin-left: 15px;
      }
      .ml-4{
      margin-left: 20px;
      }
      /底部/
      .mb-0{
      margin-bottom: 0px;
      }
      .mb-1{
      margin-bottom: 5px;
      }
      .mb-2{
      margin-bottom: 10px;
      }
      .mb-3{
      margin-bottom: 15px;
      }
      .mb-4{
      margin-bottom: 20px;
      }
      /右侧外间距/
      .mr-0{
      margin-right: 0px;
      }
      .mr-1{
      margin-right: 5px;
      }
      .mr-2{
      margin-right: 10px;
      }
      .mr-3{
      margin-right: 15px;
      }
      .mr-4{
      margin-right: 20px;
      }
      /水平方向外间距/
      .mx-0{
      margin-left:0px;
      margin-right:0px;
      }
      .mx-1{
      margin-left:5px;
      margin-right:5px;
      }
      .mx-2{
      margin-left:10px;
      margin-right:10px;
      }
      .mx-3{
      margin-left:15px;
      margin-right:15px;
      }
      .mx-4{
      margin-left:20px;
      margin-right:20px;
      }
      /垂直方向外间距/
      .my-0{
      margin-top:0px;
      margin-bottom:0px;
      }
      .my-1{
      margin-top:5px;
      margin-bottom:5px;
      }
      .my-2{
      margin-top:10px;
      margin-bottom:10px;
      }
      .my-3{
      margin-top:15px;
      margin-bottom:15px;
      }
      .my-4{
      margin-top:20px;
      margin-bottom:20px;
      }
      /块状元素居中/
      .m-auto{
      margin-left: auto;
      margin-right: auto;
      }
      /同时设置四个方向外间距/
      .m-0{
      margin-left: 0px;
      margin-top: 0px;
      margin-bottom: 0px;
      margin-right: 0px;
      }
      .m-1{
      margin-left: 5px;
      margin-top: 5px;
      margin-bottom: 5px;
      margin-right: 5px;
      }
      .m-2{
      margin-left: 10px;
      margin-top: 10px;
      margin-bottom: 10px;
      margin-right: 10px;
      }
      .m-3{
      margin-left: 15px;
      margin-top: 15px;
      margin-bottom: 15px;
      margin-right: 15px;
      }
      .m-4{
      margin-left: 20px;
      margin-top: 20px;
      margin-bottom: 20px;
      margin-right: 20px;
      }
      /内间距/

      /同时设置四个方向内间距/
      .p-0{
      padding-bottom: 0px;
      padding-left: 0px;
      padding-top: 0px;
      padding-right: 0px;
      }
      .p-1{
      padding-bottom: 5px;
      padding-left: 5px;
      padding-top: 5px;
      padding-right: 5px;
      }
      .p-2{
      padding-bottom: 10px;
      padding-left: 10px;
      padding-top: 10px;
      padding-right: 10px;
      }
      .p-3{
      padding-bottom: 15px;
      padding-left: 15px;
      padding-top: 15px;
      padding-right: 15px;
      }
      .p-4{
      padding-bottom: 20px;
      padding-left: 20px;
      padding-top: 20px;
      padding-right: 20px;
      }
      /设置顶部内间距/
      .pt-0{
      padding-top: 0px;
      }
      .pt-1{
      padding-top: 5px;
      }
      .pt-2{
      padding-top: 10px;
      }
      .pt-3{
      padding-top: 15px;
      }
      .pt-4{
      padding-top: 20px;
      }
      /设置左侧内间距/
      .pl-0{
      padding-left: 0px;
      }
      .pl-1{
      padding-left: 5px;
      }
      .pl-2{
      padding-left: 10px;
      }
      .pl-3{
      padding-left: 15px;
      }
      .pl-4{
      padding-left: 20px;
      }
      /设置右侧内间距/
      .pr-0{
      padding-right: 0px;
      }
      .pr-1{
      padding-right: 5px;
      }
      .pr-2{
      padding-right: 10px;
      }
      .pr-3{
      padding-right: 15px;
      }
      .pr-4{
      padding-right: 20px;
      }
      /设置底部内间距/
      .pb-0{
      padding-bottom: 0px;
      }
      .pb-1{
      padding-bottom: 5px;
      }
      .pb-2{
      padding-bottom: 10px;
      }
      .pb-3{
      padding-bottom: 15px;
      }
      .pb-4{
      padding-bottom: 20px;
      }
      /设置垂直方向内间距/
      .py-0{
      padding-top: 0px;
      padding-bottom: 0px;
      }
      .py-1{
      padding-top: 5px;
      padding-bottom: 5px;
      }
      .py-2{
      padding-top: 10px;
      padding-bottom: 10px;
      }
      .py-3{
      padding-top: 15px;
      padding-bottom: 15px;
      }
      .py-4{
      padding-top: 20px;
      padding-bottom: 20px;
      }
      /设置水平方向内间距/
      .px-0{
      padding-left: 0px;
      padding-right: 0px;
      }
      .px-1{
      padding-left: 5px;
      padding-right: 5px;
      }
      .px-2{
      padding-left: 10px;
      padding-right: 10px;
      }
      .px-3{
      padding-left: 15px;
      padding-right: 15px;
      }
      .px-4{
      padding-left: 20px;
      padding-right: 20px;
      }
      /边框/
      .border{
      border:1px solid var(--border-40)
      }
      .border-top{
      border-top: 1px solid var(--border-40)
      }
      .border-bottom{
      border-bottom:1px solid var(--border-40);
      }
      .border-40{
      border-color: var(--border-40);
      }
      .border-d4{
      border-color: var(--border-d4);
      }
      .border-dd{
      border-color: var(--border-dd);
      }
      .border-ea{
      border-color: var(--border-ea);
      }
      .border-0{
      border:none;
      }
      /设置怪异盒/
      .border-box{
      box-sizing: border-box;
      }
      /超出内容隐藏/
      .overflow-hidden{
      overflow: hidden;
      }
      /背景色/
      .bg-color-red{
      background: var(--bg-red);
      }
      .bg-color-f5{
      background:var(--bgcolor-f5);
      }
      .bg-color-fc{
      background: var(--bgcolor-fc);
      }
      /字体色/
      .font-white{
      color:var(--font-white)
      }
      .font-red{
      color:var(--font-red)
      }
      .font-666{
      color:var(--font-666)
      }
      .font-dddadb{
      color: var(--font-dddadb);
      }
      .font-555{
      color:var(--font-555)
      }
      .font-333{
      color: var(--font-333);
      }
      /字体大小/
      .font-12px{
      font-size:12px;
      }
      .font-14{
      font-size:14px;
      }
      .font-16{
      font-size:16px;
      }
      .font-weight-bold{
      font-weight: bold;
      }
      /内容水平设置/
      .align-center{
      text-align:center;
      }
      .align-left{
      text-align: left;
      }
      .align-right{
      text-align: right;
      }

  • index.css 文件内容

    /*header style*/
.top_left{
  width: 200px;
}
.top_right{
  width: 310px;
}

/*search style*/
.logo{
  width: 145px;
}
.search_form{
  /*border:1px solid red;*/
  width: 400px;
  margin-left: 80px;
  height: 50px;
  line-height: 50px;
  position: relative;
}
.search_form input[type=search]{
  width: 315px;
  box-sizing: border-box;
  height: 34px;
  border:2px solid #E60012;
}
.search_form input[type=submit]{
  width: 80px;
  height: 34px;
  border:none;
  box-sizing: border-box;
  background: #E60012;
  color: white;
  position: absolute;
  top:9px;
}
.phone{
  border-radius: 25px;
}
/*nav style*/
nav ul li{
  padding-left:5px;
  padding-top: 1px;
  background: url('../img/li_bg.gif') no-repeat right center;
}
nav ul li a{
  padding-left: 30px;
  padding-right: 30px;
}
nav ul li a:hover{
  background: #fff;
  color:#E60012;
}

/*bargain style*/
.bargain_left{
  width:200px;
  height: 300px;
}
.bargain_left>div:first-child{
  background: url("../img/tb9.gif") no-repeat 8px center;
  padding-left: 30px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-top:2px solid var(--border-40);
  border-left:1px solid var(--border-dd);
  border-bottom:1px solid var(--border-dd);
  border-right:1px solid var(--border-dd);
}
.bargain_left>div:last-child{
  width: 100%;
  height: 263px;
  border-left: 1px solid var(--border-dd);
  border-bottom: 1px solid var(--border-dd);
  border-right: 1px solid var(--border-dd);
  background: url('../img/tuijian_bg.gif') repeat-x bottom;
  /*background-size: 100%;*/
}
.bargain_goods{
  width: 100%;
  box-sizing: border-box;
  border-bottom: 1px dotted var(--border-dd);
}
.bargain_goods>img{
  height: 60px;
  border:1px solid var(--border-dd)
}
.bargain_goods>div{
  height: 60px;
}

.bargain_center{
  width: 530px;
  height: 300px;
}
.bargain_right{
  width: 238px;
  height: 300px;
  box-sizing: border-box;
}
.bargain_right_top{
  padding:8px 0px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.bargain_right_bottom{
  border:1px solid red;
  height: 265px;
  box-sizing: border-box;
  border-left: 1px solid var(--border-dd);
  border-right: 1px solid var(--border-dd);
  border-bottom: 1px solid var(--border-dd);
}
.bargain_right_bottom ul li{
  line-height: 30px;
  height: 30px;
  border-bottom: 1px #ddd dashed;
  list-style:url("../img/tb6.gif") inside;
  padding-left: 1px;
}
.bargain_right_bottom ul li a{
  color:#333;
}
.bargain_right_bottom ul li:hover a{
  color:orange;
}

/*新品推荐 开始*/
.newGoods{
  height: 270px;
  background: url('../img/hy_rtt.gif') repeat-x;
}
.newGoods_title{
  background: url('../img/tb8.gif') no-repeat 10px center;
  padding-left: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.newGoods_goods{
  width: 100%;
  height: 231px;
  /*border:1px solid red;*/
  box-sizing: border-box;
  background: url("../img/tuijian_bg.gif") repeat-x bottom;
}
.newGoods_goods div{
  width: 195px;
  height: 225px;
  background: url("../img/tuijian_bg1.gif") no-repeat right;
  margin-top: 3px;
  border: 1px solid transparent;
  box-sizing: border-box;
}
.newGoods_goods div>div:hover{
  border:1px solid orange;
  box-sizing: border-box;
}
.newGoods_goods div>div{
  width:152px;
  height: 152px;
}
.newGoods_goods div>div>a>img{
  width: 100%;
  height: 100%;
}
.newGoods_goods div>p:nth-of-type(1){
  /*border:1px solid red;*/
  margin: 5px 0px;
  padding-left: 15px;
}
.newGoods_goods div>p:nth-of-type(1)>a{
  color: var(--font-555);
}
.newGoods_goods div>p:nth-of-type(2)>small{
  color:#888;
  text-decoration: line-through;
}
/*前端模块通用样式 */
.web{
  background: url('../img/hy_rtt.gif') repeat-x;
}
.web_title{
  background: url('../img/tb8.gif') no-repeat 10px center;
  padding-left: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
  border-left:1px solid var(--border-dd);
  border-right:1px solid var(--border-dd)
}
.web_body{
  height: 459px;
  box-sizing: border-box;
}
.web_body_left{
  width: 734px;
  border-left:1px solid var(--border-dd);
  border-top:1px solid var(--border-dd);
  box-sizing: border-box;
}
.web_body_left>div{
  width: 183px;
  height: 229px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--border-dd);
  border-right: 1px solid var(--border-dd);
  float: left;
}
.web_body_left>div>div:first-child{
  width: 150px;
  height: 150px;
  margin: 10px auto 8px auto;
}
.web_body_left>div>div:first-child>a>img{
  width: 100%;
}
.web_body_right{
  box-sizing: border-box;
  width: 236px;
  border:1px solid var(--border-dd);
}
.web_body_right>div:first-child{
  height: 32px;
  line-height: 32px;
  border-top: 1px solid var(--border-dd);
  border-bottom: 1px solid var(--border-dd);
  background: #f8f8f8;
}
.web_body_right>ul{
  padding: 0px 5px;
  box-sizing: border-box;
}
.web_body_right>ul>li{
  padding: 11px 0px;
  box-sizing: border-box;
  border-bottom: 1px dotted var(--border-dd);
}
.web_body_right>ul>li>span:first-child{
  width:62px;
  height: 62px;
  border:1px solid var(--border-dd);
  box-sizing: border-box;
}
.web_body_right>ul>li>span:first-child img{
  width: 100%;
  height: 100%;
}
.web_body_right>ul>li>span:last-child {
  margin-left: 5px;
  padding-top: 2px;
  height: 62px;
  box-sizing: border-box;
}
.web_body_right>ul>li>span:last-child>a{
  width: 100%;
  height: 38px;
}
/*网站底部*/
.fingerpost{
  height: 135px;
  border:1px solid var(--border-d4);
  box-sizing: border-box;
}
.fingerpost>div:not(.qq,.bottom-libg){
  width: 175px;
  height: 100%;
  background: url("../img/item_bg.gif") repeat-x;
  padding: 10px 20px;
  box-sizing: border-box;
}
.fingerpost>div>h3{
  padding-bottom: 8px;
  background: url("../img/link_bg.gif") repeat-x center bottom;
}
.fingerpost>div>ul{
  padding-bottom: 30px;
}
.fingerpost>div>ul>li{
  list-style: url("../img/tb6.gif") inside;
  line-height: 22px;
}
.fingerpost>.bottom-libg{
  width: 2px;
  height: 100%;
  background: url("../img/bottom_libg.gif") no-repeat;
  padding: 0px;
}
.qq{
  height: 100%;
  width: 270px;
  box-sizing: border-box;
}
.qq>div:last-child{
  height: 36px;
  background: url("../img/foot_tel.gif") no-repeat left center;
  width: 243px;
  margin-top: 10px;
  line-height: 33px;
  color: var(--font-white);
  font-size: 20px;
  padding-left: 100px;
}
.foot>div:last-child>a{
  color:green;
}
.foot>div:last-child>a:hover{
  color: orange;
}

  • index.html文件内容

    <!doctype html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>EWshop首页</title>
      <link rel="stylesheet" href="./css/global.css" />
      <link rel="stylesheet" href="./css/ewshop.css" />
      <link rel="stylesheet" href="./css/index.css">
      <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3979780_xm8vkr6gys.css">
  </head>
  <body>
      <!--公共头部-->
      <header>
          <!--头部内容-->
          <div id="top" class="w-100 border-top border-box bg-color-f5 border-bottom border-dd">
              <div class="top w-980px overflow-hidden m-auto">
                  <div class="top_left fl py-1 font-666">您好，欢迎使用EWShop商城系统</div>
                  <div class="top_right fr">
                      <ul class="w-100 fl py-1">
                          <li class="fl"><a href="" class="fl px-3 font-666">登录</a><span class="font-dddadb fl">|</span></li>
                          <li class="fl"><a href="" class="fl px-3 font-666">注册</a><span class="font-dddadb fl">|</span></li>
                          <li class="fl">
                              <a href="" class="fl px-3 font-666">
                              <i class="iconfont icon-gouwuche"></i>
                              购物车
                              <span class="font-red">0</span>
                              件</a>
                              <span class="font-dddadb fl">|</span>
                          </li>
                          <li class="fl"><a href="" class="fl px-3 font-666">订单查询</a></li>
                      </ul>
                  </div>
              </div>
          </div>
          <!--搜索区域-->
          <div class="search my-4 w-980px m-auto">
              <div class="fl logo">
                  <img src="./img/logo.png" class="w-100" alt="">
              </div>
              <div class="fl search_form">
                  <form action="" method="get">
                      <input type="search" name="search" id="">
                      <input type="submit" value="搜索" />
                  </form>
              </div>
              <div class="fr phone border border-dd bg-color-f5 font-16 font-red font-weight-bold mt-2 py-1 px-3">
                  咨询热线：400-700-8888
              </div>
          </div>
          <div class="c"></div>
          <!--导航区域-->
          <nav class="w-980px overflow-hidden my-2 m-auto bg-color-red">
              <ul class="fl">
                  <li class="fl"><a href="" class="font-white font-weight-bold fl font-14 py-2 px-4">首页</a></li>
                  <li class="fl"><a href="" class="font-white font-weight-bold fl font-14 py-2 px-4">前端</a></li>
                  <li class="fl"><a href="" class="font-white font-weight-bold fl font-14 py-2 px-4">后端</a></li>
                  <li class="fl"><a href="" class="font-white font-weight-bold fl font-14 py-2 px-4">云计算</a></li>
                  <li class="fl"><a href="" class="font-white font-weight-bold fl font-14 py-2 px-4">产品设计</a></li>
                  <li class="fl"><a href="" class="font-white font-weight-bold fl font-14 py-2 px-4">前沿</a></li>
                  <li class="fl"><a href="" class="font-white font-weight-bold fl font-14 py-2 px-4">关于我们</a></li>
              </ul>
          </nav>
          <!--广告-->
          <div class="w-980px m-auto">
              <img src="./img/ad.png" alt="">
          </div>
      </header>
      <!--特价商品-->
      <section class="bargain mt-2 w-980px overflow-hidden m-auto ">
          <div class="bargain_left fl">
              <div class="font-14 font-weight-bold bg-color-fc border-box w-100 font-555 pl-4">特价商品</div>
              <div class="bargain_left_bottom border-box fl px-1">
                  <div class="bargain_goods fl py-2">
                      <img src="./img/s.png" class="fl" alt="">
                      <div class="fr px-1">
                          <a class="font-12px font-555">《细说PHP》 第4版</a>
                          <p class="font-12px mt-4">
                              <span class="font-red">￥108.0</span>
                              <del class="font-555">￥158.0</del>
                          </p>
                      </div>
                  </div>
                  <div class="bargain_goods fl py-2">
                      <img src="./img/s.png" class="fl" alt="">
                      <div class="fr px-1">
                          <a class="font-12px font-555">《细说PHP》 第4版</a>
                          <p class="font-12px mt-4">
                              <span class="font-red">￥108.0</span>
                              <del class="font-555">￥158.0</del>
                          </p>
                      </div>
                  </div>
                  <div class="bargain_goods fl py-2">
                      <img src="./img/s.png" class="fl" alt="">
                      <div class="fr px-1">
                          <a class="font-12px font-555">《细说PHP》 第4版</a>
                          <p class="font-12px mt-4">
                              <span class="font-red">￥108.0</span>
                              <del class="font-555">￥158.0</del>
                          </p>
                      </div>
                  </div>
              </div>
          </div>
          <div class="bargain_center border-box overflow-hidden fl">
              <img src="./img/2020-0827-5f474a7259d67.png" class="w-100 h-100" alt="">
          </div>
          <div class="bargain_right fr">
              <div class="bargain_right_top fl w-100 bg-color-red">
                  <div class="fl ml-2 font-white font-weight-bold font-14">网站公告</div>
                  <a href="" class="fr mr-2 font-white font-weight-bold font-14">更多>></a>
              </div>
              <div class="bargain_right_bottom fl w-100">
                  <ul class="px-1">
                      <li><a href="">2020年新书商家，共有新品3000套</a></li>
                      <li><a href="">2020年新书商家，共有新品3000套</a></li>
                      <li><a href="">2020年新书商家，共有新品3000套</a></li>
                      <li><a href="">2020年新书商家，共有新品3000套</a></li>
                      <li><a href="">2020年新书商家，共有新品3000套</a></li>
                      <li><a href="">2020年新书商家，共有新品3000套</a></li>
                      <li><a href="">2020年新书商家，共有新品3000套</a></li>
                      <li><a href="">2020年新书商家，共有新品3000套</a></li>
                  </ul>
              </div>
          </div>
      </section>
      <!--商品推荐-->
      <section class="w-980px newGoods overflow-hidden my-2 m-auto border border-box border-dd">
          <div class="newGoods_title font-14 font-555 font-weight-bold">商品推荐</div>
          <div class="newGoods_goods">
              <div class="fl">
                  <div class="m-auto mt-3"><a href="" class=""><img class="" src="./img/2020-0820-5f3e084e2b714.png" alt=""></a></div>
                  <p><a href="">《细说PHP》第2版</a></p>
                  <p class="mt-2 align-center">
                      <span class="font-16 font-red">￥78.0</span>
                      <small class="">￥118.0</small>
                  </p>
              </div>
              <div class="fl">
                  <div class="m-auto mt-3"><a href="" class=""><img class="" src="./img/2020-0820-5f3e084e2b714.png" alt=""></a></div>
                  <p><a href="">《细说PHP》第2版</a></p>
                  <p class="mt-2 align-center">
                      <span class="font-16 font-red">￥78.0</span>
                      <small class="">￥118.0</small>
                  </p>
              </div>
              <div class="fl">
                  <div class="m-auto mt-3"><a href="" class=""><img class="" src="./img/2020-0820-5f3e084e2b714.png" alt=""></a></div>
                  <p><a href="">《细说PHP》第2版</a></p>
                  <p class="mt-2 align-center">
                      <span class="font-16 font-red">￥78.0</span>
                      <small class="">￥118.0</small>
                  </p>
              </div>
              <div class="fl">
                  <div class="m-auto mt-3"><a href="" class=""><img class="" src="./img/2020-0820-5f3e084e2b714.png" alt=""></a></div>
                  <p><a href="">《细说PHP》第2版</a></p>
                  <p class="mt-2 align-center">
                      <span class="font-16 font-red">￥78.0</span>
                      <small class="">￥118.0</small>
                  </p>
              </div>
              <div class="fl">
                  <div class="m-auto mt-3"><a href="" class=""><img class="" src="./img/2020-0820-5f3e084e2b714.png" alt=""></a></div>
                  <p><a href="">《细说PHP》第2版</a></p>
                  <p class="mt-2 align-center">
                      <span class="font-16 font-red">￥78.0</span>
                      <small class="">￥118.0</small>
                  </p>
              </div>
          </div>
      </section>
      <div class="c"></div>
      <!--前端-->
      <section class="web w-980px m-auto overflow-hidden border-box  my-2">
          <div class="web_title fl w-100">
              <div class="fl font-14 font-555 font-weight-bold">前端</div>
              <div class="fr pr-1"><a href="" class="font-555">更多>></a></div>
          </div>
          <div class="web_body fl w-100 mt-2">
              <div class="web_body_left fl h-100">
                  <div>
                      <div>
                          <a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a>
                      </div>
                      <div class="pl-2">
                          <a href="" class="font-555">《细说网页制作》</a>
                      </div>
                      <div class="align-center mt-3">
                          <span class="font-16 font-red">￥38.0</span>
                          <del class="font-666">￥58.0</del>
                      </div>
                  </div>
                  <div>
                      <div>
                          <a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a>
                      </div>
                      <div class="pl-2">
                          <a href="" class="font-555">《细说网页制作》</a>
                      </div>
                      <div class="align-center mt-3">
                          <span class="font-16 font-red">￥38.0</span>
                          <del class="font-666">￥58.0</del>
                      </div>
                  </div>
                  <div>
                      <div>
                          <a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a>
                      </div>
                      <div class="pl-2">
                          <a href="" class="font-555">《细说网页制作》</a>
                      </div>
                      <div class="align-center mt-3">
                          <span class="font-16 font-red">￥38.0</span>
                          <del class="font-666">￥58.0</del>
                      </div>
                  </div>
                  <div>
                      <div>
                          <a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a>
                      </div>
                      <div class="pl-2">
                          <a href="" class="font-555">《细说网页制作》</a>
                      </div>
                      <div class="align-center mt-3">
                          <span class="font-16 font-red">￥38.0</span>
                          <del class="font-666">￥58.0</del>
                      </div>
                  </div>
                  <div>
                      <div>
                          <a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a>
                      </div>
                      <div class="pl-2">
                          <a href="" class="font-555">《细说网页制作》</a>
                      </div>
                      <div class="align-center mt-3">
                          <span class="font-16 font-red">￥38.0</span>
                          <del class="font-666">￥58.0</del>
                      </div>
                  </div>
                  <div>
                      <div>
                          <a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a>
                      </div>
                      <div class="pl-2">
                          <a href="" class="font-555">《细说网页制作》</a>
                      </div>
                      <div class="align-center mt-3">
                          <span class="font-16 font-red">￥38.0</span>
                          <del class="font-666">￥58.0</del>
                      </div>
                  </div>
                  <div>
                      <div>
                          <a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a>
                      </div>
                      <div class="pl-2">
                          <a href="" class="font-555">《细说网页制作》</a>
                      </div>
                      <div class="align-center mt-3">
                          <span class="font-16 font-red">￥38.0</span>
                          <del class="font-666">￥58.0</del>
                      </div>
                  </div>
                  <div>
                      <div>
                          <a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a>
                      </div>
                      <div class="pl-2">
                          <a href="" class="font-555">《细说网页制作》</a>
                      </div>
                      <div class="align-center mt-3">
                          <span class="font-16 font-red">￥38.0</span>
                          <del class="font-666">￥58.0</del>
                      </div>
                  </div>
              </div>
              <div class="web_body_right fr h-100">
                  <div class="w-100 fl font-14 font-555 font-weight-bold pl-2 border-box">
                      【前端】 热销排行
                  </div>
                  <ul class="fl w-100">
                      <li class="fl w-100">
                          <span class="fl"><a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a></span>
                          <span class="fl"><a href="" class="font-555 fl">《细说网页制作》</a><span class="font-red">￥ 38.0</span></span>
                      </li>
                      <li class="fl w-100">
                          <span class="fl"><a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a></span>
                          <span class="fl"><a href="" class="font-555 fl">《细说网页制作》</a><span class="font-red">￥ 38.0</span></span>
                      </li>
                      <li class="fl w-100">
                          <span class="fl"><a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a></span>
                          <span class="fl"><a href="" class="font-555 fl">《细说网页制作》</a><span class="font-red">￥ 38.0</span></span>
                      </li>
                      <li class="fl w-100">
                          <span class="fl"><a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a></span>
                          <span class="fl"><a href="" class="font-555 fl">《细说网页制作》</a><span class="font-red">￥ 38.0</span></span>
                      </li>
                      <li class="fl w-100">
                          <span class="fl"><a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a></span>
                          <span class="fl"><a href="" class="font-555 fl">《细说网页制作》</a><span class="font-red">￥ 38.0</span></span>
                      </li>
                  </ul>
              </div>
          </div>
      </section>
      <!--云计算-->
      <section class="web w-980px m-auto overflow-hidden border-box  my-2">
          <div class="web_title fl w-100">
              <div class="fl font-14 font-555 font-weight-bold">云计算</div>
              <div class="fr pr-1"><a href="" class="font-555">更多>></a></div>
          </div>
          <div class="web_body fl w-100 mt-2">
              <div class="web_body_left fl h-100">
                  <div>
                      <div>
                          <a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a>
                      </div>
                      <div class="pl-2">
                          <a href="" class="font-555">《细说网页制作》</a>
                      </div>
                      <div class="align-center mt-3">
                          <span class="font-16 font-red">￥38.0</span>
                          <del class="font-666">￥58.0</del>
                      </div>
                  </div>
                  <div>
                      <div>
                          <a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a>
                      </div>
                      <div class="pl-2">
                          <a href="" class="font-555">《细说网页制作》</a>
                      </div>
                      <div class="align-center mt-3">
                          <span class="font-16 font-red">￥38.0</span>
                          <del class="font-666">￥58.0</del>
                      </div>
                  </div>
                  <div>
                      <div>
                          <a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a>
                      </div>
                      <div class="pl-2">
                          <a href="" class="font-555">《细说网页制作》</a>
                      </div>
                      <div class="align-center mt-3">
                          <span class="font-16 font-red">￥38.0</span>
                          <del class="font-666">￥58.0</del>
                      </div>
                  </div>
                  <div>
                      <div>
                          <a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a>
                      </div>
                      <div class="pl-2">
                          <a href="" class="font-555">《细说网页制作》</a>
                      </div>
                      <div class="align-center mt-3">
                          <span class="font-16 font-red">￥38.0</span>
                          <del class="font-666">￥58.0</del>
                      </div>
                  </div>
                  <div>
                      <div>
                          <a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a>
                      </div>
                      <div class="pl-2">
                          <a href="" class="font-555">《细说网页制作》</a>
                      </div>
                      <div class="align-center mt-3">
                          <span class="font-16 font-red">￥38.0</span>
                          <del class="font-666">￥58.0</del>
                      </div>
                  </div>
                  <div>
                      <div>
                          <a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a>
                      </div>
                      <div class="pl-2">
                          <a href="" class="font-555">《细说网页制作》</a>
                      </div>
                      <div class="align-center mt-3">
                          <span class="font-16 font-red">￥38.0</span>
                          <del class="font-666">￥58.0</del>
                      </div>
                  </div>
                  <div>
                      <div>
                          <a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a>
                      </div>
                      <div class="pl-2">
                          <a href="" class="font-555">《细说网页制作》</a>
                      </div>
                      <div class="align-center mt-3">
                          <span class="font-16 font-red">￥38.0</span>
                          <del class="font-666">￥58.0</del>
                      </div>
                  </div>
                  <div>
                      <div>
                          <a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a>
                      </div>
                      <div class="pl-2">
                          <a href="" class="font-555">《细说网页制作》</a>
                      </div>
                      <div class="align-center mt-3">
                          <span class="font-16 font-red">￥38.0</span>
                          <del class="font-666">￥58.0</del>
                      </div>
                  </div>
              </div>
              <div class="web_body_right fr h-100">
                  <div class="w-100 fl font-14 font-555 font-weight-bold pl-2 border-box">
                      【前端】 热销排行
                  </div>
                  <ul class="fl w-100">
                      <li class="fl w-100">
                          <span class="fl"><a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a></span>
                          <span class="fl"><a href="" class="font-555 fl">《细说网页制作》</a><span class="font-red">￥ 38.0</span></span>
                      </li>
                      <li class="fl w-100">
                          <span class="fl"><a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a></span>
                          <span class="fl"><a href="" class="font-555 fl">《细说网页制作》</a><span class="font-red">￥ 38.0</span></span>
                      </li>
                      <li class="fl w-100">
                          <span class="fl"><a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a></span>
                          <span class="fl"><a href="" class="font-555 fl">《细说网页制作》</a><span class="font-red">￥ 38.0</span></span>
                      </li>
                      <li class="fl w-100">
                          <span class="fl"><a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a></span>
                          <span class="fl"><a href="" class="font-555 fl">《细说网页制作》</a><span class="font-red">￥ 38.0</span></span>
                      </li>
                      <li class="fl w-100">
                          <span class="fl"><a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a></span>
                          <span class="fl"><a href="" class="font-555 fl">《细说网页制作》</a><span class="font-red">￥ 38.0</span></span>
                      </li>
                  </ul>
              </div>
          </div>
      </section>
<!--        底部广告-->
      <div class="w-980px m-auto border-box">
          <img src="./img/ad.png" alt="">
      </div>
<!--        网站底部-->
      <footer class="w-980px m-auto overflow-hidden border-box my-2">
          <div class="fl fingerpost w-100">
              <div class="fl">
                  <h3 class="font-666 pl-2 mt-2 font-14">用户指南</h3>
                  <ul class="pl-2 mt-1">
                      <li><a href="" class="font-666">订单查询</a></li>
                      <li><a href="" class="font-666">验货与签收</a></li>
                      <li><a href="" class="font-666">配送时间及运费</a></li>
                  </ul>
              </div>
              <div class="fl bottom-libg"></div>
              <div class="fl">
                  <h3 class="font-666 pl-2 mt-2 font-14">用户指南</h3>
                  <ul class="pl-2 mt-1">
                      <li><a href="" class="font-666">订单查询</a></li>
                      <li><a href="" class="font-666">验货与签收</a></li>
                      <li><a href="" class="font-666">配送时间及运费</a></li>
                  </ul>
              </div>
              <div class="fl bottom-libg"></div>
              <div class="fl">
                  <h3 class="font-666 pl-2 mt-2 font-14">用户指南</h3>
                  <ul class="pl-2 mt-1">
                      <li><a href="" class="font-666">订单查询</a></li>
                      <li><a href="" class="font-666">验货与签收</a></li>
                      <li><a href="" class="font-666">配送时间及运费</a></li>
                  </ul>
              </div>
              <div class="fl bottom-libg"></div>
              <div class="fl">
                  <h3 class="font-666 pl-2 mt-2 font-14">用户指南</h3>
                  <ul class="pl-2 mt-1">
                      <li><a href="" class="font-666">订单查询</a></li>
                      <li><a href="" class="font-666">验货与签收</a></li>
                      <li><a href="" class="font-666">配送时间及运费</a></li>
                  </ul>
              </div>
              <div class="fl bottom-libg"></div>
              <div class="fl qq pl-3">
                  <div class="qq_title font-666 font-16 mt-3">欢迎使用EWShop商城系统</div>
                  <div class="mt-2">
                      <a href=""><img src="./img/button_11.gif" alt=""></a>
                      <a href=""><img src="./img/button_11.gif" alt=""></a>
                      <a href=""><img src="./img/button_11.gif" alt=""></a>
                  </div>
                  <div>400-700-8888</div>
              </div>
          </div>
          <div class="link fl w-100 p-2 border-box border border-dd my-2">
              <span class="font-666 mr-2">友情链接:</span>
              <a href=""class="font-666 ml-2">学习猿地</a>
              <a href=""class="font-666 ml-2">学习猿地</a>
              <a href=""class="font-666 ml-2">学习猿地</a>
              <a href=""class="font-666 ml-2">学习猿地</a>
          </div>
          <div class="foot my-3">
              <div class="align-center font-333">Copyright © 学习猿地 2019-2022 All Rights Reserved 京ICP备1101010121号 京公网安备 101010101</div>
              <div class="align-center font-333 my-1">咨询热线：400-700-8888 咨询QQ：779050720,46458494,8888888　</div>
              <div class="align-center font-333">
                  Powered by
                  <a href="">EDUWORK</a>
              </div>
          </div>
      </footer>
  </body>
</html>

1.3.18. 弹性盒模型

  • 介绍

    • 伸缩盒模型也叫弹性盒模型，或flex。它决定一个盒子在其它盒子中的分布，以及如何处理可用的空间。使用该模型，可以轻松的创建"自适应"浏览器窗口的流动布局。
    • flexbox是一个很新的东西，在w3c希望可以使用flexbox实现一些更复杂的布局和应用。传统盒模型基于HTML文档流排列，使用弹性盒模型可以规定特定的顺序。要开启弹性盒模型，只需要设置display的属性值 flex，因为它是CSS3中为display新添加的值类型。

  • 目的

    • 在浏览器窗口变化时，盒子相应改变大小。 设置了弹性盒模型后，float，clear和vertical-align在flex中不起作用。

  • display:flex 定义父容器是一个弹性盒。

    • 案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex</title> <style> .one{ width:980px; height: 500px; border:1px solid #ddd; margin: 20px auto; /*伸缩盒属性需要给容器设置*/ display: flex; } .one>div{ width: 400px; height: 300px; border:1px solid tomato;; } </style> </head> <body>
      左
      中
      右
      </body> </html>

  • display:inline-flex 定义父容器时行内弹性盒

    • 案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex</title> <style> .one{ width:980px; height: 500px; border:1px solid #ddd; margin: 20px auto; /*伸缩盒属性需要给容器设置*/ display: inline-flex; } .one>div{ width: 400px; height: 300px; border:1px solid tomato;; } </style> </head> <body> a
      左
      中
      右
      a </body> </html>

  • Justify-content 设置活检索弹性盒子元素在(主轴)方向上的对齐方式。

    • flex-start 默认值。项目位于容器的开头

    • flex-end 项目位于容器的结尾

    • center 项目位于容器的中心

    • space-between 项目位于各行之间留有空白的容器内。

    • space-around 项目位于各行之前、之间、之后都留有空白的容器内。

    • 案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex</title> <style> .one,.two,.three,.four{ width:980px; height: 500px; border:1px solid #ddd; margin: 20px auto; /*伸缩盒属性需要给容器设置*/ /*display: inline-flex;*/ display: flex; /*设置主轴对齐方式*/ /*设置结尾*/ justify-content: flex-end; } .one>div,.two>div,.three>div,.four>div{ width: 200px; height: 300px; border:1px solid tomato;; } .two{ /*设置主轴居中*/ justify-content: center; } .three{ /*设置主轴两端对齐中间留有对应的空白*/ justify-content: space-between; } .four{ /*两端留有对应的空白 中间留有对应的空白*/ justify-content: space-around; } </style> </head> <body> 
            <!--父容器-->
      <div class="one">
          <!--每一个被包含的就是一个项目-->
          <div>左</div>
          <div>中</div>
          <div>右</div>
      </div>
      <div class="two">
          <!--每一个被包含的就是一个项目-->
          <div>左</div>
          <div>中</div>
          <div>右</div>
      </div>
      <div class="three">
          <!--每一个被包含的就是一个项目-->
          <div>左</div>
          <div>中</div>
          <div>右</div>
      </div>
      <div class="four">
          <!--每一个被包含的就是一个项目-->
          <div>左</div>
          <div>中</div>
          <div>右</div>
      </div>

  </body>
      </html>

  • align-items 定义flex子项在flex容器的当前行的侧轴(纵轴)方向的对齐方式

    • stretch 默认值，项目被拉伸以适应容器

    • center 项目位于容器的中心

    • flex-start 项目位于容器的开头

    • flex-end 项目位于容器的结尾

    • 案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex</title> <style> .one,.two,.three,.four{ width:980px; height: 500px; border:1px solid #ddd; margin: 20px auto; /*伸缩盒属性需要给容器设置*/ /*display: inline-flex;*/ display: flex; /*设置主轴对齐方式*/ /*设置结尾*/ justify-content: flex-end; /*设置侧轴对齐方式 垂直(默认)*/ align-items: flex-end; 
                }
          .one>div,.two>div,.three>div,.four>div{
              width: 200px;
              height: 300px;
              border:1px solid tomato;;
          }
          .two{
              /*设置主轴居中*/
              justify-content: center;
              /*设置侧轴居中*/
              align-items: center;
          }
          .two>div:nth-child(2){
              display: flex;
              justify-content: center;
              align-items: center;
          }
          .three{
              /*设置主轴两端对齐中间留有对应的空白*/
              justify-content: space-around;
              /*设置开头*/
              align-items: flex-start;
          }
          .four{
              /*两端留有对应的空白 中间留有对应的空白*/
              justify-content: space-around;
              /*默认的*/
              align-items: stretch;
          }
      </style>
  </head>
  <body>

      <!--父容器-->
      <div class="one">
          <!--每一个被包含的就是一个项目-->
          <div>左</div>
          <div>中</div>
          <div>右</div>
      </div>
      <div class="two">
          <!--每一个被包含的就是一个项目-->
          <div>左</div>
          <div>中</div>
          <div>右</div>
      </div>
      <div class="three">
          <!--每一个被包含的就是一个项目-->
          <div>flex-start左</div>
          <div>中</div>
          <div>右</div>
      </div>
      <div class="four">
          <!--每一个被包含的就是一个项目-->
          <div>stretch左</div>
          <div>中</div>
          <div>右</div>
      </div>

  </body>
      </html>

  • flex-direction 设置主轴的方向

    • row： 主轴与行内轴方向作为默认的书写模式。即横向从左到右排列（左对齐）。

    • row-reverse： 对齐方式与row相反。

    • column： 主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）。

    • column-reverse： 对齐方式与column相反。

    • 案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .one{ width: 980px; height: 800px; border: 1px solid #ddd; margin: 10px auto; display: flex; /*flex-direction:row-reverse ;*/ /*设置纵轴为主轴*/ /*flex-direction: column;*/ /*flex-direction: column-reverse;*/ flex-direction: column; /*设置纵轴的对齐方式*/ justify-content: center; /*设置侧轴的对齐方式*/ align-items: center; } .one>div{ width: 200px; height: 200px; border: 1px solid tomato; } </style> </head> <body>
      第一块
      第二快
      第三块
      </body> </html>

  • flex-wrap 控制flex容器是单行或者多行。

    • nowrap： flex容器为单行。该情况下flex子项可能会溢出容器

    • wrap： flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行

    • wrap-reverse： 反转 wrap 排列。

    • 案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .one{ width: 980px; height: 500px; border: 1px solid #ddd; margin: 10px auto; display: flex; /*设置为多行*/ /*flex-wrap: nowrap;*/ flex-wrap:wrap; /*flex-wrap: wrap-reverse;*/ } .one>div{ width: 300px; height: 200px; border: 1px solid orange; } </style> </head> <body>
      1
      2
      3
      4
      5
      </body> </html>

  • flex-flow:'flex-direction' || 'flex-wrap'

    • 案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .one{ width: 980px; height: 500px; border: 1px solid #ddd; margin: 10px auto; display: flex; /*设置为多行*/ /*flex-wrap: nowrap;*/ /*flex-wrap:wrap;*/ /*flex-wrap: wrap-reverse;*/ /*简写属性*/ flex-flow: row-reverse wrap; 
            }
      .one>div{
          width: 300px;
          height: 200px;
          border: 1px solid orange;
      }
  </style>
      </head> <body>
      1
      2
      3
      4
      5
      </body> </html>

  • align-content 与align-items类似，主要用来调准伸缩行在伸缩容器里的对齐方式(多行时)

    • flex-start ：各行向伸缩容器的起点位置堆叠。

    • flex-end ：各行向伸缩容器的结束位置堆叠。

    • center ：各行向伸缩容器的中间位置堆叠。

    • space-between ：各行在伸缩容器中平均分布。

    • space-around ：各行在伸缩容器中平均分布，在两边各有一半的空间。

    • stretch ： align-content 的默认值，各行将会伸展以占用额外的空间。

    • 案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .one{ width: 980px; height: 500px; border: 1px solid #ddd; margin: 10px auto; display: flex; /*设置为多行*/ /*flex-wrap: nowrap;*/ flex-wrap:wrap; /*flex-wrap: wrap-reverse;*/ /*简写属性*/ /*flex-flow: row-reverse wrap;*/ /*align-items: center;*/ 
                /*作用与align-items类似 适用于多行*/
          /*align-content: flex-start;*/
          /*align-content: flex-end;*/
          align-content: center;
          /*align-content: space-around;*/
          /*align-content: space-between;*/
          justify-content: space-between;
      }
      .one>div{
          width: 300px;
          height: 200px;
          border: 1px solid orange;
      }
  </style>
      </head> <body>
      1
      2
      3
      4
      5
      </body> </html>

  • flex-grow:number 规定项目将相对于其他灵活的项目进行扩展的量。默认是0。

    • 案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .one{ width: 980px; height: 200px; border: 1px solid #ddd; margin: 10px auto; display: flex; align-items: center; justify-content: space-between; } .one>div{ border: 1px solid tomato; } .one>div:first-child{ flex-grow: 1; } .one>div:nth-child(2){ flex-grow: 2; } .one>div:nth-child(3){ flex-grow: 1; } </style> </head> <body>
      1
      2
      3
      </body> </html>

1.3.19. CSS3新增属性

  1. 浏览器私有前缀

    • -moz- Firefox
    • -webkit- chrome safari
    • -ms- IE
    • -o- Opear
    • 作用

      • 用于区分不同浏览器的内核，当CSS属性是实验性质的时候，可以加浏览器私有前缀，让对应浏览器兼容

        <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .one{ width:800px; height:300px; background:pink; display: flex; /*-webkit-display:flex;*/ display: -o-flex; display: -webkit-flex; display: -moz-flex; display:-ms-flex; justify-content: space-between; -o-justify-content:space-between; -webkit-justify-content:space-between; -moz-justify-content:space-between; -ms-justify-content:space-between; -webkit-align-items: center; 
                }
        .one>div{
            width:200px;
            height:200px;
            background:tomato;
        }
    </style>
</head>
<body>
    <div class="one">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
        </html>

  1. 圆角、阴影、渐变

    • border-radius 圆角

      • border-radius:左上角水平 右上角水平 右下角水平 左下角水平 / 左上角垂直 右上角垂直 右下角垂直 左下角垂直

      • border-radius:4个角水平半径/4个角垂直半径

      • 关于圆角的形成

        • 从指定角的顶端向内部引出垂直半径和水平半径
        • 将水平半径和垂直半径相较于元素内部的一点(圆心点)
        • 以该点为圆心，指定的垂直半径和水平半径画圆或者椭圆

      • 案例

        <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .one{ width:100px; height:100px; border:1px solid #000; /*最完整格式：2个参数8个值*/ /*border-radius: 10px 20px 30px 40px / 10px 20px 30px 40px;*/ /*2个参数 4个值*/ /*border-radius: 10px 20px / 10px 20px;*/ /*1个参数 4个值*/ /*border-radius: 10px 20px 30px 40px;*/ /*1个参数 2个值*/ /*border-radius: 10px 20px;*/ /*1个参数 1个值*/ /*border-radius: 10px;*/ /*1个参数 3个值*/ /*border-radius: 10px 20px 15px;*/ /*border-radius: 10px 20px 30px 40px / 15px 25px 35px 45px;*/ /*border-radius: 50px;*/ /*border-radius: 50%;*/ border-radius: 61px; } </style> </head> <body>
        </body> </html>

      • 圆角边框案例(太极)

        <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .tj{ width: 100px; height: 50px; border:1px solid red; border-bottom:50px solid red; border-radius: 50%; position: relative; } .tj:before{ width: 10px; height: 10px; background: #fff; content: ' '; border:20px solid red; position: absolute; top:25px; left:0px; border-radius: 50%; } .tj:after{ width: 10px; height: 10px; background: red; content:" "; border:20px solid #fff; position: absolute; top:25px; right:0px; border-radius: 50%; } 
              </style>
  </head>
  <body>
      <div class="tj"></div>
  </body>
        </html>

  • 阴影

    • 盒子阴影 box-shadow：阴影1，阴影2......；

      • 阴影格式:水平偏移位置 垂直偏移位置 模糊度 外延值 颜色 内置阴影；

      • 案例

        <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .one{ font-size: 100px; text-shadow: -5px -5px 5px red,-10px -10px 5px orange; } .two{ width:100px; height:100px; margin:50px; border:1px solid #000; border-radius: 50%; display: flex; align-items: center; /*box-shadow: 5px 5px red;*/ /*box-shadow: 5px 5px 5px red;*/ /*box-shadow: -5px 5px 5px red;*/ /*box-shadow: 0px 0px 5px red;*/ /*外延值*/ /*box-shadow: 0px 0px 5px 10px red;*/ /*内置阴影*/ /*box-shadow: 0px 0px 5px 10px red inset;*/ /*彩虹*/ box-shadow: 0px 0px 5px 5px red, 0px 0px 5px 10px orange, 0px 0px 5px 15px yellow, 0px 0px 5px 20px green; 
                  }
      </style>
  </head>
  <body>
      <div class="one">我是文字阴影</div>
      <div class="two">我是盒子阴影</div>
  </body>
        </html>

        • 文字阴影 text-shadow：阴影1，阴影2......；

          • 阴影格式:水平偏移位置 垂直偏移位置 模糊度 颜色 ;
          • 案例
          html 复制代码 
          <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .one{
                font-size: 100px;
                text-shadow: -5px -5px 5px red,-10px -10px 5px orange;
            }
        </style>
    </head>
    <body>
        <div class="one">我是文字阴影</div>
    </body>
</html>

  • 渐变

    • linear-gradients 线性渐变

      /* 从上到下，蓝色渐变到红色 */ 

linear-gradient(blue, red); 

/* 渐变轴为45度，从蓝色渐变到红色 */ 

*linear-gradient(45deg, blue, red); 

/* 从右下到左上、从蓝色渐变到红色 */*

linear-gradient(to left top, blue, red); 

/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */

linear-gradient(0deg, blue, green 40%, red);

    • 案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*线性渐变*/ .one{ width: 200px; height: 200px; /*background: linear-gradient(to bottom,red,blue);*/ /*background: linear-gradient(to top,red,blue);*/ /*background: linear-gradient(to left,red,blue);*/ /*background: linear-gradient(to right,red,blue);*/ /*background-color:linear-gradient(to top,red,blue);*/ /*background-image:linear-gradient(to right bottom,red,blue);*/ background-image: linear-gradient(120deg,red,green,blue); } </style> </head> <body>
      线性渐变
      </body> </html>

      • radial-gradient 径向渐变

        CSS 复制代码 
        /*形状 大小 as 位置*/
background-image: radial-gradient(shape size at position, start-color, ..., last-color);

      • shape 取值

        • ellipse(默认)：指定椭圆形的径向渐变
        • circle:指定圆形的径向渐变

      • size 取值

        • farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
        • closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
        • closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角
        • farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边

      • position 取值

        • center（默认）：设置中间为径向渐变圆心的纵坐标值。
        • top：设置顶部为径向渐变圆心的纵坐标值。
        • bottom：设置底部为径向渐变圆心的纵坐标值。
        • left:设置左为径向渐变圆心的纵坐标值。
        • right:设置右为径向渐变圆心的纵坐标值。
        • 也可使用百分比

      • 案例

      html 复制代码 
      <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*线性渐变*/
            .one{
                width: 200px;
                height: 200px;
                /*background: linear-gradient(to bottom,red,blue);*/
                /*background: linear-gradient(to top,red,blue);*/
                /*background: linear-gradient(to left,red,blue);*/
                /*background: linear-gradient(to right,red,blue);*/
                /*background-color:linear-gradient(to top,red,blue);*/
                /*background-image:linear-gradient(to right bottom,red,blue);*/
                /*background-image: linear-gradient(120deg,red,green,blue);*/
                background-image: repeating-linear-gradient(red 15%,green 20% ,blue 30%);
            }
            /*径向渐变*/
            .two{
                width: 200px;
                height: 200px;
                border:1px solid #000;
                margin: 50px;
                /*background-image:radial-gradient(ellipse farthest-side,red,orange,blue);*/
                /*background-image: radial-gradient(circle closest-corner at top,red,blue);*/
                /*background-image: radial-gradient(circle closest-corner at left,red,blue);*/
                /*background-image: radial-gradient(circle closest-corner at right,red,blue);*/
                background-image: radial-gradient(circle closest-corner at 50% 50%,red,blue);
                /*background-image: repeating-radial-gradient(circle at 50% 50%,red 10%,green 20%,blue 30%);*/
            }
        </style>
    </head>
    <body>
        <div class="one">线性渐变</div>
        <div class="two">径向渐变</div>
    </body>
</html>

  1. 转换Transform

    • transform2D

      • translate(x,y) 2D转换转换

      • scale(x,z) 2D缩放

      • rotate(angle) 2D旋转

      • skew(x-angle,y-angle) 2D倾斜

      • 案例

        <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2D转换</title> <style> #box1,#box2,#box3{ width: 200px; height: 200px; border:1px solid blue; } #box1:hover{ /*transform: translateX(50px) translateY(50px);*/ /*transform: translate(50px,100px);*/ /*水平和垂直方向移动函数：translate,支持一个参数，代表水平移动*/ transform: translate(50px); } #box2,#box4{ width: 200px; height: 200px; border:1px solid tomato; } #box2:hover{ /*transform: scaleX(0.5) scaleY(0.5);*/ /* 支持一个参数，水平和垂直等于一个值 支持两个参数，代表水平方向缩放和垂直方向缩放 */ /*transform: scale(0.5);*/ transform: scale(0.5,1.5); } /*过度*/ #box3{ transition: all 3s linear; } #box3:hover{ transform: rotate(360deg); } /*倾斜*/ #box4{ transition: all 3s linear; } #box4:hover{ /*transform: skewX(30deg) skewY(50deg);*/ transform: skew(40deg,30deg); } </style> </head> <body>
        </body> </html>

  • transform3D

    • translate3d(x,y,z) 定义3D转换

    • translateZ(z) 定义3D转换，只适用Z轴的值

    • scale3d(x,y,z) 定义3D缩放

    • scaleZ(z) 通过设置Z轴的值来定义3D缩放转换

    • rotate3d(x,y,z,angle) 定义3D旋转

    • rotateZ(angle) 定义沿着Z轴的3D旋转

    • perspective(n) 为D3转换元素定义透视视图

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .parent{ width: 200px; height: 200px; background: pink; /*透视 呈现出伪3D*/ perspective: 500px; } .son{ width: 100%; height: 100%; background: blue; transform: translateZ(-100px); /*transform: translate3d(-10px,-10px,-100px);*/ transition: all 3s; } .son:hover{ transform: perspective(400px) scaleZ(1); } img{ transition: all 3s; } img:hover{ /*transform: rotate(180deg);*/ transform: rotateZ(180deg); } </style> </head> <body>
      </body> </html>

  1. 过渡Transition

    • 过渡指定四要素

      1. transition-property 过渡属性，如background,color等。

      2. transition-duration 过渡所需要时间。

      3. transition-timing-function 过渡函数。既过渡的速度，方式等。

        • ease 默认值，规定慢速开始，然后变快，然后慢速结束过渡效果
        • linear 匀速
        • ease-in 规定以慢速开始，加速效果。
        • ease-out 规定以慢速结束，减速效果。
        • ease-in-out 规定以慢速开始和结束，先加速后减速效果。

      4. transition-delay 过渡延迟时间。表示开始执行的时间。

      5. transition 过渡属性简写属性

        <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box{ width: 200px; height: 200px; background: tomato; /*要过度的属性*/ /*transition-property: width;*/ /*!*过度完成时间*!*/ /*transition-duration: 3s;*/ /*!*过度函数*!*/ /*transition-timing-function: ease;*/ /*!*延时执行时间*!*/ /*transition-delay: 3s;*/ 
                 /*简写属性*/
         transition: all 3s linear;
     }
     #box:hover{
         width: 300px;
         height: 300px;
         transform: translate(3px,-10px);
         background: green;
         box-shadow: 0px 0px 10px 10px #ccc;
     }
 </style>
        </head> <body>
        </body> </html>

  1. 动画animation

    • animation 属性用于控制动画

    • 调用由@keyframes定义的动画

    • animation属性是一个简写属性

    • animation动画子属性

      • animation-name 调用动画，规定需要和keyframes的名字一致

      • animation-duration 动画完成一个周期所需要的时间

      • animation-timing-funtion 规定动画的速度变化类型

      • animation-delay 播放之前的延迟时间

      • Animation-iteration-count:数值|infinite 播放次数

        • infinite 表示无限次播放

      • animation-direction:normal|alternate 动画播放方向

        • normal 为默认值，表示正常播放
        • alternate 表示轮流播放，既动画会在奇数次正常播放，而在偶数次向后播放。

      • animation-fill-mode:forwards 动画停在最后一帧

        • 默认值为none

      • animation-play-state:paused | running 属性规定动画正在运行还是停止

        • 默认是为running

      • 案例

        <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .one{ width:200px; height:200px; border: 1px solid #000; /*transition: background-color 3s linear;*/ } .one:hover{ /*background-color: red;*/ /*background-color: green;*/ /*background-color: blue;*/ } .one{ animation-name: myname; animation-duration: 5s; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes myname { 0%{ background-color: red; } 30%{ background-color: green; } 60%{ background-color: blue; } 100%{ background-color: red; } } </style> </head> <body>
        </body> </html>

    • 动画案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> section{ width: 500px; height: 300px; border:1px solid red; margin: 10px auto; overflow: hidden; } section>div{ width: 2000px; height: 300px; border:1px solid tomato; animation: myname 10s infinite 1s; } section>div>img{ width: 500px; height: 300px; float:left; } @keyframes myname { 35%{ margin-left: -500px; } 70%{ margin-left: -1000px; } 100%{ margin-left: -1500px; } } </style> </head> <body>
      </body> </html>

1.3.20. 媒体查询

  • 使用Media Query的基本语法

    @media mediatype and | not | only (media feature) {
    CSS-Code
}
相关推荐
Justinc.3 分钟前
CSS3新增边框属性（五）
前端·css·css3
武子康9 分钟前
大数据-212 数据挖掘 机器学习理论 - 无监督学习算法 KMeans 基本原理 簇内误差平方和
大数据·人工智能·学习·算法·机器学习·数据挖掘
fruge11 分钟前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
使者大牙18 分钟前
【大语言模型学习笔记】第一篇：LLM大规模语言模型介绍
笔记·学习·语言模型
极客代码30 分钟前
【Python TensorFlow】入门到精通
开发语言·人工智能·python·深度学习·tensorflow
义小深33 分钟前
TensorFlow|咖啡豆识别
人工智能·python·tensorflow
As977_40 分钟前
前端学习Day12 CSS盒子的定位（相对定位篇“附练习”）
前端·css·学习
susu108301891142 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
ajsbxi43 分钟前
苍穹外卖学习记录
java·笔记·后端·学习·nginx·spring·servlet
Rattenking44 分钟前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10红米手机使用google play