CSS介绍

层叠样式表（CSS） , 主要用来美化网页， 有 W3C 定义和维护的标准， 一种用来结构化文档，如HTML文档或XML应用，添加样式（字体，颜色，间距等）的计算机语言

W3C退出 CSS ， 把结构分离，HTML只负责结构， 样式交给CSS来实现，开发效率大提升，页面维护更加容易

CSS学习

组成： 选择器 ， 属性， 属性值

  1. selector { // 选择器 { 属性: 属性值 }
  2.     property: value ;
  3. }
  1. selector 选择器， 通常是需要改变的样式的HTML元素
  2. 每条属性由一个属性（property ） 和一个属性值（value） 组成
  3. 属性（property）是希望设置的样式属性(style attribute)。每一个属性都有一个 value
  4. 属性和属性值用冒号分开

CSS 导入方法

  1. 行间样式 , 写在HTML的单个标签中， 使用 style=”” 一个属性对应一个值 
    1. <!--  1, 行间样式 ， 单行样式 -->
    2. <!--  使用 style对单行样式进行美化，style中 也是使用着 CSS 语法中的 一个属性对应一个属性值; -->
    3. <div style="color: #777;  font-size: 19px; width: 100px; border: 1px solid rgba(16, 149, 206, 0.87);"> 单行样式</div>
    4. <!--  color 字体颜色
    5. font-size : 字体大小
    6. width  宽度
    7. border 设置边框，和边框颜色 
    8. -->
    9. <div style=""> 单行样式对比 </div>
    10. </br>

  1. 内部样式 , 写在HTML的头部中 ，style 标签中使用的是 CSS的语法 

    1. <head>
    2. <!--  2, 内部样式 ， 写在HTML的头部中 ，style 标签中使用的是 CSS的语法 -->
    3. <style>
    4.     /*  导入外部样式 ，是在  HTML的首部 style 中进行导入的 */
    5.     /* @import "文件路径 " */
    7.     @import "../css/daoru.css";
    8.     /*  p 选择器， 属性和属性值可以有多个   */
    10.     p {
    11.         /* 背景颜色  background-color:   */
    12.         background-color: aqua;
    13.         /*  字体大小 :  font-size  */
    14.         font-size: 16px;
    15.         /* 字体倾斜  font-style*/
    16.         font-style: italic;
    17.     }
    18. </style>
    19. </head>
    20. <body>
    21. <!--  内部样式测试 -->
    22. <p> 内部样式测试 </p>
    23. <p> 段落</p>
    24. </body>
  1. 外部样式 ， 写一个CSS 文件 在 head 头中使用 link:css 的方法进行文件的导入 
    1. <head>
    2. <meta charset="UTF-8">
    3. <meta http-equiv="X-UA-Compatible" content="IE=edge">
    4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    5. <title>CSS 的引入方式 </title>
    6. <!--  3 外部样式 ， 通过外部css文件导入对网页及逆行美化  -->
    7. <!--  使用  Emmet语法 ：   link:css -> TAB键  -->
    8. <link rel="stylesheet" href="../css/style.css">
    9. </head>
    10. <body>
    11. <!--  外部样式测试  -->
    12. <span> 外部样式测试 </span>
    13. </body>

  1. 外部导入样式 ，写一个css 文件， 在head中的 style中使用 @import 方法进行导入 

    1. <head>
    2. <!--  2, 内部样式 ， 写在HTML的头部中 ，style 标签中使用的是 CSS的语法 -->
    3. <style>
    4.     /*  导入外部样式 ，是在  HTML的首部 style 中进行导入的 */
    5.     /* @import "文件路径 " */  
    6.     @import "../css/daoru.css";
    7. </style>
    8. </head>
    9. <body>
    10. <!-- 4 导入外部样式  -->
    11. <!-- 语法 ：  .box{导入外部样式}*3 -->
    12. <div class="box">导入外部样式</div>
    13. <div class="box">导入外部样式</div>
    14. <div class="box">导入外部样式</div>
    16. <div class="box"> 直接使用 .box 引用外部导入的样式 </div>
    17. </body>


    四种导入方法的区别 ：

  • 行间样式 只作用于当前标签
  • 内部样式 只作用于当前文件
  • 外部样式 可以被多个 HTML文件引用

在实际开发过程中使用最多的 是 外部样式
外部导入CSS方法和外部样式导入CSS的方法 区别：

  1. link 是 XHTML的标签， 除了加载CSS文件外， 还可定义 RSS等其他事务，@import 属于CSS范畴， 只能加载CSS
  2. link引用CSS时，在页面加载时同时加载； @import 需要页面完全载入以后加载
  3. link支持使用JavaScript控制DOM去改变样式； 而@import 不支持

CSS选择器分类

  1. * : 用来匹配HTML中的所有标签 ， 但是 * 的性能比较差，因为匹配所有标签需要时间 

    1. <head>
    2. <title>CSS 选择器的分类</title>
    3. <style>
    4.     /*  1.  * 号 ， 用于匹配所有的HTML标签 */
    6.     * {
    7.         color: red;
    8.     }
    9. </style>
    10. </head>
    11. <body>
    13. <p> 测试 CSS选择器的分类　</p>
    14. <div class="test"> 所有标签</div>
    15. </body>

  1. 标签选择器 ： ```html

    测试 CSS选择器的分类　

    所有标签
    标签选择器，的span 标签 

  3. 3.  类选择器, 根据类名进行设置样式 
  4. ```html
  5. <head>
  6.     <title>CSS 选择器的分类</title>
  7.     <style>
  8.         /* 3,  类选择器 , 根据类名进行设置样式  */
  10.         .wapt {
  11.             color: pink;
  12.             display: inline;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  18.     <p> 测试 CSS选择器的分类　</p>
  19.     <div class="test"> 所有标签</div>
  20.     <span>  标签选择器，的span 标签</span> <br />
  22.     <!-- 语法 ：   Emmit :  .wapt -->
  23.     <div class="wapt"> 这是 类选择器 .wapt </div>
  25. </body>

  1. ID 选择器 ， 

    1. <head>
    2. <title>CSS 选择器的分类</title>
    3. <style>
    4.     /* 4,  ID 选择器 ，根据ID进行选择匹配 */
    6.     #content {
    7.         color: blue;
    8.     }
    9. </style>
    10. </head>
    11. <body>
    13. <p> 测试 CSS选择器的分类　</p>
    14. <div class="test"> 所有标签</div>
    15. <span>  标签选择器，的span 标签</span> <br />
    16. <div class="wapt"> 这是 类选择器 .wapt </div>
    17. <!-- #content  -->
    18. <div id="content"> ID选择器， 根据 ID进行 选择样式 </div>
    19. <div id="content"> 测试两个 ID 选择器 </div>
    20. </body>

  1. 派出选择器 ， 根据上下文进行 匹配 

    1. <head>
    2. <title>CSS 选择器的分类</title>
    3. <style>
    4.     /* 5， 派出选择器 , 根据上下文进行 匹配  */
    6.     .box1 {
    7.         color: aqua;
    8.     }
    10.     .box2 {
    11.         color: rgb(44, 191, 231);
    12.     }
    13.     /* 关键 ：  让 li下的ul 不同的颜色   */
    15.     .box2 li ul li {
    16.         border: 1px solid #ccc;
    17.         color: brown;
    18.     }
    19. </style>
    20. </head>
    21. <body>
    23. <p> 测试 CSS选择器的分类　</p>
    24. <div class="test"> 所有标签</div>
    25. <span>  标签选择器，的span 标签</span> <br />
    26. <div class="wapt"> 这是 类选择器 .wapt </div>
    27. <div id="content"> ID选择器， 根据 ID进行 选择样式 </div>
    28. <div id="content"> 测试两个 ID 选择器 </div>
    29. <!--  派出选择器 -->
    30. <ul class="box1">
    31.     <li>li001</li>
    32.     <li>li002</li>
    33.     <li>li003</li>
    34. </ul>
    36. <ul class="box2">
    37.     <li>lili001</li>
    38.     <li>lili002</li>
    39.     <li>lili003
    40.         <ul>
    41.             <li>01</li>
    42.             <li>02</li>
    43.         </ul>
    44.     </li>
    45. </ul>
    46. </body>
  1. 伪类选择器

选择器的分组

让多个选择器的元素具有相同的样式， 一般用于设置公共样式。

语法 ： 用逗号需要将需要分组的选择器分开

  1. <head>
  2.     <title>CSS 选择器的分组 </title>
  3.     <style>
  4.         /*  选择器的分组 ：将有类型一样的标签一起写样式   */
  5.         /*  用逗号将需要的分组进行隔开*/
  7.         h1,
  8.         .box,
  9.         p {
  10.             color: red;
  11.         }
  12.         /*  再写一个 p 的样式  */
  14.         p {
  15.             width: 100px;
  16.             background-color: blueviolet;
  17.             font-size: 12px;
  18.         }
  19.     </style>
  20. </head>
  22. <body>
  23.     <!--  分组的测试  -->
  24.     <h1> H1 </h1>
  25.     <div class="box"> 测试内容</div>
  26.     <p> P </p>
  27. </body>

选择器的继承

子类元素可以继承父类元素的样式， 父类元素不能继承子类元素的样式

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>选择器的继承</title>
  9.     <style>
  10.         /*  选择器的继承  */
  11.         /*  */
  13.         .test {
  14.             font-size: 20px;
  15.             font-weight: bold;
  16.         }
  18.         .test span {
  19.             /* 改写父类传过来的样式  */
  20.             font-size: 12px;
  21.             color: aqua;
  22.         }
  23.     </style>
  24. </head>
  26. <body>
  27.     <div class="test"> 选择器继承的<span>测试内容</span> 。</div>
  29. </body>
  31. </html>

CSS 样式权重

!important (10000) > 内联样式(1000) > id选择器 (100) > 类， 伪类，伪元素选择器(10)> 标签选择器(1)

  1. p {
  2.     color: !important;
  3. }
  1. <p style="color: red">
  2.     test
  3. </p>
  1. #content {
  2.     font-size: 12px;
  3. }
  1. .content {
  2.     font-family: FrieCode;
  3. }
  5. /* 伪类 */
  6. p:before {
  7.     color: green;
  8. }
  1. span {
  2.     background-color: blue;
  3. }

CSS 字体

列举CSS对字体的修饰，和属性

  1. font-size ： 字体大小 (px / % )
  2. font-family : 字体 ( )
    1. 宋体
    2. 黑体
    3. 微软
      也可以从网站导入字体
  3. font-style : 字体样式 （ normal / italic / oblique ）
    1. normal : 默认
    2. italic : 斜体
    3. oblique : 斜体
  4. font-weight : 文字加粗 ( normal / bold / bolder / lighter / 100-900)
    1. normal ： 默认字体
    2. bold ： 加粗
    3. bolder ： 比bold 粗
    4. lighter ： 细体
    5. 100-900 ： 按照值来分粗细
  5. line-height : 文字行高 ( px/ 数字 / em 等)
  6. color ： 文字颜色 （ 颜色单词/ rgb() -> r(0-255) , g: 0-255 , b : 0-255 / 16 进制（以#号开头，后跟六位(#rrggbb)，或三位(#rgb) 的16进制 ））
    1. 颜色单词
    2. rgb()
    3. 十六进制
  7. text-decoration: 文字修饰 ( none /underline / overline / line-through )
    1. none : 默认字体
    2. underline : 下划线
    3. overline : 上划线
    4. line-through : 删除线
  8. text-aline: 文本对齐方式 ( left / right / center )
    1. left : 默认居左
    2. right ： 居右
    3. center ： 居中
  9. text-transform: 字母的大小写 ( capitalize / uppercase / lowercase / none )
    1. capitalize ： 首字母大写
    2. uppercase ： 全部大写
    3. lowercase ：字母小写
    4. none ： 默认字体
  10. text-indent : 文本的缩进 ( px / em / % 等 )
    1. px
    2. em
    3. %

