CSS3 学习

CSS3 是 CSS2. 1 的一个升级版 ， 它是对CSS的一个扩展

CSS3 的 新特性

  • 选择器
  • 阴影
  • 形状转化 ( 2d <-> 3D)
  • 变形
  • 动画
    • 过渡动画
    • 帧动画
  • 边框
  • 多重背景
  • 反射
  • 文字
  • 颜色 （不透明度 rgba / hsla / hsl ）
  • 滤镜 （ fillter ）
  • 弹性布局
  • 多列布局
  • 合模型
  • Web字体
  • 媒体查询

CSS3 与浏览器

CSS3不是属于浏览器或者同一浏览器的不同版本都支持，所以需要做兼容处理， 通常的做法就是加厂商前缀

面试点

主流的浏览器内核

  • Trident : IE 内核
  • Webkit : Chrome 和 Safari 内核
  • Gecko : FireFox 内核
  • Blink (是Webkit的一个分支) ： Chrome 和 Opera 内核
    Tips ： 目前国内的浏览器大多数都是双核的，（IE内核 和 Chrome 内核）

-webkit-background:

厂商前缀

  • IE : -ms-
  • Chrome & Safari : -webkit-
  • FireFox : -moz-
  • Opear : -o-

Blink 不需要做兼容处理，它是完全兼容CSS3 的

CSS3 选择器

丰富选择的目的：在标签中

1. 属性选择器

  • 直接以属性选择 [属性名]
  • 属性值等于什么选择内容 [ 属性名 = 属性值]
  • 属性值 ^= 以什么开头 [属性名 ^= 属性值]
  • 属性值 $ $= 以什么结尾 [属性名 $=属性值]
  • 属性值中 = 什么 ， 表示属性值中有什么 [ 属性名 = 属性值]
  1. <div class="container">
  2.     <p class="content p1 ">内容段落 01</p>
  3.     <p class="p2 content">内容段落 02</p>
  4.     <p class="content">内容段落 03</p>
  5.     <p class="content">内容段落 04</p>
  6.     <p class="content p5">内容段落 05</p>
  7. </div>
  1. /* 1 , 以属性直接选择  */
  3. p[class] {
  4.     /* 在p标签中，匹配所有的class属性 */
  5.     color: #f00;
  6. }
  7. /* 2. - 属性值等于什么选择内容 */
  9. p[class="content"] {
  10.     /* 在p标签中，匹配所有 class="content" 的标签 */
  11.     color: #0f0;
  12. }
  13. /* 3， - 属性值 ^= 以什么开头  */
  15. p[class^="content"] {
  16.     /* p标签中，匹配以content 开头的标签 */
  17.     color: #00f;
  18. }
  19. /* 4. 属性值  $= 以什么结尾  */
  21. p[class$="content"] {
  22.     /* 在p标签中，匹配以content结尾的标签 */
  23.     color: aqua;
  24. }
  25. /* 5. 属性值中 *= 什么  ， 表示属性值中有什么 */
  27. p[class*="p"] {
  28.     /* 在p标签中，class中具有 p 字符的标签 */
  29.     color: brown;
  30. }

2. 结构性伪类

伪类的特点 ： 具有: 号

1， :root 匹配html标签，和 body 选择器的效果一样

  1. :root {
  2.     background-color: #0f0;
  3. }
  5. body {
  6.     background-color: #0f0;
  7. }

2， 子元素选择 ， 匹配父元素中连续的子元素 ，如果没有连续， 使用nth-of-type

  • :first-child : 第一个子元素
  • :last-child : 最后一个子元素
  • :nth-last-child(n) : 倒数第n个子元素
  • nth-child(n) : 第n个子元素
  1. /* 2.  子元素选择  */
  2. /* 
  3. - :first-child :   第一个子元素 
  4. - :last-child  :   最后一个子元素 
  5. - :nth-last-child(n) :  倒数第n个子元素
  6. - nth-child(n) :  第n个子元素  
  7. */
  9. p:first-child {
  10.     /* 第一个子元素  */
  11.     color: chartreuse;
  12. }
  14. p:last-child {
  15.     /* 最后一个子元素 */
  16.     color: yellow;
  17. }
  19. p:nth-last-child(3) {
  20.     /* 倒数第n个子元素 */
  21.     color: blue;
  22. }
  24. p:nth-child(2n) {
  25.     /* 2n 表示2的倍数  */
  26.     /*  第n个子元素 */
  27.     color: aquamarine;
  28. }

3， nth-of-type类 : 用于匹配父元素中兄弟子元素， 可以用于元素非连续的情况 , 不连续的

  • nth-of-type(n) : 找的是标签中的第n个元素， 如果第n个不是该标签， 将跳过，继续向下找， 直到找到为止
  • nth-last-of-type(n) : 找的是标签中的倒数第n个元素， 如果倒数第n个不是该标签， 将跳过，继续向下找， 直到找到为止
  1.         /* 3， `nth-of-type `类 : 用于匹配父元素中兄弟子元素， 可以用于元素非连续的情况 
  2.             - nth-of-type(n)  : 
  3.             - nth-last-of-type(n)  :   */
  5.         p:nth-of-type(3) {
  6.             /* nth-of-type(n) : 找的是p标签中的第三个兄弟p标签，如果第3个不是p标签， 将跳过，继续向下找， 直到找到为止 */
  7.             color: #f0f;
  8.         }
  10.         p:nth-child(3) {
  11.             /*  找第三个子元素，如果是p标签， 就找到了，如果不是， 就没有找到 ，而且不再继续查找 */
  12.             color: #f00;
  13.         }
  15.         p:nth-last-of-type(4) {
  16.             /*找的是p标签中的倒数第4个兄弟p标签，如果倒数第4个不是p标签， 将跳过，继续向下找， 直到找到为止 */
  17.             color: #ff0;
  18.         }

4， 其他

  • :only-child ： 父元素中仅有一个子元素
  • :only-of-type : 父元素中仅有一个兄弟元素
  • :empty : 没有元素， 包含文本元素，即查找空元素
  1.         /* 4. 其他结构伪类 */
  3.         p:only-child {
  4.             /* 查找父级元素中只有 一个标签为p的标签 ，p标签必须是唯一个标签 ， 不允许有其他的标签存在，但可以p标签中有子标签  */
  5.             width: 200px;
  6.             border: 1px solid #ccc;
  7.             background-color: #00f;
  8.             color: #ff0;
  9.         }
  11.         p:only-of-type {
  12.             /* 查找父级元素中只有 p标签是一个唯一的元素 ， 可以有多个标签的存在  ，p标签中可以有子标签  */
  13.             width: 200px;
  14.             border: 1px solid #ccc;
  15.             background-color: #00f;
  16.             color: #ff0;
  17.         }
  19.         div:empty {
  20.             /* 查找 div 是空元素， 不能有元素， 和文本   */
  21.             width: 200px;
  22.             height: 200px;
  23.             background-color: #f00;
  24.         }

3. 目标伪类

:target ： 匹配相关URL指向的元素

  1.     <!-- # 页内跳转 -->
  2.     <a href="#jump1">跳转1</a>
  3.     <a href="#jump2">跳转2</a>
  4.     <a href="#jump3">跳转3</a>
  7.     <p id="jump1">这是段落1的内容</p>
  8.     <div id="jump2">这是段落2的内容</div>
  9.     <p id="jump3">这是段落3的内容</p>
  1. p,
  2. div {
  3.     height: 600px;
  4. }
  5. /* 目标伪类 */
  7. p:target {
  8.     /* 匹配相关URL指向的元素， 点击跳转后该元素的的样式， */
  9.     color: red;
  10. }
  12. div:target {
  13.     color: blue;
  14. }

4. UI元素状态伪类 ( 表单元素 )

用于表单元素 form 表单

  • enabled ： 表单中处于可用状态的元素
  • disabled : 选中表单中处于不可用状态的元素
  • checked : 表单中处于被选中的元素 ( 只在Opera 浏览器中有效)
  • ::selection : 元素中被用户选中或处于高亮的部分
  1.     <form action="#">
  2.         <!-- disable 无效 -->
  3.         <input type="text" name="test" id="test" disabled> <br>
  4.         <input type="email" name="email" id="email"> <br>
  5.         <input type="text" checked placeholder="被选中状态"> <br>
  6.     </form>
  7.     <div>test</div>
  8.     <select name="select" id="1">
  9.         <option >1</option>
  10.         <!--  -->
  11.         <option checked selected">2</option>
  12.         <option>UI </option>
  13.     </select>
  1.         input:enabled {
  2.             /* 表单中 可用状态的元素  */
  3.             background-color: #f00;
  4.         }
  6.         input:disabled {
  7.             /* 表单中 不可用状态的元素  */
  8.             background-color: #ff0;
  9.         }
  11.         input:checked {
  12.             /* 表单中 被选中的状态 */
  13.             /* checked 只在 Opera 中有效 */
  14.             background-color: #0ff;
  15.         }
  17.         select::selection {
  18.             /* 选中部分处于高亮状态 */
  19.             color: #0ff;
  20.         }
  22.          ::selection {
  23.             /* 被选中的文本 */
  24.             background-color: #0ff;
  25.         }

5. 否定伪类

not(p) : 匹配所有不是 p标签的元素

  1. .content not(div) {
  2.     /* 在 content 元素中, 匹配所有不是 div 的标签*/
  3.     color: blue;
  4. }

6. 通用兄弟元素选择器

~

div1~.div3 : 找div1的兄弟元素 div3

  1. div1~.div3 {
  2.     color: red;
  3. }

CSS3 文本

文本阴影

主流浏览器都支持文本阴影

text-shadow : 设置文本阴影

text-shadow: h-shadow v-shadow blur color

  • h-shadow: {number} : 必须 . 水平阴影的位置 , 允许负值.
  • x-shadow : {number} : 必须值 , 垂直阴影的位置 , 允许负值 .
  • blur {number} : 可选 . 模糊度
  • color : 可选 . 阴影的颜色
  1. body {
  2.    background-color: #000;
  3. }
  5. h1 {
  6.    /* text-shadow :  横向（水平）偏移度   纵向（垂直）偏移度  模糊度  颜色 */
  7.    text-shadow: 10px 5px 3px #ff0;
  8. }
  1. <h1>这是测试文本阴影</h1>