Tip :
font 复合属性 ：
默认顺序 ： font : font-style font-variant font-weight font-size / line-height font-family

  1.      1. 注意元素位置的顺序
  2.      2. 除了 font-style 和 font-size  需要设置值， 其他的值可以忽略
  3.      3. font-variant :  文本修饰   ，  small-caps 字母大写
  1. <head>
  2.     <style>
  3.         p {
  4.             /*  字号大小  28像素*/
  5.             font-size: 28px;
  6.             /*  font-family 设置字体，多个字体用逗号隔开，浏览器识别不了第一个字体时，就会识别第二个字体 */
  7.             font-family: 宋体, 黑体;
  8.             /* font-style 设置文本的样式  
  9.                 normal 默认值， 正常的字体
  10.                 italic 斜体 
  11.                 oblique 斜体，当italic不起作用时，使用 oblique  */
  12.             font-style: italic;
  13.             /*  font-weight 字体加粗 
  14.             normal : 默认正常字体
  15.             bold : 粗体
  16.             bolder : 比bold 粗
  17.             lighter : 比normal 细
  18.             100-900 ： 自定义的字体， 400等同于 normal , 700等同于 bold   */
  19.             font-weight: normal;
  20.             /* color 字体颜色 
  21.             颜色的单词 red /  blue / green  
  22.             rgb 自定义 
  23.             十六进制 #定义 */
  24.             color: #cf30d5;
  25.             /*  line-height 行高，文字底端和字体顶端的距离 */
  26.             line-height: 2.5em;
  27.             /*  文字修饰  text-decoration 
  28.             none  默认字体 
  29.             underline 下划线
  30.             overline  上划线
  31.             line-through 删除线 */
  32.             text-decoration: none;
  33.              /*  text-align 文本的对齐方式
  34.             left :  默认 左对齐
  35.             center : 居中 
  36.             right : 有对齐   */
  37.             text-align: right;
  38.             /*  text-transform  字母大小写 
  39.                 uppercase : 全部大写
  40.                 capitalize : 首字母大写
  41.                 lowercase : 字母小写
  42.                 */
  43.             text-transform: normal;
  44.             /*   text-indent  文字的缩进 
  45.             px  像素
  46.             em 倍数  */
  47.             text-indent: 2em;
  48.         }
  50.         p span {
  51.             font-style: normal;
  52.             font-weight: bolder;
  53.             text-decoration: underline;
  54.             text-emphasis: line-through;
  55.         }
  57.         p em {
  58.             text-transform: normal;
  59.             text-transform: capitalize;
  60.         }
  61.         /* div  设置不了 ？  */
  63.         strong {
  64.             /* font: italic small-caps bolder 30px/4em 黑体; */
  65.             font: 30px 黑体;
  66.             /*  font 复合元素：  文本大小不能省略，文本字体也不能省略 */
  67.             color: #963191;
  68.         }
  69.     </style>
  70. </head>
  72. <body>
  73.     <p> <em>  how  are  you ?  </em> <span>海地總統遇刺</span>｜嫌犯闖入台 灣駐當地大使館警方進入搜查逮捕11人, 建立在 TCP 协议之上，服务器端的实现比较容易。 与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。 数据格式比较轻量，性能开销小，通信高效。 可以发送文本，也可以发送二进制数据。 没有同源限制，客户端可以与任意服务器通信。 协议标识符是ws（如果加密，则为wss），服务器网址就是
  74.         URL。 </p>
  76.     <strong> 嫌犯闖入台 灣駐當地大使館警方進入搜查逮捕11人, 建立在 TCP 协议之上，服务器端的实现比较容易。 </strong>
  78. </body>

CSS背景

  1. background-color : 背景色 （ transparent / color ）
    1. transparent : 默认 透明
    2. color : 背景色
  2. background-image : 背景图 （ none / url ）
    1. none : 默认无
    2. url(路径) ： 设置背景图片
  3. background-repeat : 背景图像的铺排方式 （ repeat / no-repeat / repeat-x / repeat-y ）
    1. repeat : 设置铺排方式
    2. norepeat : 不设置铺排方式
    3. repeat-x : 设置 x 轴铺排
    4. repeat-y : 设置 y 轴铺排
  4. background-position : 设置对象的背景图像的位置 （ { x-number | top | center | bottom } {y-number | left | center | right }）, 如果只带一个参数时， 默认y值为 50%
    1. (x y) / (center center )
  5. background-attachment : 背景图像滚动方式 ( scroll / fixed )
    1. scroll : 设置背景滚动
    2. fixed : 背景不滚动
  6. background复合 ： background: color image repeta attachment position