文本自动换行

word-wrap

  • normal : 只在允许的断字点换行 (浏览器保存默认处理)
  • break-word : 在长单词或 URL地址内部进行换行 , 一般用这个
  1. div {
  2.     width: 200px;
  3.     height: 200px;
  4.     border: 1px solid #000;
  5.     /* word-wrap: normal; */
  6.     /* 加上 -ms- 表示兼容 IE 浏览器  */
  7.     /* -ms-word-wrap: break-word; */
  9.     word-wrap: break-word;
  10. }

单词拆分

word-break : normal | break-all | keep-all

  • normal : 浏览器默认换行
  • break-all : 允许单词内换行
  • keep-all : 只能在 半角 空格 或 连 - 字符 英文 , 处换行 
  1. div {
  2.     width: 200px;
  3.     height: 200px;
  4.     border: 1px solid #000;
  5.     /* 允许单词内换行,一般用这个 */
  6.     word-break: break-all;
  7. }

文本拆分

所有主流浏览器都不支持

text-wrap : normal | none | unrestricted | suppress

  1. p {
  2.     /* 用在单词的拆分，增加美观性*/
  3.     text-wrap: 5px;
  4. }

文本溢出( 重要)

  • 单行溢出
    text-overflow
    • clip : 多出的部分 修建掉
    • ellipsis : 用省略号表示多出的文本， 一般用这个
    • string : 给定字符串来代替多出的文本

处理文字溢出样式 : 宽度 , 不允许折行 white-space:nowrap , 浏览器兼容 -em-text-overflow:ellipsis, 处理溢出的方法 text-overflow:ellipsis , 清除多出部分 overflow: hidden

  1. p {
  2.     width: 200px;
  3.     height: 120px;
  4.     border: 1px solid #000;
  5.     /*  white-space: nowrap  不允许折行 */
  6.     white-space: nowrap; 
  7.     /* 清除多余部分 */
  8.     overflow: hidden;
  9. }
  11. .p1 {
  12.     /* 文本溢出  */
  13.     /* 必须要有 overflow: hidden  和 不允许文本折行  white-space: nowrap */
  14.     /* IE9 一下还需要做兼容 */
  15.     white-space: nowrap;
  16.     overflow: hidden;
  17.     text-overflow: clip;
  18. }
  20. .p2 {
  21.     overflow: hidden;
  22.     /* 用省略号表示多出的文本 */
  23.     text-overflow: ellipsis;
  24. }
  26. .p3 {
  27.     overflow: hidden;
  28.     /* text-overflow: 。。。。; */
  29. }
  • 多行溢出 IE9以下的版本不支持，主要是谷歌支持
  1. .p4 {
  2.     /* 多行溢出 处理  */
  3.     width: 300px;
  4.     /*  white-space: normal 允许折行(默认)，  nowrap 不允许折行 */
  5.     white-space: normal;
  6.     display: -webkit-box;
  7.     -webkit-box-orient: vertical;
  8.     /* 允许存在3行 */
  9.     -webkit-line-clamp: 3;
  10.     overflow: hidden;
  11. }

CSS3 边框

CSS3 对边框做出了一些改进

圆角边框 (常用)

border-radius : 1-4 length (1-4个长度值) | %

四个方位的值 :

  • top-left : 左上角
  • top-right : 右上角
  • bottom-left : 左下角
  • bottom-right : 右下角

border-radius: 左上 右上 右下 左下

  1. div {
  2.     width: 200px;
  3.     height: 200px;
  4.     border: 1px solid #999;
  5.     margin: 100px auto;
  6.     /* 浏览器的兼容 */
  7.     /* -webkit-border-radius: 10px;
  8.     -moz-border-radius: 10px;
  9.     border-radius: 10px; */
  10.     /* 另一种写法  */
  11.     /* border-radius: 30%; */
  12.     /* 只让单个角变圆   左上角  */
  13.     border-top-left-radius: 100%;
  14.     border-top-right-radius: 20px;
  15.     /*  让两个角 或 三个角圆 
  16.     border-radius :   左上  右上  右下  左下 */
  17.     border-radius: 0 10px 30px 40px;
  18. }
  20. img {
  21.     /* 图片圆角 */
  22.     width: 200px;
  23.     height: 200px;
  24.     border: 1px solid #999;
  25.     margin: 100px auto;
  26.     display: block;
  27.     border-radius: 50%;
  28. }
  30. img:hover {
  31.     width: 200px;
  32.     height: 200px;
  33.     border: 1px solid #999;
  34.     margin: 100px auto;
  35.     display: block;
  36.     border-radius: 10%;
  37.     /* 取消圆角 */
  38.     /* border-radius: 0; */
  39. }

边框阴影

IE9以上支持 常用

box-shadow: 水平偏移 垂直偏移 [模糊度] [阴影的尺寸] [颜色] [inset] ;

写法基本个 文字阴影一样text-shadow

  1. div {
  2.     width: 200px;
  3.     height: 200px;
  4.     background-color: #f0f;
  5.     /* 边框阴影 */
  6.     box-shadow: 3px 2px 3px 2px yellow;
  7.     /* 不同浏览器需要做 兼容  -moz-    -webkit-  */
  8.     box-shadow: inset 3px 2px 4px 5px red;
  9.     /* 默认阴影在 右下角，  加了 inset 阴影在左上角 */
  10. }

边框图片

IE11.0 以后的版本支持

border-image: 图片 向内偏移距离 宽度 图片区域超出边缘的距离 重复效果 ;

重复效果 : round / strech / repeat

  1. div,
  2. img {
  3.     width: 200px;
  4.     height: 160px;
  5.     /* transparent  边框透明 */
  6.     border: 1px solid #ccc;
  7.     border-image: url(img5.png) 40 20 20 round;
  8.     /* 不同的浏览器需要做兼容 */
  9. }
  11. img {
  12.     width: 600px;
  13.     height: 500px;
  14.     border-image: url(img5.png) 40 round;
  15. }

CSS3 背景

  • background-image 背景图片
  • background-size 设定背景图像的尺寸
  • background-origin 设置背景图片的位置区域
  • background-clip : 设置背景图片的绘制区域
  • background-image: linear-gradient 背景渐变

多重背景

background-img : url(img)

  1. div {
  2.     width: 600px;
  3.     height: 500px;
  4.     margin: 100px auto;
  5.     /* 多重背景，
  6.     1. 需要设置多张背景图片
  7.     2. 需要设置平铺方式 
  8.     3. 需要设置排序位置 */
  9.     background-image: url(./img5.png), url(./001.jpg), url(./002.jpg);
  10.     background-repeat: no-repeat;
  11.     background-position: 50% 100% 0 0, 0 0;
  12. }

背景属性

使用前，必须要设置背景图，和图片的平铺方式 no-reprter

background-size 设定背景图片的尺寸

  • 固定长度 px
  • 百分比值 %
  • cover : 满足背景图区域的最高宽度 ，高度就平铺
  • contain : 满足背景图区域的最高的高度，宽度平铺

background-size: 50% 30% ：设置背景图片的大小

background-size: 50px 30px

  1. p {
  2.     width: 500px;
  3.     height: 400px;
  4.     background-image: url(./003.jpg);
  5.     background-repeat: no-repeat;
  6.     margin: 100px auto;
  7.     /* `background-size` 设定背景图片的尺寸 
  8.     - 固定长度  px
  9.     - 百分比值  %
  10.     - cover :    满足背景图区域的最高宽度 ，高度就平铺
  11.     - contain :    满足背景图区域的最高的高度，宽度平铺
  12.     ` background-size: 50% 30%` ：设置背景图片的大小 
  14.     不同浏览器需要做兼容  -moz-  -webkit- 
  15.     */
  16.     /* 一般使用  contain 和  cover  这两个  */
  17.     background-size: contain;
  18.     /* background-size: cover; */
  19. }

background-origin 设置背景图像的位置区域

  • padding-box : 背景图像相对于内边距框来定位
  • border-box : 背景图像相对于边框盒来定位
  • content-box : 背景图像相对于内容框来定位
  1. p {
  2.     width: 500px;
  3.     height: 400px;
  4.     background-image: url(./003.jpg);
  5.     background-repeat: no-repeat;
  6.     margin: 100px auto;
  7.     border: 3px solid rgba(204, 204, 204, 0.401);
  8.     /* cover 方式设置尺寸 */
  9.     background-size: cover;
  10.     /* background-origin:设置背景图像的位置区域， 也就是说，背景图是以padding或者border 还是content的位置显示区域
  11.     padding-box ：  以内边距设置
  12.     border-box  ： 以边框设置 
  13.     content-box ： 以内容设置 
  14.             */
  15.     background-origin: padding-box;
  16.     background-origin: border-box;
  17.     background-origin: content-box;
  18. }

background-clip 属性规定背景的绘制区域

  • border-box : 被裁剪到边框
  • padding-box : 背景被裁剪到内容框
  • content-box : 背景被裁剪到内容框
  1. p {
  2.     width: 500px;
  3.     height: 400px;
  4.     background-image: url(./003.jpg);
  5.     background-repeat: no-repeat;
  6.     margin: 100px auto;
  7.     border: 3px solid rgba(204, 204, 204, 0.401);
  8.     /* cover 方式设置尺寸 */
  9.     background-size: cover;
  10.     /* `background-clip`  属性规定背景的绘制区域 
  11.     - border-box :  被裁剪到边框 
  12.     - padding-box :  背景被裁剪到内容框 
  13.     - content-box :  背景被裁剪到内容框 
  14.     */
  15.     background-clip: padding-box;
  16.     background-clip: content-box;
  17.     background-clip: border-box;
  18. }

CSS3 颜色

background-color: hsla()

一般用下边元素来设置 遮挡的 蒙版 层

rgba(r , g , b, a )

  • a : 不透明度 ， 取值范围 （0 - 1 之间的一个小数）

HSL

hsl (h,s,l ) : 取值范围 （ 0-360）

  • h : 色调
  • s : 饱和度
  • l ： 亮度

HSLA