body { background: #eee url(../image/img.png) repeta scroll center center }

  1. <head>
  2.     <style>
  3.         body {
  4.             /*   background-color:  设置背景颜色; */
  5.             /* background-color: #4242b5; */
  6.             /*  background-image: url 设置背景图片 */
  7.             background-image: url(../img5.png);
  8.             /* background-repeat 设置铺排方式
  9.             repeat : 默认 全部平铺 
  10.             no-repeat 不用全部平铺
  11.             repeat-x|y 往 x | y 的方向平铺  */
  12.             /* background-repeat: repeat; */
  13.             /* background-repeat: repeat-y; */
  14.             /*  background-position 设置图像位置 */
  15.             /* background-position: top; */
  16.             /*  设置背景图片的背景方式 
  17.             scroll 默认 滚动时背景图也在动 
  18.             fixed 滚动，背景图不动
  19.              */
  20.             background-attachment: scroll;
  21.             /* background-attachment: fixed; */
  22.             height: 2000px;
  23.         }
  24.     </style>
  25. </head>
  27. <body>
  28. </body>
  30. </html>

CSS 伪类选择器

伪类 : 专门用来表示元素的一种特殊状态 。

常用的伪类选择器 ：

  1.     a标签的伪类：
  1. a:link : 没有被访问的状态 （常用）
  2. a:visited : 已经访问的状态
  3. a:hover : 鼠标悬停状态 （常用）
  4. a:active : 用户点击时的状态
  1.     <style>
  2.         /*  a标签的伪类选择器 */
  4.         a:link {
  5.             /*  :link  是标签初始状态 */
  6.             color: red;
  7.         }
  9.         a:hover {
  10.             /*  常用 */
  11.             /*  :hover 是鼠标悬停状态 */
  12.             color: yellow;
  13.         }
  15.         a:visited {
  16.             /* 常用*/
  17.             /*  已被访问状态 */
  18.             color: green;
  19.         }
  21.         a:active {
  22.             /* 已经点击过后，二次点击状态，已激活状态 */
  23.             color: blue;
  24.         }
  25.     </style>
  26. </head>
  28. <body>
  29.     <a href="#"> 点击这里</a>
  30. </body>

:focus 获得焦点 : 表单获得焦点时触发样式

  1.     <style>
  2.         /*  :focus 鼠标经过表单时触发状态 */
  3.         input:focus {
  4.             background-color: yellow;
  5.         }
  6.     </style>
  7. </head>
  9. <body>
  10.     <input type="text" name="" id="test">
  11. </body>

:first-child 伪类来选择元素的第一个元素 first-child , last-child , nth-child(number)

  1.     <style>
  2.         /*  first-child 表单伪类 */
  4.         ul li:first-child {
  5.             /*  表单第一个内容状态 */
  6.             color: red;
  7.         }
  9.         ul li:last-child {
  10.             /* 标签最后内容状态 */
  11.             color: green;
  12.         }
  14.         ul li:nth-child(3) {
  15.             /*  表单的第（N）个内容状态 */
  16.             color: blue;
  17.         }
  18.     </style>
  19. </head>
  21. <body>
  22.     <input type="text" name="" id="test">
  24.     <ul>
  25.         <li>aaa</li>
  26.         <li>aaa</li>
  27.         <li>aaa</li>
  28.     </ul>
  29. </body>

CSS 属性选择器

[ 属性名] ： 包含有指定属性名的元素 （常用）

[ 属性名 = 值] ： 属性名为值为指定的元素 （ 常用）

[属性名 ~= 值] ： 属性名包含的指定值的元素

[ 属性名^= 值] ： 属性名以值开头的元素

[属性名 $=值] ： 属性名以值结尾的元素

  1. <head>
  2.     <title>CSS 属性选择器 </title>
  3.     <style>
  4.         /*  CSS 属性选择器  */
  6.         div.content[title] {
  7.             /*  [属性名 ] */
  8.             color: red;
  9.         }
  11.         input[id=user] {
  12.             /*  [ 属性名=值] */
  13.             background-color: yellow;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18.     <div class="content" title="content"> content </div>
  19.     <div class="content2" title="content"> content2 </div>
  20.     <input type="text" name="" id="user">
  21. </body>
  22. </html>

CSS关系选择器

  1. 空格 ： 后代选择器
  2. > : 只选择子代 元素
  3. + : 只选择兄弟元素
  1. <head>
  2.     <style>
  3.         /*  空格  后代选择器  */
  5.         h1 strong {
  6.             color: white;
  7.             background-color: black;
  8.         }
  9.         /*  > 子代选择器  */
  11.         h1>strong {
  12.             color: red;
  13.             background-color: yellow;
  14.         }
  15.         /*  + 兄弟选择器 */
  17.         ul li+li+li {
  18.             /*  从第三个 li 起，之后的都起作用， 因为 li+li+li  就是第三开始 */
  19.             list-style-type: none;
  20.             color: rgb(7, 34, 209);
  21.         }
  22.     </style>
  23. </head>
  25. <body>
  26.     <h1><strong> content1 </strong> <span> <strong> content2    </strong></span></h1>
  28.     <ul>
  29.         <li>li1</li>
  30.         <li>li2</li>
  31.         <li>li3</li>
  32.         <li>li4</li>
  33.         <li>li5</li>
  34.     </ul>
  35. </body>

CSS伪元素

  1. CSS伪元素 与 伪类 的区别
    1. CSS引入伪类和伪元素概念是为了格式化文档树以外的信息，也就是说，伪类和伪元素是用来修饰不在文档树中的部分
    2. 伪类用于已有元素处于的某个状态时， 并为其添加对应的样式， 这个状态是根据用户的行为而动态变化的。它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类
    3. 伪元素用于创建一些不存在文档中的元素， 并为其添加样式，比如说，我们可以通过:before 来在第一个元素增加一些文本，并为其添加样式。 虽然用户可以看到这些文本，但是这些文本不存在文档树中。
  2. 伪类元素 和 伪类 的特点
    1. 伪元素和伪类都不会出现在源文档中或者文档树中
    2. 伪类允许出现在选择器的任意位置，而一个伪元素只能跟在选择器的最后一个单选择器
    3. 伪元素和伪类名都是大小写不敏感的
    4. 有些伪类是互斥的，而其他的可以同时用在一个元素上
  3. 伪元素
    1. :before ： 在元素之前添加
    2. :after : 在元素之后添加
    3. :first-letter ： 第一个字
    4. :first-line ： 第一行
    5. :: selection ：
    6. ::placeholder
    7. ::backdrop

before / after / first-litter / first-line : 前面可以是单冒号， 也可以是双冒号
::selection / ::placeholder / ::backdrop : 前面只能是双冒号 

  1. <head>
  2.     <style>
  3.         p::first-letter {
  4.             /* ::first-letter 第一个字  */
  5.             font: 30px 黑体;
  6.             color: red;
  7.             /*  首行空格 */
  8.             text-indent: 2em;
  9.         }
  11.         p::first-line {
  12.             /*  ::first-line 第一行  */
  13.             /*  下划线 */
  14.             text-decoration: underline;
  15.         }
  17.         p::before {
  18.             /* 在最前面加上内容 */
  19.             content: ":tada:"
  20.         }
  22.         p:after {
  23.             /*  在最后加上内容 */
  24.             content: "……"
  25.         }
  26.     </style>
  27. </head>
  29. <body>
  30.     <p>伪元素概念是为了格式化文档树以的信息但是这些文本不存在文档树中。 </p>
  31. </body>

用CSS实现页内跳转 

  2. <body>
  3.     <h3> 文章导读</h3>
  4.         <a href="#title1">导读1</a>
  5.         <a href="#title2">导读2</a>
  6.         <a href="#title3">导读3</a>
  8.         <!-- 页面跳转内容 -->
  9.         <h2><a name="title1" id="title1"></a> 导读1 </h2>
  10.         <p>来源广西新闻网 。</p>
  11.         <h2><a name="title2" id="title2"></a> 导读2 </h2>
  12.         <p>极配</p>
  13.         <h2><a name="title3" id="title3"></a> 导读3 </h2>
  14.         <p>亲写给谢雯聪的感谢信。</p>
  15. </body>
  1. /*  页内跳转 */
  3. a[href^="#"] {
  4.     /*  使用类元素 设置  # 在 a 下 的name 设置对应的名字  */
  5.     line-height: 1.5em;
  6.     font-size: 12.2px;
  7.     /*  去掉下划线 */
  8.     text-decoration: none;
  9.     color: #3366ff;
  10.     display: block;
  11. }
  13. a[href^="#"]:hover {
  14.     /*  设置鼠标移到的效果 */
  15.     color: rgb(241, 187, 10);
  16. }

CSS的浮动

浮动的定义 ： 浮动就是让块级标签不独占一行。 目的（使用场景）： 把块级标签元素可以排在一行上。

浮动的原理 ： 就是让元素脱离了文档流， 不占用标准流

float 对应的值

  • left : 元素向左浮动
  • right : 元素向右浮动
  • none : 默认值。 不浮动， 会显示在其在文本中出现的位置
  • inhert : 规定应该从父元素继承 float 属性的值
  1. <div class="warrper">
  2.     <div class="content1"> content1</div>
  3.     <div class="content2"> content2 </div>
  4. </div>
  1. .warrper {
  2.     border: 1px solid #ccc;
  3. }
  5. .content1 {
  6.     background-color: blue;
  7.     width: 200px;
  8.     height: 100px;
  9.     /*  float: left 向左浮动 */
  10.     float: left;
  11. }
  13. .content2 {
  14.     background-color: red;
  15.     width: 200px;
  16.     height: 100px;
  17.     /*  float: right  表示向右浮动 */
  18.     float: right;
  19. }

CSS清除浮动

浮动会给整个HTML布局带来一定的影响，所以需要清除浮动。

浮动后，后面的元素不管是块级还是行级元素，不会显示在下一行 。

清除浮动的目的： 让后面的元素自动掉到下一行 。

三个清除浮动的方法：

  1. 添加一个空标签，并且设置样式 clear:both

    1. clear:left : 清除左浮动
    2. clear:right : 清除右浮动
    3. clear:both : 清除左右浮动
    4. clear:none : 左右浮动都不清除 ```html
      content1
      content2

      content3
      ```

    1. 在要清除浮动的父级添加样式： overflow: hidde 

      1. <style>
      2. /*  浮动的定义 float  */
      4. .warrper {
      5.     border: 3px solid #ff0000;
      6.     /*  方法二 ： 在清除浮动的父级标签，添加 overflow:hidde */
      7.     overflow: hidden;
      8. }
      10. .content1 {
      11.     background-color: blue;
      12.     width: 200px;
      13.     height: 100px;
      14.     /*  float: left 向左浮动 */
      15.     float: left;
      16. }
      17. </style>
      18. <body>
      19. <div class="warrper">
      20.  <!--  方法二 ： 在清除浮动的父级标签，添加 overflow:hidde  -->   
      21.     <div class="content1"> content1</div>
      22.     <div class="content2"> content2 </div>
      23.     <!--  清除浮动 方法1， 添加空元素， 然后CSS添加样式   -->
      24.     <!-- <div class="clear"></div> -->
      25. </div>
      26. <div class="content3"> content3 </div>
      27. </body>
    1. 在浮动的元素的父级中使用伪类元素 ： :after 
      1. .warrper:after {
      2. clear: both;
      3. display: block;
      4. }

    浮动案例

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>CSS 浮动案例</title>
    9.     <style>
    10.         .info {
    11.             width: 600px;
    12.             border: 1px solid #ccc;
    13.             padding: 20px;
    14.             /* 居中 */
    15.             margin: 100px auto;
    16.             overflow: hidden;
    17.         }
    19.         .head-sculpture {
    20.             float: left;
    21.             text-align: center;
    22.             /*  右外边距 */
    23.             margin-right: 20px;
    24.         }
    26.         .photo {
    27.             width: 200px;
    28.             height: 250px;
    29.             border: 1px solid #ccc;
    30.             text-align: center;
    31.             /*  转化为表格 */
    32.             display: table-cell;
    33.             /*  垂直居中 */
    34.             vertical-align: middle;
    35.             background-color: #ccc;
    36.         }
    38.         .name {
    39.             text-align: center;
    40.         }
    42.         .maioshu {
    43.             width: 350px;
    44.             height: 250px;
    45.             border: 1px solid #ccc;
    46.             /*  盒子模型  padding :  上  右 下 左  */
    47.             padding: 10px 0 0 20px;
    48.             /* text-indent: 2em; */
    49.             float: left;
    50.         }
    51.     </style>
    52. </head>
    54. <body>
    55.     <div class="info">
    56.         <div class="head-sculpture">
    57.             <div class="photo">头像</div>
    58.             <div class="name">名字</div>
    59.         </div>
    60.         <div class="maioshu">自我描述</div>
    61.     </div>
    62. </body>
    64. </html>

    CSS - 图1

    CSS盒子模型

    每一个元素都是一个盒子，一个盒子由margin （外边距） 、 border（边框线）、padding（内边距）和 contetn （内容）组成。

    区别外边距 和 内边距 是以边框为参照

    系统默认外边距为 8px ;

    外边距（margin） ： 值元素的边框线之外的距离

    • margin-left : 左边距
    • margin-right : 右边距
    • margin-top : 上边距
    • margin-bottom : 下边距

    margin : 可以设置任意一个边框的边距，可以带1-4个参数

    • margin: apx : 表示上下左右都是 apx 间距；
    • margin: apx bpx : 表示上下外边距为 apx ， 左右外边距为bpx ;
    • margin: apx bpx cpx : 表示上为 apx , 左右为 bpx , 下为cpx ;
    • margin: apx bpx cpx dpx : 表示上为apx , 右为bpx , 下为cpx 左为dpx

    内边距( pandding ) 指元素的文本内容与边框之间的距离

    padding 的用法也是和 margin 的用法一样，有相同的格式，和参数 语法 等

    CSS display 属性

    display属性： 用来设置显示方式 。

    属性值：

    • none : 不显示元素
    • block : 快级显示，在元素后面设置换行符。 目的： 将行级标签转化为块级标签（因为行级标签不识别宽高，而块级标签识别， 转化后，行级标签也可以设置宽高了 ）
    • inline : 行内显示，将块级标签转化为行级标签
    • inline-block : 将块级 或 行级 标签转为为 行内块级标签 （行级和块级在一行）
    1. <body>
    2.     <div>div1</div>
    3.     <div>div2</div>
    4.     <span>span</span>
    5. </body>
    1. div {
    2.     width: 300px;
    3.     height: 200px;
    4.     background-color: #F00;
    5.     /* 将块级转为 行级标签, 宽高不起作用 */
    6.     /* display: inline; */
    7.     /*  inline-block 行内块级标签  */
    8.     display: inline-block;
    9.     /*  并排 */
    10.     margin-right: -4px;
    11. }
    13. div:first-child {
    14.     background-color: #0F0;
    15.     /*   */
    16. }
    18. span {
    19.     /* 块级不会显示宽高 */
    20.     width: 200px;
    21.     height: 400px;
    22.     background-color: #00F;
    23.     /*  span 转为块级标签， 独占一行  */
    24.     display: block;
    25.     /*  span 转为 行内块级标签  并列一行，具有宽高 */
    26.     display: inline-block;
    27. }

    CSS table 样式

    table 一般不用来布局，主要用来格式化数据 。

    属性：

    • width : 宽度
    • height : 高度
    • border-collapse : 单边框线
    • border : 边框线

    tr td 属性 :

    • width : 宽度
    • heigth : 高度
    • border : 边框线
    • text-algin : 文本的对齐方式 （ left 默认 / center/ right ）
    • vertical-algin : 文本的垂直对齐方式 (top / middle(默认) / bottom )
    1. <body>
    2.     <table>
    3.         <tr>
    4.             <td>内容显示1</td>
    5.             <td>内容显示2</td>
    6.             <td>内容显示3</td>
    7.             <td>内容显示4</td>
    8.         </tr>
    9.         <tr>
    10.             <td>内容显示1</td>
    11.             <td>内容显示2</td>
    12.             <td>内容显示3</td>
    13.             <td>内容显示4</td>
    14.         </tr>
    15.         <tr>
    16.             <td>内容显示1</td>
    17.             <td>内容显示2</td>
    18.             <td>内容显示3</td>
    19.             <td>内容显示4</td>
    20.         </tr>
    21.     </table>
    22. </body>
    1. /*  table , td  td 是具有数据，可以设置边框 */
    3. table {
    4.     width: 600px;
    5.     height: 500px;
    6.     /*  居中显示  */
    7.     margin: 0 auto;
    8.     /*  单线模式显示 边框线  在 tr td 中不起作用 */
    9.     border-collapse: collapse;
    10.     /*  不起作用  */
    11.     /* vertical-align: bottom; */
    12. }
    14. tr td {
    15.     /*  在 table 中不起作用  */
    16.     border: 1px solid red;
    17.     /* 文本居中 */
    18.     text-align: center;
    19.     /* 文本垂直居中。上、下 在 table 中不起作用 */
    20.     vertical-align: bottom;
    21. }

    CSS 列表样式

    不是描述性的文本的任何内容都可以认为是列表 。 比如： 菜单、 商品列表等。

    列表类型 ： 有序列表(ol)， 无序列表(ul)， 自定义列表(dl)

    区别： ul 和 ol的列表项都是由 li 表示， dl 是使用 一个 dt（标题）或 多个 dd（描述） 组成 。

    有序列表(ol)

    属性值 ：

    • list-style-image ： 用图像表示
      • none 默认
      • url(“”) : 图标位置
    • list-style-position : 标识的位置
      • inside : 在列表里部，占用字节
      • outside (默认): 在列表外部
    • list-style-type : 标识类型
      • decimal （默认）/ decimal-leading-zero ： 1 / 01
      • lower-roman / upper-roman ： 大小写罗马
      • lower-alpha / upper-alpha ： 大小写
      • lower-greek / upper-greek
      • lower-latin / upper-latin

    有序和无序都可以简写 ：

    list-style : list-style-image list-style-position list-style-type : 值可以任意顺序列出，而且可以任意省略，只需要设置一个值， 其他都会默认

    无序列表(ul)

    属性值 ：

    • list-style-image ： 用图像表示
      • none : 默认
      • url(“”) : 图标位置
    • list-style-position : 标识的位置
      • inside : 在列表里部，占用字节
      • outside (默认): 在列表外部
    • list-style-type : 标识类型
      • dist ： 实心圆点 （默认 ）
      • cricle ： 空心的圆点
      • square : 实心矩形
      • none ： 无样式
    1. <head>
    2.     <title>CSS 列表样式 </title>
    3.     <style>
    4.         ul {
    5.             /*  dist /  circle  / square   */
    6.             list-style-type: circle;
    7.             /* list-style-position: inside; */
    8.             list-style-position: outside;
    9.         }
    10.         /* 有序列表  */
    12.         ol {
    13.             list-style-type: decimal-leading-zero;
    14.             list-style-type: lower-roman;
    15.             /* ....  其他样式  */
    16.         }
    17.         /*  自定义 列表 */
    19.         dd {
    20.             /*  使用不了 disc  */
    21.             /* list-style: disc; */
    22.             font-size: 18px;
    23.             font-weight: bold;
    24.             /*  移动  */
    25.             margin-left: 5px;
    26.         }
    27.     </style>
    28. </head>
    30. <body>
    31.     <!-- 无序列表 -->
    32.     <ul>
    33.         <li>列表样式1</li>
    34.         <li>列表样式2</li>
    35.         <li>列表样式3</li>
    36.         <li>列表样式4</li>
    37.         <li>列表样式5</li>
    38.     </ul>
    40.     <!--  ol  有序列表 -->
    41.     <ol>
    42.         <li>列表样式1</li>
    43.         <li>列表样式2</li>
    44.         <li>列表样式3</li>
    45.         <li>列表样式4</li>
    46.         <li>列表样式5</li>
    47.     </ol>
    49.     <!--  自定义列表  -->
    50.     <dl>
    51.         <dt> 具有标题</dt>
    52.         <dd>自定义列表1</dd>
    53.         <dd>自定义列表2</dd>
    54.         <dd>自定义列表3</dd>
    55.         <dd>自定义列表4</dd>
    56.     </dl>
    57. </body>

    CSS轮播图

    主要用于产品和公司宣传

    组成：

    • 轮播的主图 （至少两张以上）
    • 控制器 （ 点击左右轮播图片）
    • 计数器 （图片的显示顺序）

    总体

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>CSS 轮播图</title>
    9.     <link rel="stylesheet" href="../css/CSS轮播组图2.css">
    10. </head>
    12. <body>
    13.     <!-- 轮播容器 -->
    14.     <div class="carousel">
    15.         <ul class="carsel-img">
    16.             <!--  轮播组图 -->
    17.             <li>
    18.                 <a href="#"><img src="http://www.sdust.edu.cn/__local/9/7A/B1/F29B84DEF72DD329997E8172ABA_664BA3EF_32466.jpg" alt="001"></a>
    19.             </li>
    20.             <li>
    21.                 <a href="#"><img src="http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB84646970D53BFE_C506394A_4282CA.jpg" alt="002"></a>
    22.             </li>
    23.             <li>
    24.                 <a href="#"><img src="http://www.sdust.edu.cn/__local/F/7A/AA/E1459849AA8AB0C89854A41BD41_BF3BD857_BC0D8.jpg" alt="003"></a>
    25.             </li>
    26.         </ul>
    27.         <!-- 控制器 按钮 -->
    29.         <div class="prev"></div>
    30.         <div class="next"></div>
    32.         <!-- 计数器 -->
    33.         <div class="cont">
    34.             <ul>
    35.                 <!-- asd -->
    36.                 <li class="active"></li>
    37.                 <li></li>
    38.                 <li></li>
    39.             </ul>
    40.         </div>
    41.     </div>
    43. </body>
    45. </html>
    1. * {
    2.     padding: 0;
    3.     margin: 0;
    4. }
    7. /*  初始化 */
    9. li {
    10.     /* 取消点 */
    11.     list-style-type: none;
    12. }
    14. a {
    15.     text-decoration: none;
    16. }
    18. .carousel {
    19.     width: 1000px;
    20.     height: 600px;
    21.     /* 居中 */
    22.     margin: 0 auto;
    23.     /* 补充颜色 一背景色填充*/
    24.     background-color: aliceblue;
    25.     /* 相对定位 : 要想使用多个浮动，脱离文档流，必须用相对定位
    26.         position: relative; 是相对定位， 之后的元素使用了
    27.         position: absolute; 绝对定位，是需要根据前面的相对定位来确定位置的，
    28.                     absolute最开始是由 relative 的 0:0 坐标开始的定位的    */
    29.     position: relative;
    30.     /* 超出部分隐藏
    31.        把图片部分隐藏 */
    32.     overflow: hidden;
    33. }
    36. /* 让图片显示在一行上 ， 需要添加浮动*/
    38. .carsel-img li {
    39.     float: left;
    40. }
    42. .carsel-img {
    43.     /*  因为下边的图片需要显示出 1000px , 整体的宽度只有600px; 3张图片
    44.     是没有办法显示在一行的，所以需要在图片组中将 图片组的宽度设多一点 */
    45.     width: 99999px;
    46. }
    49. /* 如果图片没有显示完整， 需要处理图片 */
    51. .carsel-img img {
    52.     /* 因为每一张图片 大小不一样，宽度不该写 100% ， 只需要和 整体的宽度一样  */
    53.     width: 1000px;
    54.     height: 650px;
    55. }
    58. /* 控制按钮的样式 */
    60. .prev,
    61. .next {
    62.     width: 70px;
    63.     height: 60px;
    64.     /* 设置图案 */
    65.     /*  绝对定位，脱离文档流，因为设置的也是浮动 脱离文档流。
    66.     使用绝对定位便于定位图标的显示 */
    67.     position: absolute;
    68.     top: 50%;
    69.     /* 调整， top指 的 -16 像素 */
    70.     margin-top: -16px;
    71. }
    73. .prev {
    74.     left: 20px;
    75.     background-image: url("../html_css/images/left2.png");
    76. }
    78. .next {
    79.     right: 20px;
    80.     background-image: url("../html_css/images/right2.png");
    81. }
    84. /*  计数器  cont  */
    86. .cont {
    87.     width: 1000px;
    88.     height: 10px;
    89.     /*  使用了 绝对定位。 li 标签出现在 0：0 的位置  */
    90.     position: absolute;
    91.     /* 测试向下的 像素 */
    92.     bottom: 15px;
    93. }
    95. .cont ul {
    96.     width: 60px;
    97.     height: 10px;
    98.     margin: 0 auto;
    99.     /* background-color: red; */
    100. }
    102. .cont ul li {
    103.     width: 10px;
    104.     height: 10px;
    105.     background-color: rgb(16, 166, 241);
    106.     /* 鼠标单击 鼠标变成手型     cursor: pointer; */
    107.     cursor: pointer;
    108.     /* 给浮动 */
    109.     float: left;
    110.     /*  opacity不透明度   [0 1 ] 取值范围*/
    111.     opacity: .8;
    112.     /* 调整 左边距 */
    113.     margin-right: 10px;
    114.     /* 圆角 */
    115.     border-radius: 50%;
    116. }
    119. /*  图片激活状态 */
    122. /*  有一些设置了并 没有显示出结果 ， 就是权重问题*/
    124. .cont ul li.active {
    125.     background-color: rgb(253, 117, 13);
    126. }

    效果

    CSS - 图2

    组图区

    1. <ul class="carsel-img">
    2.     <!--  轮播组图 -->
    3.     <li>
    4.         <a href="#"><img src="http://www.sdust.edu.cn/__local/9/7A/B1/F29B84DEF72DD329997E8172ABA_664BA3EF_32466.jpg" alt="001"></a>
    5.     </li>
    6.     <li>
    7.         <a href="#"><img src="http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB84646970D53BFE_C506394A_4282CA.jpg" alt="002"></a>
    8.     </li>
    9.     <li>
    10.         <a href="#"><img src="http://www.sdust.edu.cn/__local/F/7A/AA/E1459849AA8AB0C89854A41BD41_BF3BD857_BC0D8.jpg" alt="003"></a>
    11.     </li>
    12. </ul>
    1. /*  初始化 */
    3. li {
    4.     /* 取消点 */
    5.     list-style-type: none;
    6. }
    8. a {
    9.     text-decoration: none;
    10. }
    12. .carousel {
    13.     width: 1000px;
    14.     height: 600px;
    15.     /* 居中 */
    16.     margin: 0 auto;
    17.     /* 补充颜色 一背景色填充*/
    18.     background-color: aliceblue;
    19.     /* 相对定位 : 要想使用多个浮动，脱离文档流，必须用相对定位
    20.         position: relative; 是相对定位， 之后的元素使用了
    21.         position: absolute; 绝对定位，是需要根据前面的相对定位来确定位置的，
    22.                     absolute最开始是由 relative 的 0:0 坐标开始的定位的    */
    23.     position: relative;
    24.     /* 超出部分隐藏
    25.        把图片部分隐藏 */
    26.     overflow: hidden;
    27. }
    30. /* 让图片显示在一行上 ， 需要添加浮动*/
    32. .carsel-img li {
    33.     float: left;
    34. }
    36. .carsel-img {
    37.     /*  因为下边的图片需要显示出 1000px , 整体的宽度只有600px; 3张图片
    38.     是没有办法显示在一行的，所以需要在图片组中将 图片组的宽度设多一点 */
    39.     width: 99999px;
    40. }
    43. /* 如果图片没有显示完整， 需要处理图片 */
    45. .carsel-img img {
    46.     /* 因为每一张图片 大小不一样，宽度不该写 100% ， 只需要和 整体的宽度一样  */
    47.     width: 1000px;
    48.     height: 650px;
    49. }

    控制器

    1. <!-- 控制器 按钮 -->
    3. <div class="prev"></div>
    4. <div class="next"></div>
    1. /* 控制按钮的样式 */
    3. .prev,
    4. .next {
    5.     width: 70px;
    6.     height: 60px;
    7.     /* 设置图案 */
    8.     /*  绝对定位，脱离文档流，因为设置的也是浮动 脱离文档流。
    9.     使用绝对定位便于定位图标的显示 */
    10.     position: absolute;
    11.     top: 50%;
    12.     /* 调整， top指 的 -16 像素 */
    13.     margin-top: -16px;
    14. }
    16. .prev {
    17.     left: 20px;
    18.     background-image: url("../html_css/images/left2.png");
    19. }
    21. .next {
    22.     right: 20px;
    23.     background-image: url("../html_css/images/right2.png");
    24. }

    计数器

    1. <!-- 计数器 -->
    2. <div class="cont">
    3.     <ul>
    4.         <!-- asd -->
    5.         <li class="active"></li>
    6.         <li></li>
    7.         <li></li>
    8.     </ul>
    9. </div>
    1. /*  计数器  cont  */
    3. .cont {
    4.     width: 1000px;
    5.     height: 10px;
    6.     /*  使用了 绝对定位。 li 标签出现在 0：0 的位置  */
    7.     position: absolute;
    8.     /* 测试向下的 像素 */
    9.     bottom: 15px;
    10. }
    12. .cont ul {
    13.     width: 60px;
    14.     height: 10px;
    15.     margin: 0 auto;
    16.     /* background-color: red; */
    17. }
    19. .cont ul li {
    20.     width: 10px;
    21.     height: 10px;
    22.     background-color: rgb(16, 166, 241);
    23.     /* 鼠标单击 鼠标变成手型     cursor: pointer; */
    24.     cursor: pointer;
    25.     /* 给浮动 */
    26.     float: left;
    27.     /*  opacity不透明度   [0 1 ] 取值范围*/
    28.     opacity: .8;
    29.     /* 调整 左边距 */
    30.     margin-right: 10px;
    31.     /* 圆角 */
    32.     border-radius: 50%;
    33. }
    36. /*  图片激活状态 */
    39. /*  有一些设置了并 没有显示出结果 ， 就是权重问题*/
    41. .cont ul li.active {
    42.     background-color: rgb(253, 117, 13);
    43. }

    CSS实例

    CSS - 图3

    网页 一般从整体分析

    整个网页

    • 上边部分标题
    • 中间的内容页
      • (需要浮动将3个内容排在一行)
    • 最后的页脚

    CSS - 图4

    代码

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>CSS day 4 作业1</title>
    9.     <link rel="stylesheet" href="../css/day4作业1.css">
    10. </head>
    12. <body>
    13.     <div class="start">
    14.         <!--  标题部分 -->
    15.         <div class="title">
    16.             <h1>页面标题</h1>
    17.         </div>
    19.         <!--  需要 3 个 占一行 就需要浮动  -->
    20.         <div class="content">
    21.             <div class="info left_info">
    22.                 <h4>左边侧栏</h4>
    23.                 <ul>
    24.                     <li><a href="#">链接1</a></li>
    25.                     <li><a href="#">链接2</a></li>
    26.                     <li><a href="#">链接3</a></li>
    27.                     <li><a href="#">链接4</a></li>
    28.                     <li><a href="#">链接5</a></li>
    29.                 </ul>
    30.             </div>
    31.             <div class="cont">
    32.                 <h4>内容</h4>
    33.                 <p>メSerendipity 春花、秋月、夏日、冬雪，静守时光，以待流年。
    34.                 </p>
    35.                 <p>Vue Router的原理及history模式源码实现 Hash 模式 URL中 # 后面的内容作为路径地址，可以通过location.url直接切换路由地址,如果只改变了#后面的内容,浏览器不会向服务器请求这个地址, 会把这个地址记录到浏览器的访问历史中,当hash发生改变之后 会触发hashchange事件,在hashchang e事件中记
    36.                 </p>
    37.                 <p>录当前的路由地址,并找到 该路径对应的组件并重新渲染。</p>
    39.                 <p>History 模式 History模式就是一个普通的url,通过history.pushState()方法仅仅改变地址栏,并把地址栏中的地址添加到访问历史中,通过监听popstate 事件可以监听浏览器数据的变化,此时不会向服务器发送请求,只有当刷新页面或者点击 浏览器前进后退按钮的时候该事件才会被触发向 浏览器发送请求。
    40.                 </p>
    41.             </div>
    42.             <div class="info right_info">
    43.                 <h4>右边侧栏</h4>
    44.                 <ul>
    45.                     <li><a href="#">链接1</a></li>
    46.                     <li><a href="#">链接2</a></li>
    47.                     <li><a href="#">链接3</a></li>
    48.                     <li><a href="#">链接4</a></li>
    49.                     <li><a href="#">链接5</a></li>
    50.                     <li><a href="#">链接6</a></li>
    51.                     <li><a href="#">链接7</a></li>
    52.                 </ul>
    53.             </div>
    54.         </div>
    56.         <!--  这里页脚是最后的， 所以上边需要清除浮动 -->
    57.         <div class="foo">页脚</div>
    58.     </div>
    59. </body>
    61. </html>
    1. /* 初始化 */
    3. * {
    4.     padding: 0;
    5.     margin: 0;
    6. }
    8. .start {
    9.     /*  内容区一般不给高度， 高度是由内容自行撑开 */
    10.     width: 1000px;
    11.     /* height: 700px; */
    12.     border: 1px solid #000;
    13.     margin: 0 auto;
    14. }
    16. h1 {
    17.     font-size: 20px;
    18.     font-family: 黑体;
    19.     font-weight: normal;
    20.     background-color: #ccc;
    21.     text-align: center;
    22.     /* 设置字体的距离  padding 值 */
    23.     padding: 20px 0;
    24. }
    27. /*  左栏 和 右栏 具有相同的样式 使用公共的类名 info 进行 设置样式*/
    29. .content {
    30.     /* 清除浮动 */
    31.     overflow: hidden;
    32. }
    34. .info {
    35.     background: #ebebebeb url(../html_css/images/left2.png) repeat-x;
    36.     width: 200px;
    37.     height: 600px;
    38.     /* 浮动 */
    39.     float: left;
    40. }
    42. h4 {
    43.     padding: 20px 0 15px 10px;
    44. }
    46. ul {
    47.     /*  左边缩进 */
    48.     padding-left: 30px;
    49. }
    51. li {
    52.     /* 行和行的距离 */
    53.     line-height: 1.5em;
    54.     font-size: 14px;
    55. }
    57. a {
    58.     text-decoration: none;
    59.     color: #000;
    60. }
    62. a:hover {
    63.     color: rgb(36, 10, 230);
    64. }
    66. .cont {
    67.     /* 内容篇 */
    68.     background: #fff url(../html_css/images/right2.png) repeat-x;
    69.     width: 600px;
    70.     height: 300px;
    71.     float: left;
    72. }
    74. .cont p {
    75.     /*  p 标签的文字样式  */
    76.     text-indent: 2em;
    77.     line-height: 1.5em;
    78.     padding: 10px 20px 10px 10px;
    79.     font-size: 14px;
    80. }
    82. .foo {
    83.     /*  清除浮动 */
    84.     /* width: 100%; */
    85.     height: 12px;
    86.     background-color: #ccc;
    87.     /*  给 padding 值 让内容撑开 */
    88.     padding: 10px 0 15px 10px;
    89.     font-size: 14px;
    90. }

    CSS - 图5

    CSS - 图6

    页面构成

    CSS - 图7

    HTML

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>CSS day4 实训2 </title>
    9.     <link rel="stylesheet" href="../css/CSSday4实训2.css">
    10. </head>
    12. <body>
    13.     <!--  -->
    14.     <div class="wrapper">
    15.         <!-- 列表区 -->
    16.         <div class="nav">
    17.             <ul>
    18.                 <li><a href="#">首页</a></li>
    19.                 <li><a href="#">HTML5资讯</a></li>
    20.                 <li><a href="#">移动互联网</a></li>
    21.                 <li><a href="#">应用推荐</a></li>
    22.                 <li><a href="#">教程视频</a></li>
    23.                 <li><a href="#">资源下载</a></li>
    24.                 <li><a href="#">开发工具</a></li>
    25.                 <li><a href="#">HTML5论坛</a></li>
    26.             </ul>
    27.         </div>
    29.         <!-- 内容区 -->
    30.         <div class="content">
    31.             <!-- 左边的侧栏内容 -->
    32.             <div class="article">
    33.                 <h1>前言</h1>
    34.                 <h2>前段时间</h2>
    35.                 <p>找工作面试官问到一个问题，你如何将一个网页整体置灰？面试遇到这样的问题，一下束手无策，之前没有接触过这样的需求，因此没有回答上来，面试结束我才知道了这是考查对 CSS3 的新属性的了解</p>
    36.                 <p>这里需要掌握 filter(滤镜) 这个新属性。细想一下，这个需求成立啊，比如遇到清明节、全国哀悼日、大地震等灾害的日子，我们的网页可以全局置灰，相当于加一层滤镜，以表示我们对逝者的悼念。</p>
    37.                 <h2>正文</h2>
    38.                 <p>　filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。本文用谷歌浏览器测试，暂不烤炉兼容问题。</p>
    39.                 <p>语法： 　　　　filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();</p>
    40.                 <p>　　注意：可以使用空格分割加多个滤镜。</p>
    41.                 <p>　　默认值：none；不加任何效果。</p>
    42.             </div>
    43.             <!-- 右边的侧栏内容 -->
    44.             <div class="asidebar">
    45.                 <div class="aside">
    46.                     <h3>参考资料</h3>
    47.                     <ul>
    48.                         <li>
    49.                             <a href="#">H51</a>
    50.                         </li>
    51.                         <li>
    52.                             <a href="#">H52</a>
    53.                         </li>
    54.                         <li>
    55.                             <a href="#">H53</a>
    56.                         </li>
    57.                         <li>
    58.                             <a href="#">H54</a>
    59.                         </li>
    60.                         <li>
    61.                             <a href="#">H55</a>
    62.                         </li>
    63.                         <li>
    64.                             <a href="#">H56</a>
    65.                         </li>
    66.                         <li>
    67.                             <a href="#">H57</a>
    68.                         </li>
    69.                         <li>
    70.                             <a href="#">H5应用须知</a>
    71.                         </li>
    72.                     </ul>
    73.                 </div>
    74.                 <!-- 因为侧边栏的样式都一样， 所以直接设置类名一样 -->
    75.                 <div class="aside">
    76.                     <h3>扩展阅读</h3>
    77.                     <ul>
    78.                         <li><a href="#">H5内容1</a></li>
    79.                         <li><a href="#">H5内容2</a></li>
    80.                         <li><a href="#">H5内容3</a></li>
    81.                         <li><a href="#">H5内容4</a></li>
    82.                         <li><a href="#">H5内容5</a></li>
    83.                         <li><a href="#">H5内容6</a></li>
    84.                         <li><a href="#">H5内容7</a></li>
    85.                         <li><a href="#">H5内容8</a></li>
    86.                     </ul>
    87.                 </div>
    88.             </div>
    89.         </div>
    90.         <!-- 脚注版权区 -->
    91.         <div class="foot">
    92.             <p> Copyright &copy; 2004-2021</p>
    93.         </div>
    94.     </div>
    96. </body>
    98. </html>

    CSS

    1. * {
    2.     margin: 0;
    3.     padding: 0;
    4. }
    7. /*  设置整体 */
    9. body {
    10.     background-color: #f6f6f6;
    11.     font-size: 12px;
    12.     padding: 10px;
    13. }
    15. .wrapper {
    16.     width: 800px;
    17.     margin: 0 auto;
    18.     background-color: #fff;
    19.     border: 1px solid #ccc;
    20. }
    22. .wrapper .nav {
    23.     background-color: rgb(20, 61, 184);
    24.     /*  需要一个背景颜色 */
    25. }
    27. .nav ul {
    28.     list-style-type: none;
    29.     padding: 8px 0 8px 20px;
    30. }
    32. .nav li {
    33.     /*  列表项 需要横向平铺 
    34.     具有两种写法 ： 1 浮动， 2，使用 display 将行级变为块级, */
    35.     display: inline-block;
    36.     /*  inline-block 会产生间隙 */
    37.     margin: 0 12px;
    38. }
    40. .nav a {
    41.     text-decoration: none;
    42.     color: #fff;
    43.     font-size: 15px;
    44.     font-weight: bold;
    45. }
    47. .nav a:hover {
    48.     /* 鼠标经过样式 */
    49.     color: rgb(10, 211, 67);
    50. }
    52. .content {
    53.     /* 左右两边栏 清除浮动 */
    54.     overflow: hidden;
    55. }
    57. .article {
    58.     width: 520px;
    59.     padding: 5px 10px 5px 15px;
    60.     /*  dotted 虚线 */
    61.     border-right: 1px dotted #000;
    62.     /*左边和右边站一起，需要浮动  */
    63.     float: left;
    64. }
    66. .article h1 {
    67.     text-align: center;
    68.     font-size: 26px;
    69.     font-family: 黑体;
    70.     margin: 30px 20px;
    71. }
    73. .article h2 {
    74.     font-size: 15px;
    75.     font-family: 微软雅黑;
    76.     /* 缩进 2  */
    77.     text-indent: 2em;
    78.     margin: 20px 0 15px;
    79.     font-weight: bold;
    80. }
    82. .article p {
    83.     text-indent: 2em;
    84.     font-size: 12px;
    85.     /* 设置间距 */
    86.     padding: 10px 0 15px 10px;
    87. }
    89. .asidebar {
    90.     /*  右浮动 */
    91.     float: right;
    92.     /*  给宽度 */
    93.     width: 240px;
    94.     /* 上边间隙 ， 和左边间隙  */
    95.     margin: 85px 0px 0 10px;
    96. }
    98. .aside {
    99.     /*  下边间隔 10px  */
    100.     margin-bottom: 10px;
    101.     border-left: 1px solid #ccc;
    102.     border-bottom: 1px solid #ccc;
    103. }
    105. .aside h3 {
    106.     background-color: #2267b5;
    107.     font-size: 12px;
    108.     color: #f5f5f5;
    109.     padding: 5px 0px 5px 20px;
    110. }
    112. .aside ul {
    113.     margin: 0 0 0 30px;
    114. }
    116. .aside li {
    117.     margin: 8px 0;
    118. }
    120. .aside a {
    121.     color: #000;
    122.     text-decoration: none;
    123. }
    125. .aside a:hover {
    126.     text-decoration: underline;
    127.     color: rgb(21, 208, 43);
    128. }
    131. /* 页脚 */
    133. .foot p {
    134.     /* width: 100%; */
    135.     background-color: rgb(20, 61, 184);
    136.     height: 25px;
    137.     padding: 8px 0 0 15px;
    138.     color: #fff;
    139.     margin-bottom: 20px;
    140. }

    效果

    CSS - 图8

    CSS定位布局

    定位（ position） ： 设定元素在文档中的位置。会将标签（元素） 转化为块级。

    定位的分类

    • static : 静态定位， 默认值 ，没有定位， 不能设置偏移 （ left / top / bottom / right ）, 占用标准流 （文档流），也就是占用元素本来的位置 。
    • relative : 相对定位, 占用标准流 （文档流 ），他会出现在文档中该出现的位置。 可以通过设置偏移值改变其位置， 相对于自身做偏移
    • absolute : 绝对定位 ， （ 脱离文档流），单独使用相对于 body 做偏移 ( left / top / right / buttom)。如果绝对定位和相对定位结合起来使用， 它相对的父级是 relative 定义的元素做偏移。relative的元素必须是 absolute 的父级在项目开发中，一般使用 relative + absolute 结合使用最多
    • fixed : 固定定位 , （脱离文档流），相对于浏览器窗口左上角 （0，0） 偏移，它与 relative 设定的对象没有任何关系，也就是说，它和父级的定位没有任何关系了， 一般用于开发固定的导航栏

    偏移：

    CSS - 图9

    CSS 定位 static 和 relative

    static 静态定位 和 relative 相对定位

    • static : 静态定位， 默认值 ，没有定位， 不能设置偏移 （ left / top / bottom / right ）, 占用标准流（文档流），也就是占用元素本来的位置 。
    • relative : 相对定位, 占用标准流 （文档流 ），他会出现在文档中该出现的位置。 可以通过设置偏移值改变其位置, 它相对于自身所占的位置做偏移。
    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>CSS static 和 relative 定位</title>
    9.     <style type="text/css">
    10.         .wrapper {
    11.             width: 1000px;
    12.             height: 600px;
    13.             border: 2px solid #ccc;
    14.             padding: 0 auto;
    15.             /* 都占一行  */
    16.         }
    18.         .box1,
    19.         .box2,
    20.         .box3 {
    21.             width: 200px;
    22.             height: 200px;
    23.             border: 2px dotted red;
    24.             display: inline-block;
    25.         }
    26.         /*  static  */
    28.         .box2 {
    29.             /*  静态定位 */
    30.             position: static;
    31.             /* 静态定位  偏移不起作用 */
    32.             left: 100px;
    33.             bottom: 300px;
    34.         }
    36.         .box2 {
    37.             /*  相对定位  */
    38.             position: relative;
    39.             /* 从 0,0开始， 进行偏移，元素变化后的 left 和 top 变化  */
    40.             left: 100px;
    41.             top: 200px;
    42.         }
    43.     </style>
    44. </head>
    46. <body>
    47.     <div class="wrapper">
    48.         <div class="box1"></div>
    49.         <div class="box2"></div>
    50.         <div class="box3"></div>
    51.     </div>
    52. </body>
    54. </html>

    CSS定位 relative 和 absolute

    absolute : 绝对定位 ， 脱离文档流，相对于 body 做偏移 ( left / top / right / buttom)。如果绝对定位和相对定位结合起来使用， 它相对的父级是 relative 定义的元素做偏移。relative的元素必须是 absolute 的父级在项目开发中，一般使用 relative + absolute 结合使用最多

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>CSS定位 相对定位 relative 和 绝对定位 absolute </title>
    9.     <style type="text/css">
    10.         .wrapper {
    11.             width: 1000px;
    12.             height: 600px;
    13.             border: 2px solid #ccc;
    14.             /* 居中 */
    15.             padding: 0 auto;
    16.             /* 都占一行  */
    17.             /* 父级使用  relative  */
    18.             position: relative;
    19.         }
    21.         .box1,
    22.         .box2,
    23.         .box3 {
    24.             width: 200px;
    25.             height: 200px;
    26.             border: 2px dotted red;
    27.             display: inline-block;
    28.         }
    30.         .box2 {
    31.             /*  以父级的 relative 进行 (0, 0) 定位 */
    32.             left: 120px;
    33.             top: 100px;
    34.             position: absolute;
    35.             /* 脱离文档流 */
    36.         }
    37.     </style>
    38. </head>
    40. <body>
    41.     <div class="wrapper">
    42.         <div class="box1"></div>
    43.         <div class="box2"></div>
    44.         <div class="box3"></div>
    45.     </div>
    46. </body>
    48. </html>

    CSS 的fixed 固定定位

    fixed : 固定定位 , 脱离文档流，相对于浏览器窗口左上角 （0，0） 偏移，它与 relative 设定的对象没有任何关系，也就是说，它和父级的定位没有任何关系了， 一般用于开发固定的导航栏

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>CSS 的 固定定位 fixed </title>
    9.     <style type="text/css">
    10.         .wrapper {
    11.             width: 1000px;
    12.             height: 600px;
    13.             border: 2px solid #ccc;
    14.             /* 居中 */
    15.             margin: 0 auto;
    16.             /* 都占一行  */
    17.             /* 父级使用  relative  */
    18.             position: relative;
    19.             /* 当下边使用了 fixed 定位 ， 就和父级的 relative 定位已经没有关系了 */
    20.         }
    22.         .box1,
    23.         .box2,
    24.         .box3 {
    25.             width: 200px;
    26.             height: 200px;
    27.             border: 2px dotted red;
    28.             display: inline-block;
    29.         }
    31.         .box2 {
    32.             left: 120px;
    33.             top: 100px;
    34.             /* 相对于浏览器进行定位 */
    35.             position: fixed;
    36.         }
    37.     </style>
    38. </head>
    40. <body>
    41.     <div class="wrapper">
    42.         <div class="box1"></div>
    43.         <div class="box2"></div>
    44.         <div class="box3"></div>
    45.     </div>
    46. </body>
    48. </html>

    CSS调整显示顺序

    z-index : 值为 数值

    当多个元素添加绝对定位， 元素会叠加在一起， 使用 z-index 可以设置元素显示的层次

    文档流 默认的 z-index 的值为 0 , z-index 使用在 static 和 relative 元素上将无效

    z-index : 当多个元素添加绝对定位， 元素会叠加在一起， 使用 z-index 可以设置元素显示的层次可以让挤在一起的 元素 显示的先后顺序

    z-index 显示顺序 ： [ -number 0 +number ]

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>CSS 调整显示序列 z-index </title>
    9.     <style type="text/css">
    10.         .wrapper {
    11.             width: 1000px;
    12.             height: 600px;
    13.             border: 2px solid #ccc;
    14.             /* 居中 */
    15.             margin: 0 auto;
    16.             /* 父级相对定位 */
    17.             position: relative;
    18.         }
    20.         .box1,
    21.         .box2,
    22.         .box3 {
    23.             width: 200px;
    24.             height: 200px;
    25.             border: 2px dotted red;
    26.             display: inline-block;
    27.             /*  集中显示在 ( 0,0 ) 坐标 */
    28.             position: absolute;
    29.         }
    30.         /*  z-index :  当多个元素添加绝对定位， 元素会叠加在一起， 使用  z-index 可以设置元素显示的层次
    31.             可以让挤在一起的 元素 显示的先后顺序 
    32.             z-index 显示顺序 ：  [ -number  0  +number  ]*/
    34.         .box1 {
    35.             background-color: #f00;
    36.             z-index: 1;
    37.         }
    39.         .box2 {
    40.             background-color: #0f0;
    41.             left: 50px;
    42.             top: 40px;
    43.             z-index: 3;
    44.         }
    46.         .box3 {
    47.             background-color: #00f;
    48.             left: 100px;
    49.             z-index: 3;
    50.         }
    51.     </style>
    52. </head>
    54. <body>
    55.     <div class="wrapper">
    56.         <div class="box1"></div>
    57.         <div class="box2"></div>
    58.         <div class="box3"></div>
    59.     </div>
    60. </body>
    62. </html>

    CSS 布局

    网站开发策略 ： 先整体再局部，指顶向下，逐步细化

    CSS 双飞翼布局

    双飞翼布局： 左右宽度固定，中间的列宽根据浏览器的窗口大小自适应 。

    双飞翼布局的优点 ：

    • 兼容性好，兼容所有的主流浏览器， 包括万恶的 IE6
    • 因为在DOM中center_panel 在三列结构的前面，因此可以实现主要的内容优先加载

    CSS - 图10

    html

    1.     <div class="container">
    2.         <div class="content"></div>
    3.         <div class="left"></div>
    4.         <div class="right"></div>
    5.     </div>

    css

    1. .container {
    2.     width: 100%;
    3.     /* 清除浮动 */
    4.     overflow: hidden;
    5. }
    7. .left,
    8. .content,
    9. .right {
    10.     /* 浮动，占一行 */
    11.     float: left;
    12. }
    14. .content {
    15.     /* 需要中间自适应  content的 width 就是设置成 100%  */
    16.     width: 100%;
    17.     height: 100px;
    18.     background-color: #F00;
    19. }
    21. .left {
    22.     width: 200px;
    23.     height: 100px;
    24.     background-color: #0F0;
    25.     /* 使用 margin-left 让元素和 content 占一行  */
    26.     /* 使用  margin-left: -100% ， 回到最左侧 */
    27.     margin-left: -100%;
    28. }
    30. .right {
    31.     width: 200px;
    32.     height: 100px;
    33.     background-color: #00F;
    34.     /* 让 right 到 最右边
    35.     使用 margin-left: -200px，  right 的宽度  */
    36.     margin-left: -200px;
    37. }

    CSS 圣杯布局

    由三列组成，两端固定，中间自适应。 外观于双飞翼的一样

    和双飞翼布局的区别 ：双飞翼布局是左右两边叠加在中间的， 圣杯是将左右两边移动到padding给的值，固定起来了，不会影响到 content的内容

    1. <!-- 通常网页由三部分组成 -->
    2. <!-- 1, header 头部 -->
    3. <div class="header">#Header</div>
    5. <!-- 2. content 内容部分 -->
    6. <div class="container">
    7.     <div class="content"></div>
    8.     <div class="left"></div>
    9.     <div class="right"></div>
    10. </div>
    11. <!-- 3， footer 尾部 -->
    12. <div class="footer">#Footer </div>
    1. body {
    2.     /* 设置浏览器 最小的值 */
    3.     min-width: 600px;
    4. }
    6. .header,
    7. .footer {
    8.     /* 设置网页的 头部和尾部 */
    9.     width: 100%;
    10.     height: 100px;
    11.     line-height: 100px;
    12.     text-align: center;
    13.     background-color: rgb(15, 240, 187);
    14.     font-size: 30px;
    15. }
    17. .container {
    18.     /* padding 设置的 200 是 放置left 和 right 的内容 */
    19.     padding: 0 200px;
    20.     overflow: hidden;
    21. }
    23. .content,
    24. .left,
    25. .right {
    26.     /* 浮动 */
    27.     float: left;
    28.     height: 200px;
    29.     /* 圣杯布局需要 增加 定位,  然后通过定位移动元素*/
    30.     position: relative;
    31. }
    33. .content {
    34.     /* 中间自适应 ，width 设置成 100% */
    35.     width: 100%;
    36.     background-color: #f00;
    37. }
    39. .left {
    40.     width: 200px;
    41.     background-color: #0f0;
    42.     /* 使用 margin-left 样元素移动到 center 两边, 和 双飞翼布局一样  */
    43.     margin-left: -100%;
    44.     /* 通过定位的 relative ， 将元素移动到  padding 给的200值  里边 */
    45.     left: -200px;
    46. }
    48. .right {
    49.     width: 200px;
    50.     background-color: #00f;
    51.     /* 和双飞翼布局的， 移动元素到 content 的两边  */
    52.     margin-left: -200px;
    53.     /* 通过定位的 relative ， 将元素移动到  padding 给的200值  里边 */
    54.     right: -200px;
    55. }

    CSS 侧边栏固定布局

    侧边栏布局是一种比较常见的布局方案

    左侧固定，右侧自适应

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>CSS 左侧固定，右侧自适应</title>
    9.     <style type="text/css">
    10.         body {
    11.             font-size: 30px;
    12.             min-width: 600px;
    13.         }
    15.         .container {
    16.             width: 100%;
    17.             /* 清除浮动 */
    18.             overflow: hidden;
    19.         }
    21.         .left {
    22.             /* 左侧固定 */
    23.             width: 150px;
    24.             /* 在实际开发中，尽量不要用 height，高度自由内容 自行撑开 */
    25.             height: 200px;
    26.             float: left;
    27.             background-color: #f00;
    28.             /* margin-right 让 right区 同在一行 */
    29.             margin-right: -150px;
    30.             position: relative;
    31.         }
    33.         .right {
    34.             /* 右侧自适应 ， width设置为100%*/
    35.             width: 100%;
    36.             height: 200px;
    37.             float: left;
    38.             background-color: #0f0;
    39.             /* 往右边移动 */
    40.             margin-left: 155px;
    41.         }
    42.     </style>
    43. </head>
    45. <body>
    46.     <div class="container">
    47.         <div class="left"> # 左侧 固定</div>
    48.         <div class="right"> # 右侧 自适应</div>
    49.     </div>
    50. </body>
    52. </html>

    右侧固定，左侧自适应

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>CSS 右侧固定，左侧自适应</title>
    9.     <style type="text/css">
    10.         body {
    11.             font-size: 30px;
    12.             min-width: 600px;
    13.         }
    15.         .container {
    16.             width: 100%;
    17.             /* 清除浮动 */
    18.             overflow: hidden;
    19.         }
    21.         .left {
    22.             /* 左侧自适应 ， width设置为100%*/
    23.             width: 100%;
    24.             height: 200px;
    25.             float: left;
    26.             background-color: #0f0;
    27.         }
    29.         .right {
    30.             /* 右侧固定 */
    31.             width: 150px;
    32.             /* 在实际开发中，尽量不要用 height，高度自由内容 自行撑开 */
    33.             height: 200px;
    34.             float: left;
    35.             background-color: #f00;
    36.             /* 占同一行 */
    37.             margin-left: -150px;
    38.             /* position: relative; */
    39.         }
    40.     </style>
    41. </head>
    43. <body>
    44.     <div class="container">
    45.         <div class="left"> # 左侧 自适应</div>
    46.         <div class="right"> # 右侧 固定</div>
    47.     </div>
    48. </body>
    50. </html>

    两列定宽 , 左右固定

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title> CSS 左右固定</title>
    9.     <style>
    10.         body {
    11.             font-size: 30px;
    12.             /* min-width: 600px; */
    13.         }
    15.         .container {
    16.             /* 内容固定  */
    17.             width: 100%;
    18.             /* 清除浮动 */
    19.             overflow: hidden;
    20.         }
    22.         .left {
    23.             width: 200px;
    24.             height: 400px;
    25.             background-color: #f00;
    26.             float: left;
    27.         }
    29.         .right {
    30.             width: 780px;
    31.             height: 400px;
    32.             background-color: #ff0;
    33.             /* 右 浮动 */
    34.             float: right;
    35.         }
    36.     </style>
    37. </head>
    39. <body>
    40.     <div class="connainer">
    41.         <div class="left"> 左侧 固定</div>
    42.         <div class="right"> 右侧固定</div>
    43.     </div>
    44. </body>
    46. </html>

    CSS三栏布局

    右侧，左侧 固定 ， 中间自适应

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title> CSS 三栏布局</title>
    9.     <style type="text/css">
    10.         .container {
    11.             font-size: 25px;
    12.             color: aliceblue;
    13.             line-height: 200px;
    14.             text-align: center;
    15.             /* 清除浮动 */
    16.             overflow: hidden;
    17.         }
    19.         .left,
    20.         .right {
    21.             /* width: 150px; */
    22.             float: left;
    23.             height: 200px;
    24.             /* 相对定位 */
    25.             position: relative;
    26.         }
    28.         .left {
    29.             width: 150px;
    30.             background-color: #f00;
    31.             /* 使用 margin-right  左侧和中间占一行  */
    32.             margin-right: -150px;
    33.         }
    35.         .right {
    36.             width: 200px;
    37.             background-color: #ff0;
    38.             /*  margin-left  让右边和中间 占 一行 */
    39.             margin-left: -200px;
    40.         }
    42.         .content {
    43.             /* 自适应 */
    44.             width: 100%;
    45.             height: 200px;
    46.             float: left;
    47.             background-color: #00f;
    48.         }
    49.     </style>
    50. </head>
    52. <body>
    53.     <!--右侧，左侧 固定 ， 中间自适应 -->
    54.     <div class="container">
    55.         <div class="left"> 左侧固定</div>
    56.         <div class="content">
    57.             <div class="content"> 中间 自适应</div>
    58.         </div>
    59.         <div class="right"> 右侧固定</div>
    60.     </div>
    61. </body>
    63. </html>

    右侧，中间侧 固定 ， 左侧自适应

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>CSS 三栏布局二 </title>
    9.     <style type="text/css">
    10.         .container {
    11.             font-size: 25px;
    12.             overflow: hidden;
    13.             text-align: center;
    14.         }
    16.         .left {
    17.             width: 100%;
    18.             height: 200px;
    19.             background-color: #00f;
    20.             float: left;
    21.             /* 加上content 的原因是需要腾出空间,给 中 和 右  600px是中和右的width的总宽度 
    22.                 margin-right: -600px  */
    23.             margin-right: -600px;
    24.         }
    26.         .content {
    27.             line-height: 200px;
    28.             text-align: center;
    29.         }
    31.         .center,
    32.         .right {
    33.             height: 200px;
    34.             float: right;
    35.             line-height: 200px;
    36.         }
    38.         .center {
    39.             width: 300px;
    40.             background-color: #f00;
    41.         }
    43.         .right {
    44.             width: 300px;
    45.             background-color: #ff0;
    46.         }
    47.     </style>
    49. </head>
    51. <body>
    52.     <!--中间侧，右侧 固定 ， 左自适应 -->
    53.     <div class="container">
    54.         <div class="left">
    55.             <div class="content"> 左侧自适应</div>
    56.         </div>
    57.         <div class="center">中间固定</div>
    58.         <div class="right"> 右侧固定</div>
    59.     </div>
    60. </body>
    62. </html>

    中间，左侧 固定 ， 右侧自适应

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>CSS 三栏布局3 </title>
    9.     <style type="text/css">
    10.         .container {
    11.             font-size: 25px;
    12.             overflow: hidden;
    13.             text-align: center;
    14.         }
    16.         .left {
    17.             width: 300px;
    18.             height: 200px;
    19.             background-color: #ff0;
    20.         }
    22.         .content {
    23.             line-height: 200px;
    24.             text-align: center;
    25.             margin-right: 200px;
    26.         }
    28.         .center,
    29.         .left {
    30.             height: 200px;
    31.             float: left;
    32.             line-height: 200px;
    33.         }
    35.         .center {
    36.             width: 300px;
    37.             background-color: #f00;
    38.         }
    40.         .right {
    41.             width: 100%;
    42.             height: 200px;
    43.             background-color: #00f;
    44.             float: right;
    45.             margin-right: -600px;
    46.         }
    47.     </style>
    49. </head>
    51. <body>
    52.     <!--中间侧，右侧 固定 ， 左自适应 -->
    53.     <div class="container">
    54.         <div class="left">左侧固定
    55.         </div>
    56.         <div class="center">中间固定</div>
    57.         <div class="right">
    58.             <div class="content">右侧自适应 </div>
    59.         </div>
    60.     </div>
    61. </body>
    63. </html>

    CSS的规范

    FC ： 格式上下文， 它是页面中的一块渲染区域， 并且有一套渲染规则，它决定了其子元素将如何定位，以及其他元素的对应关系和相互作用

    分为 BFC 和 IFC

    BFC 规范

    BFC块级格式上下文

    形成BFC的条件

    • 浮动元素 （ float 除了 none 以外的值）
    • 定位元素 （ position ( abolute / fixed )）
    • display ( 值为 inline-block / table-cell / table-caption 时)
    • overflow （ 值为 hidden / auto / scroll 时）

    BFC的特性

    • 内部盒子会在垂直方向上一个接一个的放置
    • 垂直方向上的距离会叠加，值由最大 margin 值决定， 如果不要叠加，就需要将盒子变成一个独立的容器（在外层加一个容器进行包裹起来）
    • BFC的区域不会 float 元素区域重叠
    • 计算BFC高度时，浮动元素也参与计算
    • BFC就是页面上的一个独立的容器， 容器里面的子元素不会影响到外面的元素

    BFC 的作用

    • 解决 margin 重叠的问题 （添加独立 BFC）
    • 解决浮动高度塌陷的问题 （ 在父级添加 overflow: hidden）
    • 解决侵占浮动元素的问题 （ 同级时候， 在其中一个添加 overflow: hidden ）
    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>CSS 的 BFC规范　</title>
    9.     <!-- BFC 的特性 -->
    10.     <!-- <style>
    11.         /*  特性1 内部盒子会在垂直方向上一个接一个的放置*/
    12.         .box1,
    13.         .box2 {
    14.             width: 200px;
    15.             height: 100px;
    16.         }
    18.         .box1 {
    19.             background-color: #f00;
    20.         }
    22.         .box2 {
    23.             background-color: #0f0;
    24.         }
    25.     </style> -->
    26.     <!-- 
    27.     <style>
    28.         /* 特性二 ：  垂直方向上的距离会叠加，值由最大 margin （20） 值决定， 如果不要叠加，就需要将盒子变成一个独立的容器（在外层加一个容器进行包裹起来） */
    30.         .container {
    31.             overflow: hidden;
    32.             width: 100px;
    33.             height: 100px;
    34.             background-color: #00f;
    35.         }
    37.         .wrapper {
    38.             /* 将 box1 变成一个独立的容器，之后的 margin值和box2 的margin值就可以叠加 */
    39.             overflow: hidden;
    40.         }
    42.         .box1 {
    43.             background-color: #f00;
    44.             height: 10px;
    45.             margin: 10px 0;
    46.         }
    48.         .box2 {
    49.             background-color: #0f0;
    50.             height: 10px;
    51.             margin: 20px 0;
    52.         }
    53.     </style> -->
    54.     <!-- 
    55.     <style>
    56.         /* BFC的区域不会 float 元素区域重叠, 经常遇到 ，也就时  两个 BFC 区域不会重叠 */
    58.         .box1 {
    59.             /* 这是一个 BFC  */
    60.             float: left;
    61.             width: 200px;
    62.             height: 200px;
    63.             background-color: rgb(90, 135, 38);
    64.         }
    66.         .box2 {
    67.             /* 这又是一个 BFC */
    68.             overflow: hidden;
    69.             width: 500px;
    70.             height: 300px;
    71.             background-color: rgb(24, 88, 145);
    72.         }
    73.     </style>
    74.     -->
    76.     <!-- <style>
    77.         /* 计算BFC高度时，浮动元素也参与计算 */
    79.         .container {
    80.             border: 1px solid #000;
    81.             width: 300px;
    82.             /* 没有形成BFC时， 它是没有撑开下边的box2 的浮动的， 如果想要撑开包含box2，就需要将 container 设置成浮动, 
    83.                 此时 container 的 高度时由 它里面的 浮动元素撑开*/
    84.             overflow: hidden;
    85.         }
    87.         .box2 {
    88.             width: 200px;
    89.             height: 300px;
    90.             /* 是一个 BFC  */
    91.             float: left;
    92.             background-color: #f00;
    93.         }
    94.     </style> -->
    95. </head>
    97. <body>
    98.     <div class="container">
    99.         <div class="wrapper">
    100.             <div class="box1"></div>
    101.         </div>
    102.         <div class="box2"></div>
    103.     </div>
    104. </body>
    106. </html>

    IFC 规范

    IFC行级标签的规范

    IFC ： 内联（行级）格式上下文

    形成IFC的条件

    • font-size
    • line-height
    • height
    • vertical-aligin

    IFC 的特性

    • IFC的元素会在一行中从左至右排列
    • 在一行上的所有元素会在该区域形成一个行框
    • 行宽的高度为 包含框的高度 ，高度为行框中最高元素的高度
    • 浮动元素不会在行框中， 并且浮动元素会压缩行框的宽度
    • 行框的宽度容纳不下子元素时， 子元素会换成下一行显示，并且会产生新的行框
    • 行框的元素内遵循 text-align 和 vertical-aligin
    1. span {
    2.     /* width 行级标签不会识别宽高*/
    3.     width: 200px;
    4.     font-size: 40px;
    5.     background-color: #00f;
    6. }
    8. strong {
    9.     font-size: 16px;
    11. }
    13. .box {
    14.     /* 浮动元素， */
    15.     float: left;
    16. }
    18. div {
    19.     /* 块级标签转化为： 行级标签 */
    20.     display: inline;
    21. }

    容器的高度

    height = line-height + vertical-aligin

    行高 + 垂直布局的高度

    CSS 实例二

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>CSS day 5 作业</title>
    9.     <link rel="stylesheet" href="../css/day5作业.css">
    10. </head>
    12. <body>
    13.     <!-- 页面 -->
    14.     <div class="container">
    15.         <!-- 1 头部 -->
    16.         <div class="header">
    17.             <!-- logo  -->
    18.             <a href="#"><img src="../img5.png" alt="logo" width="100px" height="50px"></a>
    19.             <!-- 主导航 -->
    20.             <nav class="mainnav">
    21.                 <ul>
    22.                     <li><a href="#">主页</a></li>
    23.                     <li><a href="#">个人业务</a></li>
    24.                     <li><a href="#">公司业务</a></li>
    25.                     <li><a href="#">小企业</a></li>
    26.                     <li><a href="#">信用卡</a></li>
    27.                     <li><a href="#">理财</a></li>
    28.                     <li><a href="#">商旅预定</a></li>
    29.                     <li><a href="#">今日招行</a></li>
    30.                 </ul>
    31.             </nav>
    32.             <!-- 夫导航 -->
    33.             <nav class="subnav">
    34.                 <ul>
    35.                     <li><a href="#">导航aaaa1</a></li>
    36.                     <li><a href="#">导航2</a></li>
    37.                     <li><a href="#">导航3</a></li>
    38.                     <li><a href="#">导航4</a></li>
    39.                     <li><a href="#">导航5</a></li>
    40.                     <li><a href="#">导航6</a></li>
    41.                     <li><a href="#">导航7</a></li>
    42.                     <li><a href="#">导航8</a></li>
    43.                     <li><a href="#">导航9</a></li>
    44.                     <li><a href="#">导航10</a></li>
    45.                     <li><a href="#">导航11</a></li>
    46.                     <li><a href="#">导航12</a></li>
    47.                     <li><a href="#">导航13</a></li>
    48.                 </ul>
    49.             </nav>
    50.         </div>
    52.         <!-- 2 主体 -->
    53.         <div class="content">
    55.             <!-- 左侧 -->
    56.             <div class="leftsider">
    57.                 <ul>
    58.                     <li><a href="#">侧边导航栏序列1</a></li>
    59.                     <li><a href="#">侧边导航栏序列2</a></li>
    60.                     <li><a href="#">侧边导航栏序列3</a></li>
    61.                     <li><a href="#">侧边导航栏序列4</a></li>
    62.                     <li><a href="#">侧边导航栏序列5</a></li>
    63.                     <li><a href="#">侧边导航栏序列6</a></li>
    64.                     <li><a href="#">侧边导航栏序列7</a></li>
    65.                     <li><a href="#">侧边导航栏序列8</a></li>
    66.                     <li><a href="#">侧边导航栏序列9</a></li>
    67.                     <li><a href="#">侧边导航栏序列10</a></li>
    68.                     <li><a href="#">侧边导航栏序列11</a></li>
    69.                     <li><a href="#">侧边导航栏序列12</a></li>
    70.                     <li><a href="#">侧边导航栏序列13</a></li>
    71.                     <li><a href="#">侧边导航栏序列14</a></li>
    72.                     <li><a href="#">侧边导航栏序列15</a></li>
    73.                     <li><a href="#">侧边导航栏序列16</a></li>
    74.                     <li><a href="#">侧边导航栏序列17</a></li>
    75.                 </ul>
    76.             </div>
    77.             <!-- 主题 -->
    78.             <div class="main">
    79.                 <div class="title">
    80.                     <h1>这是内标题</h1>
    81.                 </div>
    82.                 <section>
    83.                     <h2> 这是标题 2 </h2>
    84.                     <p>内容1</p>
    85.                     <p>内容2</p>
    86.                     <p>内容3</p>
    87.                     <p>内容4</p>
    88.                 </section>
    89.                 <section>
    90.                     <h2> 办理流程</h2>
    91.                     <p>0001</p>
    92.                     <p>0002</p>
    93.                     <p>0003</p>
    94.                     <p>0004</p>
    95.                 </section>
    97.                 <section>
    98.                     <h2> H2 </h2>
    99.                     <ol>
    100.                         <li>这是内容00000001</li>
    101.                         <li>这是内容00000002</li>
    102.                         <li>这是内容00000003</li>
    103.                         <li>这是内容00000004</li>
    104.                         <li>这是内容00000005</li>
    105.                     </ol>
    106.                 </section>
    107.                 <section>
    108.                     <h2> H@@@@@2222 </h2>
    109.                     <ol>
    110.                         <li>这是内容00000001</li>
    111.                         <li>这是内容00000002</li>
    112.                         <li>这是内容00000003</li>
    113.                         <li>这是内容00000004</li>
    114.                         <li>这是内容00000005</li>
    115.                     </ol>
    116.                 </section>
    117.             </div>
    118.         </div>
    120.         <!-- 3, 尾部 footer  -->
    121.         <div class="footer">
    122.             <ul>
    123.                 <li><a href="#">页尾导航 0001</a></li>
    124.                 <li><a href="#">页尾导航 0002</a></li>
    125.                 <li><a href="#">页尾导航 0003</a></li>
    126.                 <li><a href="#">页尾导航 0004</a></li>
    127.                 <li><a href="#">页尾导航 0005</a></li>
    128.                 <li><a href="#">页尾导航 0006</a></li>
    129.                 <li><a href="#">页尾导航 0007</a></li>
    130.                 <li><a href="#">页尾导航 0008</a></li>
    131.             </ul>
    132.         </div>
    133.     </div>
    134. </body>
    136. </html>
    1. * {
    2.     padding: 0;
    3.     margin: 0;
    4. }
    6. li {
    7.     /* 取消点 */
    8.     list-style-type: none;
    9. }
    11. a {
    12.     /* 取消下划线 */
    13.     text-decoration: none;
    14.     color: #000;
    15. }
    17. body {
    18.     font-size: 12px;
    19.     background: #dbdfde no-repeat center top;
    20. }
    23. /* 总体 */
    25. .container {
    26.     /* 版图 */
    27.     width: 980px;
    28.     margin: 0 auto;
    29.     height: 2000px;
    30. }
    33. /* 页首样式 */
    35. .header {
    36.     /* 盒子往下  15  */
    37.     padding-bottom: 15px;
    38.     /* 下边边框 */
    39.     border-bottom: 1px solid rgb(204, 19, 19);
    40. }
    43. /* 主导航栏 */
    45. .mainnav {
    46.     background-color: rgb(226, 54, 54);
    47.     /* 盒子 左右缩小 设为 10  */
    48.     margin: 0 10px;
    49. }
    51. .mainnav ul {
    52.     font-size: 15px;
    53.     font-weight: bold;
    54.     /* ul 这个盒子，上下左右 占的宽度  */
    55.     padding: 9px 0 8px 0;
    56.     /* 整体往左移动 30 */
    57.     margin-left: 30px;
    58. }
    60. .mainnav ul li {
    61.     /* 排在一行 */
    62.     display: inline-block;
    63.     /* li中的单个盒子：  */
    64.     padding: 0 20px 0 18px;
    65.     /* 导航左边的线 */
    66.     border-right: 1px solid #88180f;
    67. }
    69. .mainnav ul li:last-child {
    70.     /* 去掉边框 */
    71.     /* 最后一个没有边框 , 使用伪类去写  :last-child */
    72.     border: none;
    73. }
    75. .mainnav ul li a {
    76.     color: #fff;
    77. }
    79. .mainnav ul li a:hover {
    80.     color: rgb(246, 250, 32);
    81. }
    84. /* 副导航 */
    86. .subnav ul {
    87.     /* 因为center居中了，样式不一样 */
    88.     text-align: center;
    89.     font-size: 12px;
    90.     padding: 10px 0;
    91. }
    93. .subnav ul li {
    94.     display: inline-block;
    95.     border-right: 1px solid #999;
    96.     padding-right: 10px;
    97.     margin-right: 17px;
    98. }
    100. .subnav ul li:last-child {
    101.     border: none;
    102. }
    104. .subnav ul li a {
    105.     color: #888;
    106. }
    108. .subnav ul li a:hover {
    109.     color: #000;
    110. }
    113. /* 主体部分 */
    115. .content {
    116.     /* 清除浮动 */
    117.     overflow: hidden;
    118. }
    120. .leftsider {
    121.     /* 浮动 */
    122.     float: left;
    123.     width: 210px;
    124.     /* 出来上边没有边框线 */
    125.     border: 1px solid #ccc;
    126.     border-top: none;
    127. }
    129. .leftsider ul {
    130.     background-color: rgb(138, 130, 130);
    131.     /* 边框中的左边橡塑 */
    132.     padding-left: 50px;
    133. }
    135. .leftsider ul li {
    136.     /* 字体的间距 上 左右 下 */
    137.     padding: 9px 0 7px;
    138. }
    140. .leftsider ul li a:hover {
    141.     color: rgb(226, 54, 54);
    142. }
    145. /*  内容区 */
    147. .main {
    148.     /* 浮动 */
    149.     float: right;
    150.     /* 内容往左 */
    151.     padding: 0 0 20px 20px;
    152.     /* margin-left: 2px; */
    153.     width: 730px;
    154.     border: 1px solid #ccc;
    155. }
    157. .main .title {
    158.     margin-left: -20px;
    159.     background-color: #ccc;
    160.     border-bottom: 2px solid rgb(209, 47, 47);
    161. }
    163. .main .title h1 {
    164.     font-size: 14px;
    165.     padding: 8px 0 7px 25px;
    166. }
    168. .main section h2 {
    169.     font-size: 12px;
    170.     margin: 25px 0 10px;
    171. }
    173. .main p {
    174.     line-height: 1.5em;
    175.     margin: 10px 0;
    176. }
    178. .main li {
    179.     list-style-type: decimal;
    180.     list-style-position: inside;
    181.     line-height: 2em;
    182. }
    185. /* 页尾部分 */
    187. .footer {
    188.     background-color: rgb(218, 36, 36);
    189.     margin-top: 15px;
    190. }
    192. .footer ul {
    193.     text-align: center;
    194.     padding: 10px 0;
    195. }
    197. .footer ul li {
    198.     /* 转为行级标签 排在一行 */
    199.     display: inline-block;
    200.     border-right: 1px solid #999;
    201.     padding-right: 10px;
    202.     /* 盒子往右 */
    203.     margin-right: 7px;
    204. }
    206. .footer ul li:last-child {
    207.     border: none;
    208. }
    210. .footer ul li a:hover {
    211.     color: rgb(246, 250, 32);
    212. }
    214. .footer ul li a {
    215.     color: #fff;
    216. }

    效果

    CSS - 图11