hsl (h,s,l ) : 取值范围 （ 0-360）

  • h : 色调
  • s : 饱和度
  • l ： 亮度
  • a : 不透明度 ， 取值范围 （0 - 1 之间的一个小数）
  1. .container {
  2.     position: relative;
  3.     width: 800px;
  4.     height: 600px;
  5.     background-color: #00f;
  6. }
  8. .div1,
  9. .div2 {
  10.     width: 100%;
  11.     height: 100%;
  12.     position: absolute;
  13.     /* 复习： 当元素使用了定位 absolute 后，margin 和 padding 不再起作用  */
  14.     top: 0;
  15.     left: 0;
  16. }
  18. .div1 {
  19.     background-image: url(./003.jpg);
  20.     background-size: cover;
  21. }
  23. .div2 {
  24.     /* background-color: hsla(120, 50%, 50%, .6); */
  25.     /* 设置 rgba  元素  */
  26.     background-color: rgba(0, 333, 25, .5);
  27.     /* 设置蒙版  */
  28.     /* color: hsla(120, 50%, 50%, .6); */
  29. }
  31. .div2:hover {
  32.     background-color: hsla(120, 50%, 50%, .6);
  33. }

CSS3 中的 Opacity 不透明度

Opacity : 调整元素的不透明度 ，

opacity: 0-1 ： 透明度

filter:alpha(opacity=50) : IE8以及IE8一下的版本不识别上一行代码， 但是可以识别这一行 ， 所以需要设置透明度时候， 把这两行代码都写上

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4. }
  6. li {
  7.     list-style-type: none;
  8. }
  10. ul {
  11.     width: 600px;
  12.     height: 30px;
  13.     /* 居中 */
  14.     margin: 100px auto 0;
  15.     /* 字体居中 */
  16.     text-align: center;
  17. }
  19. ul li {
  20.     background-color: #00f;
  21.     width: 100px;
  22.     color: yellow;
  23.     display: inline-block;
  24.     margin-left: -4px;
  25. }
  27. ul li:hover {
  28.     /* 设置不透明度 */
  29.     background-color: #0f0;
  30.     opacity: .5;
  31.     filter: alpha(opacity=50);
  32. }

CSS3 渐变

渐变 ： 从一种颜色变到另一种颜色的过度

线性渐变

background: linear-gradient(方向或角度，颜色1， 颜色2)

方向 ：

  • to top : 顶部
  • to top left : 上左
  • to top right : 上右
  • to bottom : 底端
  • to bottom left : 下左
  • to bottom right 下右

角度:

  • 45度角 ，应该成 45deg;

颜色取值 ： 颜色单词 / 16进制颜色/ 表示颜色的函数 rgb/rgba/hsl/hsla

  1. div {
  2.     width: 200px;
  3.     height: 200px;
  4.     /* 设置渐变 */
  5.     background: linear-gradient(to top, red, blue);
  6.     /* 颜色写法  */
  7.     background: linear-gradient(to bottom left, rgb(12, 211, 158), #444000, rgba(156, 213, 44, 0.701));
  8.     /* 角度写法 30度 30deg  */
  9.     /* background: linear-gradient(30deg, #ff5da2, #ee904f, rgb(155, 155, 23)) */
  10.     /* 颜色加上百分比 */
  11.     background: linear-gradient(30deg, red 50%, blue 70%);
  12. }

径向渐变

沿半径方向渐变

background: radial-gradient(形状 渐变大小 at 位置, 颜色1, ..., 颜色n )

形状 ：

  • ellipse : 椭圆径向渐变（默认）
  • circle : 圆径向渐变

渐变大小 ：

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

位置 ：

  • center : 设置圆心在中心的位置
  • top ： 设置圆心在顶部位置
  • bottom ： 设置圆心在底端位置
  1. .box {
  2.     width: 500px;
  3.     height: 300px;
  4.     /* 经向渐变默认值在中线， background: radial-gradient() 
  5.     沿着半径方向渐变 */
  6.     background: radial-gradient(red, green, blue);
  7.     /*  circle : 圆径向渐变  */
  8.     background: radial-gradient( circle, red, green, blue);
  9.     /*  closest-corner ：**从圆心到离圆心最远的边** */
  10.     background: radial-gradient( circle closest-corner at 25% 75%, red, green, blue);
  11.     /*    farthest-corner  **从圆心到离圆心最远的角** */
  12.     background: radial-gradient( circle farthest-corner at 25% 75%, red, green, blue);
  13. }

文字渐变

background-image: linear-gradient() / radial-gradient()

需要的核心： 以下三样

  • background-image: 线性渐变 / 径向渐变
  • -webkit-background-clip: text; ： 超出修剪
  • -webkit-text-fill-color: transparent; ： 透明背景
  1. p {
  2.     /* 背景色， 也可以设为渐变 ，这就是文字渐变 , 需要做 浏览器的兼容  */
  3.     background-image: linear-gradient(#50baff, #ff4bcc, #abe424);
  4.     background-image: -webkit-linear-gradient(35deg, #50baff, #ff4bcc, #abe424);
  5.     /* 这里需要浏览器的兼容  */
  6.     -webkit-background-clip: text;
  7.     -webkit-text-fill-color: transparent;
  8.     text-shadow: 3px 1px 1px #005050;
  9. }

CSS3 盒模型

box-sizing

允许你以某种方式定义某些元素 ， 以适应指定的区域

box-sizing (火狐和谷歌低版本需要浏览器兼容)

  • content-box : (默认的)盒子实际的宽度为242px (包含文本宽度200px + 边框2px + 内边距20px )
  • border-box : 盒子实际的宽度为200px不变 (包含文本宽度 158px + 边框2px + 内边距40px)
  1. .container {
  2.     width: 400px;
  3.     height: 300px;
  4.     border: 1px solid #000;
  5. }
  7. .box {
  8.     /* width: 200px;
  9.     height: 200px;
  10.     float: left;
  11.     border: 1px solid #f00; */
  12.     /* 当给浮动时, 需要加上边框的像素,超过container的宽度时,盒子就会掉下来 */
  13.     /* 解决方法  加上 box-sizing 盒子定义区域,适应元素*/
  14.     width: 200px;
  15.     height: 200px;
  16.     float: left;
  17.     border: 1px solid #f00;
  18.     padding: 20px;
  19.     /* border-sizing : 盒子实际的宽度为200px不变  (包含文本宽度 158px + 边框2px + 内边距40px) */
  20.     box-sizing: border-box;
  21.     /* box-sizing: content-box (默认的): 盒子实际的宽度为242px (包含文本宽度200px + 边框2px  + 内边距20px ) */
  22.     box-sizing: content-box;
  23. }

CSS3实例一

  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>CSS3 day 7 作业</title>
  9.     <link rel="stylesheet" href="./CSS/day7作业.css">
  11. </head>
  13. <body>
  15.     <div class="container">
  16.         <!-- 页首 -->
  17.         <header>
  19.             <!-- logo -->
  20.             <img src="./课后实训素材/img/logo.png" alt="logo" width="105" height="46">
  22.             <!-- 导航 -->
  23.             <nav>
  24.                 <ul class="nav">
  25.                     <li><a href="#">Home</a></li>
  26.                     <li><a href="#">About</a></li>
  27.                     <li><a href="#">Features</a></li>
  28.                     <li><a href="#">Portfolio</a></li>
  29.                     <li><a href="#">Pricing</a></li>
  30.                     <li><a href="#">Blog</a></li>
  31.                     <li><a href="#">Contact</a></li>
  32.                 </ul>
  33.             </nav>
  34.         </header>
  36.         <!-- 主题内容 -->
  37.         <div class="content">
  39.             <!-- banner 部分 -->
  40.             <div class="banner">
  41.                 <h2>HTML5</h2>
  42.                 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  43.                 </p>
  44.                 <a href="#">READ MORE</a>
  45.             </div>
  47.             <!--  左侧内容-->
  48.             <div class="left-content">
  49.                 <h3>
  50.                     Latest Works
  51.                 </h3>
  52.                 <!-- 左侧分类 -->
  53.                 <div class="classic1">
  54.                     <img src="./课后实训素材/img/car.jpg" alt="car">
  55.                     <h4>Mobile App
  56.                     </h4>
  57.                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
  58.                     </p>
  59.                 </div>
  60.                 <div class="classic1 cl2">
  61.                     <img src="./课后实训素材/img/web_app1.jpg" alt="web">
  62.                     <h4>Mobile App
  63.                     </h4>
  64.                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
  65.                     </p>
  66.                 </div>
  67.                 <div class="classic1">
  68.                     <img src="./课后实训素材/img/mobile_app1.jpg" alt="mobile">
  69.                     <h4>Mobile App
  70.                     </h4>
  71.                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
  72.                     </p>
  73.                 </div>
  74.             </div>
  76.             <!-- 右侧内容 -->
  77.             <div class="right-content">
  78.                 <h3>Why graVis?</h3>
  79.                 <ul>
  80.                     <li><a href="#">Fully responsive so your content will always look good on any screen size
  81.                     </a></li>
  82.                     <li><a href="#">Awesome sliders give you the opportunity to showcase important content
  83.                     </a></li>
  84.                     <li><a href="#">Tested on iPhone and iPad with Retina Display
  85.                     </a></li>
  86.                     <li><a href="#">Multiple layout options for home pages, portfolio section & blog section
  87.                     </a></li>
  88.                     <li><a href="#">We offer very good support because we care about your site as much as you do 
  89.                     </a></li>
  90.                     <li><a href="#">Over 400 Icons
  91.                     </a></li>
  92.                 </ul>
  93.             </div>
  94.         </div>
  95.     </div>
  96. </body>
  98. </html>
  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4. }
  7. /* 引入外部字体 */
  9. @font-face {
  10.     font-family: DroidSans;
  11.     /* format() 设置字体类型 */
  12.     src: url("../课后实训素材/font/DroidSans-Bold.ttf") format("truetype");
  13. }
  15. @font-face {
  16.     font-family: Economica;
  17.     /* format() 设置字体类型 */
  18.     src: url("../课后实训素材/font/Economica-Bold-OTF.otf") format("OpenType");
  19. }
  21. @font-face {
  22.     font-family: Economica-BoldItalic;
  23.     /* format() 设置字体类型 */
  24.     src: url("../课后实训素材/font/Economica-BoldItalic-OTF.otf") format("OpenType");
  25. }
  27. @font-face {
  28.     font-family: BEBAS;
  29.     /* format() 设置字体类型 */
  30.     src: url("../课后实训素材/font/BEBAS___.ttf") format("truetype");
  31. }
  33. a {
  34.     text-decoration: none;
  35.     color: #000;
  36. }
  39. /*  body */
  41. body {
  42.     background: url("../课后实训素材/img/tbg.png") repeat;
  43.     font: 14px DroidSans;
  44. }
  47. /* container */
  49. .container {
  50.     width: 950px;
  51.     /* 居中 */
  52.     margin: 0 auto;
  53. }
  56. /* logo */
  58. header img {
  59.     margin: 10px 0 20px 20px;
  60. }
  63. /* nav */
  65. nav {
  66.     background-color: #fff;
  67.     /* 边框圆角 */
  68.     border-radius: 15px;
  69.     /* 边框阴影  横向 纵向 阴影度  颜色*/
  70.     box-shadow: 5px 5px 2px #666;
  71. }
  73. nav ul {
  74.     /* 设置导航栏的文本内容宽度 */
  75.     padding: 20px 0 20px 10px;
  76. }
  78. nav ul li {
  79.     display: inline-block;
  80.     padding: 0 15px;
  81. }
  83. nav ul li a {
  84.     color: rgb(78, 73, 73);
  85. }
  87. nav ul li a:hover {
  88.     /* 下划线 */
  89.     text-decoration: underline;
  90.     color: #000;
  91. }
  94. /* content 部分 */
  96. .content {
  97.     /* 内容圆角 */
  98.     border-radius: 15px;
  99.     box-shadow: 5px 5px 2px #666;
  100.     background-color: #fff;
  101.     padding: 20px;
  102.     margin: 20px 0;
  103.     /* 清除下边浮动 */
  104.     overflow: hidden;
  105. }
  108. /* .banner 部分 */
  110. .banner {
  111.     height: 350px;
  112.     border-left: 1px solid #ddd;
  113.     border-right: 1px solid #ddd;
  114.     border-bottom: 2px solid #ddd;
  115.     border-radius: 5px;
  116.     /* 内容区的宽高 */
  117.     padding: 100px 0 0 80px;
  118.     /* 添加背景图 : url背景图片，  no-repeat不允许平铺  350px背景图从左到右的距离， top向顶端靠齐*/
  119.     background: url("../课后实训素材/img/html5.png") no-repeat 350px top;
  120. }
  123. /* h2  */
  125. .banner h2 {
  126.     font-family: Economica-BoldItalic;
  127.     font-size: 66px;
  128.     /* 向下靠40px */
  129.     margin-bottom: 40px;
  130. }
  132. .banner p {
  133.     font: 24px Economica-BoldItalic;
  134.     /* 设置p的宽度 */
  135.     width: 450px;
  136.     /* 设置不透明度 */
  137.     opacity: .8;
  138.     /* 设置向下的距离 */
  139.     margin-bottom: 60px;
  140. }
  142. .banner a {
  143.     font: 14px BEBAS;
  144.     border: 8px solid #000;
  145.     color: #000;
  146.     /* 圆角 */
  147.     border-radius: 30px;
  148.     /* 设置边距 */
  149.     padding: 10px 20px;
  150.     /* 字间距 */
  151.     word-spacing: 5px;
  152. }
  154. .banner a:hover {
  155.     color: #666666;
  156. }
  159. /* 左侧分类内容 */
  161. .left-content {
  162.     width: 670px;
  163.     float: left;
  164.     /* 不清除浮动 */
  165.     clear: none;
  166. }
  168. .left-content .classic1 {
  169.     /* 210宽度让内容显示在一行 */
  170.     width: 210px;
  171.     /* 文字居中 */
  172.     text-align: center;
  173.     float: left;
  174.     /* 不清除浮动 */
  175.     clear: none;
  176. }
  178. .left-content .cl2 {
  179.     /* 图片内容之间的距离 */
  180.     margin: 0 20px;
  181. }
  183. .left-content h3 {
  184.     /* 去掉宽度 */
  185.     font-weight: normal;
  186.     /* 设置h3的间距 */
  187.     padding: 20px 0 10px 20px;
  188. }
  190. .left-content .classic1 h4 {
  191.     font-weight: normal;
  192.     font-size: 15px;
  193.     /* 设置不透明度 */
  194.     opacity: .7;
  195.     /* h4拉开距离 */
  196.     margin: 10px 0;
  197. }
  199. .left-content .classic1:hover h4 {
  200.     opacity: 1;
  201.     filter: alpha(opacity(100));
  202. }
  204. .left-content .classic1 img {
  205.     width: 100%;
  206.     opacity: .5;
  207. }
  209. .left-content .classic1:hover img {
  210.     opacity: 1;
  211.     filter: alpha(opacity(100));
  212. }
  214. .left-content .classic1 p {
  215.     font-size: 13px;
  216.     opacity: .5;
  217.     line-height: 1.5em;
  218. }
  220. .left-content .classic1:hover p {
  221.     opacity: 1;
  222.     filter: alpha(opacity(100));
  223. }
  226. /* 右侧内容 */
  228. .right-content {
  229.     border: 1px solid #ccc;
  230.     float: right;
  231.     width: 200px;
  232.     background-color: #fff;
  233.     /* 渐变 需要做 浏览器的兼容 */
  234.     background: linear-gradient(top, #fff 0%, #f7f7f7 84%, #e8e8e8 100%);
  235.     background: -webkit-linear-gradient(top, #fff 0%, #f7f7f7 84%, #e8e8e8 100%);
  236.     /* 圆角效果 */
  237.     border-radius: 10px;
  238.     /* margin 给出距离 */
  239.     margin: 10px;
  240. }
  242. .right-content h3 {
  243.     font-family: DroidSans;
  244.     font-weight: normal;
  245.     color: #fff;
  246.     background-color: #333;
  247.     /* 设置H3的圆角  左上  右上 */
  248.     border-radius: 10px 10px 0 0;
  249. }
  251. .right-content ul {
  252.     /* 间距 */
  253.     margin: 10px;
  254. }
  256. .right-content ul li {
  257.     font: 12px DroidSans;
  258.     opacity: .7;
  259.     filter: alpha(opacity(70));
  260.     line-height: 1.5em;
  261.     margin: 5px 0 5px 10px;
  262. }
  264. .right-content ul li a {
  265.     opacity: .6;
  266.     filter: alpha(opacity(70));
  267. }
  269. .right-content ul li a:hover {
  270.     opacity: 1;
  271.     filter: alpha(opacity(100));
  272. }

效果

CSS3 - 图1

CSS3 盒子的变形

transform

需要按照浏览器进行兼容 transform

CSS3 新增的属性 ： 位移 ， 缩放， 旋转 ， 扭曲

translate 【盒子横向纵向偏移】

  • translate(x,y) ： 定义2D转换，沿着X轴和Y轴 移动元素
  • translateX(n) : 沿着X轴移动元素
  • translateY(n) : 沿着Y轴移动元素
  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4. }
  6. box {
  7.     width: 200px;
  8.     height: 200px;
  9.     /*  translate 需要进行 浏览器的兼容*/
  10.     transform: translate(200px, 100px);
  11.     -webkit-transform: translate(200px, 100px);
  12.     -moz-transform: translate(200px, 100px);
  13.     -o-transform: translate(200px, 100px);
  14.     -ms-transform: translate(200px, 100px);
  15.     /* 沿着 X轴进行偏移 */
  16.     -webkit-transform: translateX(100px);
  17.     /* 这里单写一个属性值，表示X轴 */
  18.     transform: translate(100px);
  19.     /* 沿着Y轴进行偏移 */
  20.     -webkit-transform: translateY(200px);
  21.     transform: translate(0, 200px);
  22. }

盒子缩放 scale

  • scale(x,y) : 缩放， X轴放大 多少倍数 ，Y轴方法多少倍数
  • scaleX(n) :X轴放大 多少倍数
  • scaleY: Y轴方法多少倍数

同样的， 不同浏览器需要进行兼容

  1. .box {
  2.     width: 200px;
  3.     height: 200px;
  4.     background-color: #f00;
  5.     /* scale 缩放 */
  6.     /* X轴方法2倍， Y轴放大 0.5倍 */
  7.     -webkit-transform: scale(2, .5);
  8.     transform: scale(2, .5);
  9.     /* X轴方法6倍 */
  10.     -webkit-transform: scaleX(6);
  11.     transform: scaleX(6);
  12.     transform: scale(6, 1);
  13.     /* Y轴方法6倍 */
  14.     -webkit-transform: scaleY(6);
  15.     transform: scaleY(6);
  16.     transform: scale(1, 6);
  17. }

旋转 rotate

rotate(度数) : 旋转多少度

  1. .box {
  2.     width: 200px;
  3.     height: 200px;
  4.     background-color: #f00;
  5.     margin: 200px auto;
  6.     /* rotate 旋转  参数值是 读书  30deg*/
  7.     -webkit-transform: rotate(30deg);
  8.     transform: rotate(30deg);
  9.     transform: rotate(-30deg);
  10. }

倾斜转换， 扭曲 skew

skew(X角度，Y角度) ： 沿着 X Y 轴进行扭曲

skewX(angle) : 沿着 X 轴进行扭曲

skewY(angle) : 沿着 Y轴 进行扭曲

  1. .box {
  2.     width: 200px;
  3.     height: 200px;
  4.     background-color: #f00;
  5.     margin: 200px auto;
  6.     /* skew 扭曲 */
  7.     /* X Y 轴进行扭曲  */
  8.     -webkit-transform: skew(30deg, 45deg);
  9.     transform: skew(30deg, 45deg);
  10.     /*  X 轴进行扭曲 */
  11.     -webkit-transform: skewX(30deg);
  12.     transform: skewX(30deg);
  13.     /* 指代一个参数表示沿着X轴扭曲 */
  14.     transform: skew(30deg);
  15.     /* Y 轴的扭曲 */
  16.     -webkit-transform: skewY(30deg);
  17.     transform: skewY(30deg);
  18.     transform: skew(0, 30deg);
  19. }

matrix 所有方法组合 （不建议使用）

matrix 方法将所有的 2D 转化方法组合在一起

matrix() 方法需要六个参数 ， 需要包含数学函数，旋转， 缩放， 移动 ，倾斜 等元素

matrix(a,b,c,d,e,f) : 定义2D变形 。 使用的是六个值得矩阵 。 表示如下 ：

(a c e

b d f

0 0 1 )

ab 列表示X轴 （缩放，如果没有缩放，值设为1 ）

cd列表示 Y 轴（扭曲，如果没有扭曲，值设为0）

ef 表示 Z 轴 （位移，如果没有位移，值设为0）

如果要旋转 , 会影响到 abcd的值： 需要三角函数

a | b | c | d = cos30deg / sin30deg ;

如果要扭曲 skew(deg 1, deg 2 ,) 它会影响 bc的值 ：

b = tan30deg 1 ;

c = tan30deg 2;

每次旋转和扭曲都会产生一个新的矩阵， 最终形成多个矩阵，要做乘法运算

如果对一个元素同时有旋转， 扭曲， 缩放，这里需要用到多个矩阵相乘，需要优先考虑旋转和缩放

最后矩阵相乘（线性代数）

  1. .box {
  2.     width: 200px;
  3.     height: 150px;
  4.     background-color: #f00;
  5.     margin: 200px auto;
  6.     /* 需求： 
  7.     x : 100px
  8.     y : -200px;
  9.     旋转 ： 30deg
  10.     x缩放： 1.5
  11.     y缩放：2
  12.     */
  13.     /* 方法1  分着使用方法 
  14.         translate() 位移
  15.         routate() 旋转
  16.         scale() 缩放 */
  17.     transform: translate(100px, 200px) rotate(30deg) scale(1.5, 2);
  18.     /* 方法二 matrix() 参数需要进行多次运算, 而且 matrix() 函数不带 px */
  19.     transform: matrix(1.299, 0.75, -1, 1.732, 100, 200);
  20. }

调整变形的基点

transform-origin

transform-origin : 是和transform一样，是一个属性，也具有属性值， 同级

设置视图基点的位置，之后盒子变形，的源点就是按照这个基点的位置开始

具有的属性值

  • x-axis ： 基点在X轴哪里，可能的值： left top , center , right , lenght , %
  • y-axis : 基点在Y轴哪里，可能的值： left top , center , right , lenght , %
  • z-axis : 基点在Z轴哪里，可能的值：lenght

设置视图位置基点

（默认在盒子的中心）

  1. .content {
  2.     width: 400px;
  3.     height: 400px;
  4.     border: 1px solid #000;
  5. }
  6. /*  transform-origin 使用 */
  8. .box {
  9.     width: 200px;
  10.     height: 200px;
  11.     background-color: #f00;
  12.     /* 设置旋转  */
  13.     /* transform: rotate(60deg); */
  14.     /* 设置旋转的源点 
  15.     left top 左上  */
  16.     /* transform-origin: left top; */
  17.     transform: translate(150px, 50px);
  18.     transform-origin: right top;
  19. }

CSS3 3D变形

记住： 使用时要加浏览器的兼容， 和 父子元素之间的定位 position

perspective 属性

perspective 属性定义 3D 元素距视图的距离 ， px 。

当为元素定义 perspective 属性时，其子元素会获得透视效果 ， 而不是元素本身。

perspective: number | none ;

  1. .father {
  2.     width: 500px;
  3.     height: 400px;
  4.     border: 1px solid #999;
  5.     padding: 10px;
  6.     margin: 200px auto;
  7.     position: relative;
  8.     /* perspective 需要浏览器的兼容 ，要加上厂商前缀*/
  9.     perspective: 150px;
  10.     -webkit-perspective: 100;
  11. }
  13. .son {
  14.     padding: 50px;
  15.     width: 50px;
  16.     height: 40px;
  17.     position: absolute;
  18.     border: 1px solid #f00;
  19.     background-color: #0ff;
  20.     transform: rotateX(45deg);
  21. }

transform-style 3D 效果

在3D空间中呈现被嵌套的元素 ， 必须与 transform属性一同使用

transform-style : flat | preserver-3d

  • flat : 子元素将不保留其3D位置 （默认值）
  • preserve-3d: 子元素将保留其3D 元素 ， 一般用这个
  1. .content {
  2.     width: 500px;
  3.     height: 400px;
  4.     border: 1px solid #ccc;
  5.     margin: 200px auto;
  6. }
  8. .div1,
  9. .div2 {
  10.     width: 200px;
  11.     height: 100px;
  12. }
  14. .div1 {
  15.     background-color: #0ff;
  16.     -webkit-transform: rotateY(60deg);
  17.     transform: rotateY(60deg);
  18.     /*  transform-style 必须要和 transform 属性一同使用 , 而且还需要浏览器的兼容 */
  19.     -webkit-transform-style: preserve-3d;
  20.     transform-style: preserve-3d;
  21.     /* transform-style: flat; */
  22. }
  24. .div2 {
  25.     background-color: #3412ff;
  26.     -webkit-transform: rotateY(80deg);
  27.     transform-style: preserve-3d;
  28. }

rotate-Z 3D 空间里的Z 轴

  1. .box {
  2.     width: 400px;
  3.     height: 500px;
  4.     margin: 200px auto;
  5.     border: 1px solid #000;
  6.     /* 沿着  Z 轴 旋转 */
  7.     transform: rotateZ(30deg);
  9.     /* 沿着 Y 轴旋转 */
  10.     transform: rotateY(30deg);
  12.     /* 沿着 X 轴 旋转*/
  13.     transform: rotateX(30deg);
  14. }

立方体

  1. /*  上下左右前后   都要进行 旋转 和 位移 */

CSS3 过度动画 【transition】

过度动画（重要）

用法 ：

复合用法 ： transition: property duration timing-function delay

常规用法 ：

transition-property 和 transistion-duration 必不可少

  • transition-property : 要带的属性
    • -name 属性名
    • -list 多个属性名
    • -all 所有属性
  • transistion-duration: 动画持续时间
    • 一般以秒 和 毫秒 为单位
  • transition-timing-function ： 动画的函数
    • linear ： 匀速
    • ease : 变速 慢 -> 快 -> 慢
    • ease-in : 变速 ， 慢 -> 快
    • ease-out : 变速 ， 快 -> 慢
    • ease-in-out ： 变速 慢 -> 慢
    • cubic-bezier (n,n,n,n) ： 自行设定变速， n的值在 0-1 之间
  • transition-delay : 动画延时时间
    • 一般以秒 和 毫秒 为单位
  1. .box {
  2.     width: 800px;
  3.     height: 800px;
  4.     position: relative;
  5.     border: 1px solid #000;
  6. }
  8. .demo {
  9.     width: 100px;
  10.     height: 100px;
  11.     background-color: #f00;
  12.     position: absolute;
  13.     left: 100px;
  14.     top: 100px;
  15.     /* 在 demo 上做动画  */
  16.     /* transition 过度动画  all 表示全部属性*/
  17.     /* 加上旋转  初始为 0*/
  18.     -webkit-transform: rotate(30deg);
  19.     transform: rotate(30deg);
  20.     /* 过度属性值  ease 慢快慢 , 0.5s 延迟 */
  21.     /* -webkit-transition: all 2s ease 2s;
  22.     transition: all 2s ease 2s; */
  23.     /* 当多个 属性值，自定义  带多个参数 */
  24.     -webkit-transition: left 2s ease 2s, width 3s ease-in-out;
  25.     transition: left 2s ease 2s, width 3s ease-in-out;
  26. }
  27. /* 动画 */
  29. .box:hover .demo {
  30.     /* 当鼠标移到 box时，demo 在运动  */
  31.     width: 300px;
  32.     left: 500px;
  33.     /* 接触后旋转  */
  34.     transition: left 2s ease 2s, width 3s ease-in-out;
  35.     -webkit-transform: rotate(0deg);
  36.     transform: rotate(0deg);
  37. }

animation 关键帧动画 (重要)

表示动画 ， 有一个点到另一个点的过程，其中，要设置动画弯曲等，需要关键帧，分为多个帧，然后在这个关键帧上做操作。

具体步骤 ：

  1. 设置关键帧，
    1. 只有两个关键帧 
      1. @keyframes 动画名 {
      2. 0%:{样式表}
      3. 100%:{样式表}
      4. }
      5. 或：
      6. @keyframes 动画名 {
      7. from:{样式表}
      8. to:{样式表}
      9. }
  1. 多个关键帧 
    1. @keyframes 动画名 {
    2. 0%:{样式表}
    3. 25%:{样式表}
    4. 60%:{样式表}
    5. ...
    6. 100%:{样式表}
    7. }
    8. /* 注意：这里的百分比一般是升序值，可以是0%-100%之间的做任意值，也可以是倒序。*/
  1. 实施动画 ```css a)常规用法 animation-name：来自于@keyframes定义的动画名

animation-duration：动画持续时间，一般以秒(s)或毫秒(ms)为单位（默认为0）

animation-timing-function：动画函数 i)linear:匀速（默认值） ii)ease:变速（先慢后快，最后再慢） iii)ease-in:变速（由慢到快） iv)ease-out:变速（由快到慢） v)ease-in-out:变速（慢速开始，慢速结束） vi)cubic-bezier(n,n,n,n):自行设定变速，n的值在0-1之间

animation-delay：动画延时时间，一般以秒(s)或毫秒(ms)为单位

animation-iteration-count：动画循环播放的次数 1)number：按设定次数循环播放（默认次数为1次） 2)infinite：一直循环播放

animation-direction：动画播放完后是否反向播放 1）normal:不反向（默认值） 2）alternate:反向

animation-play-state：动画播放或停止播放 1）paused:停止播放 2）running:播放（默认值）

b)简洁用法 (6个参数) animation:name duration timing-function delay iteration-count direction;

  3. 关键帧动画
  5. ```css
  6. .content {
  7.     width: 100px;
  8.     height: 800px;
  9.     position: relative;
  10. }
  12. .box {
  13.     width: 100px;
  14.     height: 100px;
  15.     border-radius: 50%;
  16.     background-color: #f00;
  17.     /* 定位 */
  18.     position: absolute;
  20.     /*    设置帧动画 */
  21.     animation: move 5s linear 1s 1 normal;
  22. }
  24. /*    设置关键帧 */
  25. /*     两个关键帧 */
  26. /*    @keyframes move {*/
  27. /*        !*0% {*!*/
  28. /*        !*    left: 0px;*!*/
  29. /*        !*}*!*/
  30. /*        !*100% {*!*/
  31. /*        !*    left: 500px;*!*/
  32. /*        !*}*!*/
  33. /*        from {*/
  34. /*            left: 0px;*/
  36. /*        }*/
  37. /*        to {*/
  38. /*            left: 400px;*/
  39. /*        }*/
  40. /*    }*/
  41. /*    多个关键帧*/
  42. @keyframes move {
  43.     0% {
  44.         left: 0px;
  45.         top:0px;
  46.         /*background-color: #cba6a6;*/
  47.     }
  48.     45% {
  49.         left: 120px;
  50.         top: 30px;
  51.         background-color: #3850C660;
  52.     }
  54.     75% {
  55.         right: 200px;
  56.         bottom: 30px;
  57.         background-color: #52c4aa;
  58.     }
  59.     100% {
  60.         background-color: #f0f;
  61.         bottom: 50px;
  62.     }
  63. }

CSS3 布局

  • 多列表布局 （分栏布局）
  • box 布局 （盒子布局）
  • flex 布局 （弹性盒子）
  • 响应式布局
  • Web字体

多列布局 （分栏）重点

不支持IE浏览器

  • column-count : 规定元素应该被分隔的列数 （栏数）
    • column-count : number | auto；
  • column-gap : 设置栏间距
    • cloumn-gap : length | auto;
  • column-rule-* : 设置分栏间的分隔线
    • column-rule-style : 设置分割线型
      属性值：
      • none : 没有分割线
      • hidden 隐藏线
      • dotted 点线
      • dashed 虚线
      • solid 实现
      • double 双线
      • …..
    • column-rule-width : 设置线宽
    • column-rule-color: 设置分隔线颜色

复合写法 ：
column-rule: width style color;

  • column-width : 设置栏宽
    • cloumn-width : length | auto ;

分类的简洁写法:

  • columns: width count;
  1. p {
  2.     /*  设置分栏个数  需要兼容写法  */
  3.     -webkit-column-count: 3;
  4.     -moz-column-count: 3;
  5.     column-count: 3;
  7.     /*    设置分栏的间隔线 */
  8.     -webkit-column-rule-style: dashed;
  9.     -moz-column-rule-style: dashed;
  10.     column-rule-style: dashed;
  12.     /*    设置 分栏线的宽度和颜色*/
  13.     -webkit-column-rule-width: 20px;
  14.     -moz-column-rule-width: 20px;
  15.     column-rule-width: 20px;
  17.     -webkit-column-rule-color: #52c4aa;
  18.     -moz-column-rule-color: #52c4aa;
  19.     column-rule-color: #52c4aa;
  21.     /*    复合写法 ： column-rule: width style color*/
  22.     column-rule: 30px dashed #000000;
  24.     /*    设置分栏的间距 */
  25.     -webkit-column-gap: 100px;
  26.     -moz-column-gap: 100px;
  27.     column-gap: 100px;
  29.     /*    设置栏宽 */
  30.     -webkit-column-width: 20px;
  31.     -moz-column-width: 20px;
  32.     column-width: 20px;
  36.     /*    columns:  栏宽  分栏的栏数*/
  37.     columns: auto 2;
  39. }

CSS3 flex 布局（弹性布局）重点

弹性布局： 当页面需要适应不同的屏幕大小以及设备类型时，确保元素拥有恰当的行为 的布局方式。

弹性布局的目的： 引入弹性布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间

需要兼容写法 display: -webkit-flex

弹性布局的定义方式

需要设置 display: flex ， 必须要设置它的在父级元素上，子元素才拥有弹性布局

  1. <ul class="flex">
  2.    <li>内容栏1</li>
  3.    <li>内容栏2</li>
  4.    <li>内容栏3</li>
  5.    <li>内容栏4</li>
  6.    <li>内容栏5</li>
  7. </ul>
  1. * {
  2.     margin: 0;
  3.     padding: 0;
  5. }
  6. .flex {
  7.     width: 100%;
  8.     height: 100px;
  9.     /* 弹性布局 需要做浏览器的兼容*/
  10.     display: -webkit-flex;
  11.     display: -ms-flexbox;
  12.     display: -moz-flex;
  13.     display: -o-flex;
  14.     display: flex;
  16. }
  18. ul li {
  19.     list-style-type: none;
  20.     /* 这里条宽度，弹性布局自适应*/
  21.     width: 30%;
  22.     /*height: 300px;*/
  23.     padding: 50px;
  24.     text-align: center;
  25.     /*height: 100px;*/
  26.     background-color: #00ffff;
  28. }

常用属性

flex-driection

flex-driection 用来指定子元素在父元素中的位置 应用于父元素

flex-driection: row | row-reverse | column | column-reverse

  • row : 左对齐 （默认）
  • row-reverse : 右对齐，反转
  • column : 纵向排列
  • column-reverse : 反转，纵向排列
  1. .flex {
  2.     width: 100%;
  3.     height: 100px;
  4.     /* 弹性布局 需要做浏览器的兼容*/
  5.     display: -webkit-flex;
  6.     display: -ms-flexbox;
  7.     display: -moz-flex;
  8.     display: -o-flex;
  9.     display: flex;
  12.     /* 左对齐 （默认 )*/
  13.     flex-direction: row;
  14.     /*  反向 左对齐 */
  15.    flex-direction: row-reverse;
  16.     /*    纵向排序 */
  17.     flex-direction: column;
  18.     /*    纵向反转 */ 
  19.     flex-direction: column-reverse;
  20. }

justify-content

justify-content : 把弹性项沿着盒子的主轴线对齐 ( 重要) 应用于父元素

一般用在li标签，存放多个内容时，设置父级元素和li标签的宽度，使用上space-around 和 space-between 等属性，让li标签内容自动排列

属性值：

  • flex-start : 紧凑方式左对齐
  • flex-end : 紧凑方式右对齐
  • center : 紧凑方式居中对齐
  • space-between : 除了第1 个和最后一个元素以外，其他的子元素等分空白区域 （重要）
  • space-around: 所有子元素等分空白区域 （重要）
  1.         * {
  2.             margin: 0;
  3.             padding: 0;
  4.         }
  5.         .demo {
  6.             width: 100%;
  7.             font-size: 20px;
  8.             /* 弹性布局 */
  9.             display: flex;
  10.         /*    justify-content: 主轴线对齐*/
  11.         /*    flex-start  紧凑方式左对齐 */
  12.         /*    justify-content: flex-start;*/
  13.         /*    flex-end : 紧凑方式右对齐 */
  14.         /*    justify-content: flex-end;*/
  15.         /*    center : 居中对齐*/
  16.         /*    justify-content: center;*/
  18.             /* space-between : 除了第1 个和最后一个元素以外，其他的子元素等分空白区域 （重要）*/
  19.             /*justify-content: space-between;*/
  21.         /*     所有子元素等分空白区域 （重要） */
  22.             justify-content: space-around;
  24.         }
  26.         ul li {
  27.             list-style-type: none;
  28.             text-align: center;
  29.         }

align-items

align-items : 子元素在侧轴（纵轴）方向上的对齐方式 ，应用于 父元素

写在父级元素上

参数：

  • flex-start : 沿着纵轴顶端对齐
  • flex-end : 沿着纵轴底端对齐
  • center : 纵轴居中对齐
  • baseline : 沿着纵轴基线对齐
  • stretch : 纵向拉伸对齐
  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4. }
  6. .box {
  7.     width: 100%;
  8.     height: 800px;
  9.     border: 1px solid #0000ff;
  10.     /*    定义弹性布局*/
  11.     display: flex;
  13.     /*    **align-items** :  子元素在侧轴（纵轴）方向上的对齐方式 ，此属性作用于父容器  */
  14.     /*    - flex-start :  沿着纵轴顶端对齐
  15.     - flex-end : 沿着纵轴底端对齐
  16.     - center : 纵轴居中对齐
  17.     - baseline :  沿着纵轴基线对齐
  18.     - stretch :  纵向拉伸对齐 , 子元素不用给高度*/
  19.     /*align-items: flex-start; !* 默认*!*/
  20.     /*  flex-end : 沿着纵轴底端对齐 */
  21.     /*align-items: flex-end;*/
  22.     /* 纵轴居中对齐 */
  23.     /*align-items: center;*/
  24.     /*  baseline :  沿着纵轴基线对齐， 基线就是文字顶端的线  */
  25.     /*align-items: baseline;*/
  26.     /* 纵向拉伸对齐 , 子元素不用给高度* */
  27.     align-items: stretch;
  28. }
  30. .box div {
  31.     width: 300px;
  32.     color: #ffffff;
  33.     text-align: center;
  35. }
  36. .box1 {
  37.     /*height: 200px;*/
  38.     background-color: #ff0000;
  39. }
  41. .box2 {
  42.     /*height: 500px;*/
  43.     background-color: #ff0;
  44. }
  46. .box3 {
  47.     /*height: 400px;*/
  48.     background-color: #0f0fff;
  49. }

flex-grow

flex-grow: 用来定义子元素放大的比例 ， 默认为 0 ， 如果存在剩余空间， 也不放大 ， 该属性用于子元素

语法： flex-grow : number

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4. }
  6. .box {
  7.     width: 100%;
  8.     height: 800px;
  9.     border: 1px solid #0000ff;
  10.     /*    定义弹性布局*/
  11.     display: flex;
  13. }
  15. .box div {
  16.     width: 300px;
  17.     color: #ffffff;
  18.     text-align: center;
  20. }
  21. .box1 {
  22.     height: 200px;
  23.     background-color: #ff0000;
  24.     /*  flex-grow : 用来定义子元素放大的比例 写数字，生成按照比例 */
  25.     flex-grow: 1;
  26. }
  28. .box2 {
  29.     height: 500px;
  30.     background-color: #ff0;
  31.     /*  flex-grow : 用来定义子元素放大的比例 写数字，生成按照比例 */
  32.     flex-grow: 3;
  34. }
  36. .box3 {
  37.     height: 400px;
  38.     background-color: #0f0fff;
  39.     /*  flex-grow : 用来定义子元素放大的比例 写数字，生成按照比例 */
  40.     flex-grow: 2;
  42. }

flex

flex 指定弹性子元素如何分配空间 应用于子元素

语法：

flex: auto| initial | none | inherit | [flex-grow] | [flex-shrink] | [flex-basis]

  • auto : 等价于 1 1 auto
  • initial :

flex可以带1-3个参数

  • 一个参数 ：
    • 无单位 ： 会被当作 flex-grow
    • 带单位： 会被当做 flex-basis(基本宽度)的值
    • auto（自动宽度）| initial （初始宽度）| none （无）

flex: auto; auto比例 ， 1 比例

  • 两个参数
    • 第一个参数必须是一个无单位的数值 ， 会被当做flex-grow（比例）
    • 第二个参数
      • 无单位： 数值会被当做 flex-shrink（收缩比例） 的值
      • 带单位： 数值会被当做 flex-basis (基本宽度) 的值

flex: 1 500px : 1 比例 ， 500px 的基本宽度（收缩时候保留500px的值）

  • 三个参数
    • 分别对应 [flex-grow] | [flex-shrink] | [flex-basis] 值
    • flex: 比例 收缩比例 基本宽度(第三个参数必须具有数值)
      flex: 2 2 300px;

CSS3 响应式布局

Responsive Design , 在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和 平板上有更好的浏览体验。

响应式布局： 就是一个网站能够兼容多个终端

响应式布局和 自适应布局的区别（面试问题）

  1. 响应式布局只需要开发一套代码，通过检测视口的分辨率， 针对不同客户端在客户端代码进行处理， 来展示不同的布局和内容
  2. 自适应需要开发多套界面，也是通过检测视口的分辨率，来判断当前访问的设备使PC、手机、平板等， 从而请求服务层，返回不同的页面内容
  3. 响应式布局等同于流动网格布局， 而自适应等同于使用固定分割点来进行布局
  4. 自适应布局给出了更多的设计空间 ， 只用考虑几种不同的状态就可以了 ； 而响应式布局要考虑上百种不同的状态 ， 虽然有些状态差异小，也要考虑到

响应式布局开发实现方法

  • 媒体查询
  • 百分比布局
  • rem布局 ( 相对于 HTML 中的字号布局)
  • 视口单位布局 （vm/vh）

响应式布局设计的步骤

  • 设置meta标签
  • 通过媒体查询来设置样式
  • 设置多种视图的宽度
    • 宽度百分比 rem / vm vh 等
    • 处理图片缩放
    • 其他属性处理，如 pre / iframe / video 等都要缩放大小 ， table ，建议不要使用 padding ，使用center 居中操作
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5. <!--    响应式布局 1. 设置 mate 标签-->
  6. <!--    设置视口
  7.         viewport: 视口
  8.         width=device-width ： 宽度
  9.         initial-scale=1.0 ： 初始时，不缩放
  10.         maximum-scale=1.0 ： 最大缩放
  11.         user-scalable=no ： 用户是否能改变视口大小
  12.         -->
  13.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
  14.     <title>CSS3响应式布局 </title>
  15.     <style>
  16.         .container {
  17.             width: 100%;
  18.             overflow: hidden;
  19.         }
  21.         .container div {
  22.             /* 让元素浮动起来*/
  23.             float: left;
  24.             height: 300px;
  25.         }
  27.         .box1 {
  28.             width: 20%;
  29.             background-color: #ff0000;
  30.         }
  31.         .box2 {
  32.             width: 50%;
  33.             background-color: #ffff00;
  34.         }
  35.         .box3 {
  36.             width: 30%;
  37.             background-color: #13c7b2;
  38.         }
  39.     </style>
  40. </head>
  41. <body>
  42. <div class="container">
  43.     <div class="box1"></div>
  44.     <div class="box2"></div>
  45.     <div class="box3"></div>
  46. </div>
  47. </body>
  48. </html>

媒体查询

媒体查询通过不同的媒体类型和条件定义样式表规则

设置meta
  1. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  2. <!--    设置视口
  3.         viewport: 视口 (移动端 )
  4.         width=device-width ： 宽度等于当前设备的宽度
  5.         initial-scale=1.0 ： 初始缩放比例值 （默认为1.0）
  6.         maximum-scale=1.0 ： 允许用户缩放到最大比例（默认为1.0）
  7.         user-scalable=no ： 用户是否能可以手动缩放视口大小 （默认为no）
  8. -->

设置IE渲染方式默认为最高版本
  1. <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">

说明： 以上代码表示如果浏览器有chrome插件，将以chrome提供的V8引擎渲染页面；如果没有，将以IE最高版本渲染页面

引入兼容的JS文件
  1. <!-- [if lt IE 9]>        条件Hack
  2. <script src="https://oss.maxcdn.cm/libs/html5shiv/3.7.0/html5shiv.js"></script>
  3. <script src="https://oss.maxcdn.cm/libs/respond.js/1.3.0/respond.min.js"></script>
  4. <![endif] -->

说明：
因为IE8及IE8以下版本既不支持html5，也不支持CSS3 Media，所以我们需要加载JS文件来处理这个兼容。
上面的代码是一个注释语句，也就是说，IE9及以上的版本不会编译这几行代码。

进入CSS3提供的媒体查询

根据屏宽使用不同的CSS文件

  1. 根据外部CSS文件使用
  1. <link rel="stylesheet" href="css/screen480.css" media="screen and (max-width:480px)" >
  2. 如果屏宽为480px及以下，将加载screen480.css文件。
  3. <link rel="stylesheet" href="css/screen800.css" media="screen and (min-width:480px) and (max-width:800px)" >
  4. 如果屏宽为480px以上且在800px以下，将加载screen800.css文件。
  5. <link rel="stylesheet" href="css/screengt800.css" media="screen and (min-width:800px)" > 如果屏宽为800px以上，将加载screengt800.css文件。

  1. 当屏幕显示到小于480px 宽度，.meun { display: none} 把 .meun 元素隐藏
    在style标签中用@media定义
    如： 

    1. @media  screen and (max-width: 480px){ 
    2. .menu{
    3. display: none;
    4. }

    例子

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. :root {
  6.     /* 上下为 0  左右为10*/
  7.     padding: 0 10px;
  8. }
  9. /* 网格布局*/
  10. section {
  11.     /* 清除浮动*/
  12.     overflow: hidden;
  13. }
  14. /* 给每个元素浮动*/
  15. section div  {
  16.     float: left;
  17. }
  18. .row1 div {
  19.     width: 48%;
  20.     height: 100px;
  21.     background-color: #ccc;
  22. }
  23. .row1 div:first-child {
  24.     /* 1, 盒子的margin-right为 4%*/
  25.     margin-right: 4%;
  26. }
  28. .row2 {
  29.     width: 100%;
  30.     height: 200px;
  31.     background-color: #e5b2b2;
  32.     margin-top: 10px;
  33. }
  35. .row3 div ,.row4 div{
  36.     /* 每一个盒子的宽度*/
  37.     width: 30%;
  38.     height: 150px;
  39.     background-color: #583131;
  40.     margin-left: 5%;
  41. }
  42. .row3 div:first-child {
  43.     margin-left: 0;
  44. }
  45. .row3 ,.row4 {
  46.     margin-top: 10px;
  47. }
  48. .row4 div {
  49.     width: 22%;
  50.     height: 150px;
  51.     background-color: #00ff00;
  52.     margin-left: 4%;
  53. }
  54. .row4 div:first-child {
  55.     margin-left: 0;
  56. }
  57. .row4 div:last-child {
  58.     margin-right: 0;
  59. }
  60. /*     以上布置网格*/
  62. /*     下面设置屏幕变小时, 网格的变形   */
  63. @media (max-width: 600px) {
  64.     .row1 div , .row3 div {
  65.         width: 100%;
  67.     }
  68.     .row1 div:first-child{
  69.         margin-bottom: 10px;
  70.     }
  71.     .row3 div {
  72.         margin-bottom: 10px;
  73.     }
  75.     .row3 div+div {
  76.         /* 5, 6, 往左的距离为 0 */
  77.         margin-left: 0;
  78.     }
  79.     .row4 {
  80.         margin-top: 0;
  81.     }
  82.     .row4 div {
  83.         /*     两个盒子显示在一行*/
  84.         width: 48%;
  85.         margin-bottom: 10px;
  86.     }
  87.     .row4 div:nth-child(3){
  88.         /* 设置第三个左偏移的距离为0 */
  89.         margin-left: 0;
  90.     }
  91. }
  1.     <section class="row1">
  2.         <div>1</div>
  3.         <div>2</div>
  4.     </section>
  5.     <section class="row2">
  6.         <div>3</div>
  7.     </section>
  8.     <section class="row3">
  9.         <div>4</div>
  10.         <div>5</div>
  11.         <div>6</div>
  12.     </section>
  13.     <section class="row4">
  14.         <div>7</div>
  15.         <div>8</div>
  16.         <div>9</div>
  17.         <div>10</div>
  18. </section>

CSS3 - 图2

CSS3 - 图3

Web 字体

开发者引入外部字体。

语法

  1. @font-face {
  2.     font-family: 字体名;
  3.     src: url("./字体文件路径") format("字体文件格式以处理浏览器兼容")
  4. }

可以同时引入多个字体文件， 字体一样，文件的扩展名不一样， 目的是为了处理浏览器的兼容

url(“”) ： 也可以是网上开源的字体

  1. @font-face {
  2.     font-family: bebas;
  3.     src: url(./课后实训素材/font/BEBAS___.ttf) format("truetype");
  4. }
  5. @font-face {
  6.     font-family: dro;
  7.     src: url(./课后实训素材/font/DroidSans.ttf) format("truetype");
  8. }
  10. p {
  11.     font-family: "dro";
  12. }

iconfont 图标字体

由阿里提供的 iconfont 字体 iconfont.cn

  • 进入官网登录
  • 新建项目，添加图标
  • 下载图标文件，解压后复制到项目中
  • 在代码中使用下载好的 iconfont.css 文件
  • 使用图标方法
    • 方法一 
      1. <!-- 使用方法1， class="iconfont 图标类名" -->
      2. <!-- 到 iconfont 官网去 复制 class的类名 -->
      3. <p><i class="iconfont icon-ai36"></i></p>
  • 方法二 
    1. <!-- 使用方法二 ， 使用 iconfont 的类名， 再使用 Unicode 表示符， 到 iconfont官网去复制 Unicode 表示符-->
    2. <p> <i class="iconfont icon-Homehomepagemenu ">&#xe699; </i> test </p>

CSS3实例二

CSS3 - 图4

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Day 9 作业 </title>
  7.     <link rel="stylesheet" href="./CSS/Day9作业.css">
  8. </head>
  10. <body>
  11.     <!--  网页整体的类 -->
  12.     <div class="container">
  14.         <!--  页首 -->
  15.         <header class="header">
  16.             <!--  logo -->
  17.             <h1>AMBITIOUS</h1>
  18.             <nav class="nav">
  19.                 <!-- <div class="logo"> -->
  20.                 <!-- </div> -->
  21.                 <!-- 导航栏 -->
  22.                 <ul>
  23.                     <li><a href="#" class="active">Home</a></li>
  24.                     <li><a href="#">Features</a></li>
  25.                     <li><a href="#">News</a></li>
  26.                     <li><a href="#">Portfolio</a></li>
  27.                     <li><a href="#">Contacts</a></li>
  28.                     <li><a href="#">Pages</a></li>
  29.                 </ul>
  30.             </nav>
  31.         </header>
  34.         <!-- 内容区 -->
  35.         <div class="content">
  36.             <!--  上方内容 -->
  37.             <div class="banner">
  38.                 <!-- 左侧内容，img图片 -->
  39.                 <img src="./day9课后实训素材/img/ambitios_pic1.png" alt="banner" class="leftimg">
  40.                 <!--  右侧内容，详情描述 -->
  41.                 <h2>Women Prefer</h2>
  42.                 <h2>Pastel Colored Flowers</h2>
  43.                 <p>Flowers were used to signal meanings in the time when social meetings between men and women was difficult. Lilies make people think of life. Red roses make people think of love, beauty, and passion.</p>
  44.                 <p>Everyone love flowers, but some just don't know that they do.</p>
  45.                 <a href="#"><img src="./day9课后实训素材/img/ambitios_footer_button.png" alt="footer" with="200" height="62" class="bottom"></a>
  47.             </div>
  49.             <!--  下方内容 -->
  50.             <div class="content-bottom">
  51.                 <div class="box1">
  52.                     <h2>Wide Range Of Header Sliders</h2>
  53.                     <div class="box">
  54.                         <p>We already have 3 absolutely different sliders, such as:
  55.                         </p>
  56.                         <ul>
  57.                             <li>Simple but stylish JCycle</li>
  58.                             <li>Famous 3d slider</li>
  59.                             <li>Carousel slider</li>
  60.                         </ul>
  61.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus condimentum, massa eu</p>
  62.                     </div>
  63.                 </div>
  64.                 <div class="box2">
  65.                     <h2>
  66.                         Variety Of Portfolio Layouts
  67.                     </h2>
  68.                     <div class="box">
  69.                         <p>Currently we have 3 portolfio layouts.</p>
  70.                         <p>Simple image gallery, that is perfect for photos.</p>
  71.                         <p>Big image preview with description, perfect for designers to show their works in all beauty</p>
  72.                         <p>Medium layout is good for mixed content, such as: video, images, and etc. in one gallery.</p>
  73.                     </div>
  74.                 </div>
  75.                 <div class="box3">
  76.                     <h2>Theme That Really Meets Your Requirements
  77.                     </h2>
  78.                     <div class="box">
  79.                         <p>Ambitious perfect for almost any kind of websites.</p>
  80.                         <p>Soft, clean, friendly design of this theme, won't leave your website visitors indifferent.</p>
  81.                         <p>This theme has no face, you can make it unrecognizable but still amazing, no one will blame you for template :P
  82.                         </p>
  83.                     </div>
  84.                 </div>
  85.                 <div class="box4">
  86.                     <h2>Lovely Theme Colors</h2>
  88.                     <div class="box">
  89.                         <p>This Theme comes with 11 different color variations and will have more in our upcoming updates.</p>
  90.                         <p>
  91.                             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus condimentum, massa eu accumsan pellentesque, felis metus imperdiet est.</p>
  92.                     </div>
  93.                 </div>
  94.             </div>
  95.         </div>
  97.         <!-- 页尾区  -->
  98.         <footer>
  99.             <!--  一张背景，一个文案  -->
  100.             <p>© 2013 Seeking knowledge school. All rights reserved.</p>
  101.         </footer>
  103.     </div>
  104. </body>
  106. </html>
  1. * {
  2.     padding: 0;
  3.     margin: 0;
  4. }
  7. /*  引入外部字体 */
  9. @font-face {
  10.     font-family: economica;
  11.     src: url(../day9课后实训素材/font/Economica-BoldItalic-OTF.otf) format("OpenType");
  12. }
  14. @font-face {
  15.     font-family: kaushan;
  16.     src: url(../day9课后实训素材/font/KaushanScript-Regular.otf) format("OpenType")
  17. }
  20. /* 网页整体 */
  22. body {
  23.     background-color: #fff;
  24.     font-size: 12px;
  25.     font-family: Arial;
  26.     background-image: url(../day9课后实训素材/img/ambitios_header_bg.gif), url(../day9课后实训素材/img/ambitios_first_row_bg.gif), url(../day9课后实训素材/img/ambitios_footer_bg.gif);
  27.     background-repeat: no-repeat, no-repeat, no-repeat;
  28.     /* 每一张图片的位置 */
  29.     background-position: content top, content 74%, content bottom;
  30. }
  32. .container {
  33.     /*  总体 */
  34.     width: 960px;
  35.     margin: 0 auto;
  36. }
  39. /* 页首 */
  41. .header {
  42.     /*  高度 64px */
  43.     height: 64px;
  44.     /*  清除浮动     */
  45.     overflow: hidden;
  46. }
  48. .header h1 {
  49.     /* 取消加粗 */
  50.     font-weight: normal;
  51.     font-size: 40px;
  52.     /*  使用字体 */
  53.     font-family: economica;
  54.     color: #ccc;
  55.     text-shadow: 3px 3px 5px #000;
  56.     /* 文字到top的距离 */
  57.     padding-top: 8px;
  58.     /*  因为H1和后面的导航栏在一行，所以需要浮动 */
  59.     float: left;
  60. }
  63. /*  nav 部分 */
  65. .nav {
  66.     /*  这里左右浮动 */
  67.     float: right;
  68. }
  70. .nav ul {
  71.     list-style-type: none;
  72.     /*  行高 */
  73.     padding-top: 15px;
  74. }
  76. .nav ul li {
  77.     display: inline-block;
  78.     font-size: 15px;
  79.     /*  首字母大写   */
  80.     text-transform: capitalize;
  81. }
  83. .nav ul li a {
  84.     /*  去掉下划线 */
  85.     text-decoration: none;
  86.     color: #fff;
  87.     display: block;
  88.     /* float: right; */
  89.     /*  a 标签的盒子 */
  90.     padding: 8px 10px;
  91. }
  93. .nav ul li .active {
  94.     color: #000;
  95.     background-color: #fff;
  96.     border-radius: 5px;
  97. }
  99. .nav ul li a:hover {
  100.     background-color: #09598a;
  101.     background-color: #fff;
  102.     color: #000;
  103.     border-radius: 5px;
  104. }
  107. /*  banner 部分  */
  109. .banner {
  110.     padding-top: 35px;
  111.     height: 375px;
  112.     overflow: hidden;
  113. }
  115. .banner .leftimg {
  116.     /*  左浮动，image  */
  117.     float: left;
  118.     /* 偏移 */
  119.     margin-right: 40px;
  120.     /*  圆角 */
  121.     border-radius: 10px;
  122.     -webkit-box-shadow: 0px 28px 30px #cecece;
  123. }
  125. .banner h2 {
  126.     font-size: 36px;
  127.     font-weight: normal;
  128.     font-family: kaushan;
  129.     color: #fff;
  130.     line-height: 1em;
  131.     margin-bottom: 20px;
  132.     word-spacing: 5px;
  133. }
  135. .banner p {
  136.     font-size: 15px;
  137.     color: #fff;
  138.     margin-bottom: 20px;
  139. }
  141. .banner .bottom {
  142.     margin-top: 12px;
  143.     -webkit-box-shadow: 0px 28px 30px #cecece;
  144. }
  147. /*  content-bottom 部分 */
  149. .content-bottom {
  150.     padding-top: 30px;
  151.     /*  弹性布局 */
  152.     display: flex;
  153. }
  155. .content-bottom h2 {
  156.     font: normal 24px Arial, Helvetica, sans-serif;
  157.     color: #fff;
  158.     height: 80px;
  159.     text-align: center;
  160.     line-height: 1em;
  161.     vertical-align: middle;
  162.     padding-top: 10px;
  163.     border-radius: 10px 10px 0 0;
  164.     /* 背景色 */
  165.     background-color: #70b0e0;
  166.     background-image: linear-gradient(to bottom, #70b0e0 0%, #115fa3 100%)
  167. }
  169. .box1,
  170. .box2,
  171. .box3,
  172. .box4 {
  173.     /*  弹性布局 */
  174.     flex: 1;
  175.     width: 225px;
  176.     height: 400px;
  177.     margin-right: 20px;
  178.     background-color: #eee;
  179.     /* 圆角 */
  180.     border-radius: 10px;
  181.     /* 边框阴影 */
  182.     box-shadow: 2px 2px 5px #999;
  183. }
  185. .box {
  186.     padding: 20px;
  187. }
  189. .bo4 {
  190.     margin-right: 0;
  191. }
  193. .content-bottom p {
  194.     color: #666;
  195.     line-height: 1.5em;
  196.     margin: 20px 0;
  197. }
  199. .content-bottom ul {
  200.     margin-left: 20px;
  201.     color: #666;
  202. }
  205. /*  footer 布局 */
  207. footer {
  208.     background-image: url(../day9课后实训素材/img/ambitios_footer_bg.gif);
  209.     background-repeat: repeat-x;
  210.     padding: 15px 0 15px 5px;
  211.     color: #fff;
  212.     margin-top: 20px;
  213. }

效果

CSS3 - 图5