前端——CSS

时间 2020-02-19

标签前端 css 栏目 CSS 繁體版

原文原文链接

　　CSS全称为层叠样式表(Cascading Style Sheets)，与HTML相辅相成，CSS负责实现网页的排版布局与样式美化，使用CSS样式建议在当前文件夹下建立一个CSS文件夹, 而后在CSS文件夹在建立.css文件, 在css文件中填写网页的样式。css

样式特征

层叠性: 多组CSS样式共同做用于一个元素html

继承性: 后代元素能够继承祖先元素中的某些样式例 : 大部分的文本属性均可以被继承小程序

样式表的优先级: 优先级用来解决样式冲突问题。同一个元素的同一个样式(例如文本色)，在不一样地方屡次进行设置，哪种样式表的优先级高选用哪种。后端

离元素最近的样式优先级最高（就近原则）
文档内嵌与外链样式表，优先级一致，看代码书写顺序，后来者居上
浏览器默认样式和继承样式优先级较低

　　CSS样式分为行内样式（也称为内联样式），主要在单个页面中使用，还有就是内嵌样式以及外链样式。内嵌样式用的最多，外链样式主要用在项目当中，接下来咱们详细了解一下。api

样式表

插入样式表的方法有三种：浏览器

行内样式
内嵌样式表
外链样式

行内样式

　　借助于HTML中style标签属性，为当前的标签元素添加样式声明，行内样式的style值由字符串包含CSS属性和值得键值对组成。网络

<标签名 style="属性:值;属性:值;">
<div style="background-color:red;color: white">容器</div>

内嵌样式

　　内嵌样式在单个网页中是用的比较多的。有了内嵌样式，咱们就不须要在html标签中填写样式，那样会显得html代码浓重，影响观看阅读代码，而经过内嵌样式，在<head>标签中嵌入CSS样式代码。在<style>中经过CSS选择器匹配到HTML代码中对应的标签元素。能够实现样式代码和HTML标签代码分离，让代码看起来更加美观。前后端分离

 <style>
    选择器{
          属性:值;
          属性:值;
        }
 </style>

外链样式

　　外部连接CSS样式，多用于大型的项目网站中，用外部连接CSS样式能够实现先后端分离。若是使用外部连接样式须要在当前文件夹中建立css文件夹，而后把后缀名为.css的样式文件放进去。最后在HTML文件中使用<link>标签引入外部样式表，外部样式文件中一样借助选择器匹配元素应用样式ssh

<link rel="stylesheet" href="CSS URL" type="text/css">

优先级：行内样式 > 内嵌样式 > 外链样式 > 浏览器默认样式ide

CSS 选择器

　　经过元素名、类名、id名选择到页面中选取相应的元素标签，为其添加CSS样式

* 号选择器

表明全部

/*去除全部标签元素的内外边框值*/
*{
   margin:0;
   padding:0;
}

标签选择器

根据标签名匹配文档中全部该标签元素样式:

标签名{
  　　  属性:值;
　　  }
/*为全部p标签添加样式*/
p{
    color: red;
}

id选择器

　　ID选择器能够根据元素的 id 属性值匹配文档中唯一的标签元素，而后指定样式。

CSS 中 id 选择器以 "#" 来定义。

#标签id名{
    属性:值;
}
/*例如*/
#div2{
   color:red;
}

注意 : 元素id具备惟一性，不能使用相同的ID名；标签id名能够由数字，字母，下划线，- 组成，不能以数字开头; 尽可能见名知意，多个单词组成时，可使用链接符，下划线，小驼峰表示。

class选择器/类选择器

　　根据元素的class属性值匹配相应的元素,class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class能够在多个元素中使用，实现多个标签相一样式的复用。

CSS 中 class 选择器以 "." 来定义。

.元素class名{
    属性:值;
}
/*例如*/
.blue{
   color:red;
}

特殊用法 :

类选择器与其余选择器结合使用时，标签在前, 类选择器在后例 : a.c1{ }
class属性值能够写多个，共同应用类选择器的样式例 : .c1{ } .c2{ }

群组选择器

　　为一组标签元素设置统一的样式，不用类别之间用逗号“，”分隔。

选择器1,选择器2,选择器3{ 
 
}

条件后代选择器

　　条件后代选择器：匹配在知足条件选择器的状况下的全部后代元素(包含直接子元素和间接子元素)，后代选择器与父代选择器用空格隔开。

/*匹配"选择器1"中全部知足"选择器2"的后代标签元素*/
选择器1 选择器2{

}

子代选择器

　　父代选择器与子代选择器用" > "号链接，匹配知足选择器的全部直接子代元素

父代选择器>子代选择器{

}

伪类选择器

为元素的不一样状态分别设置样式，伪类选择器必须与基础选择器结合使用

:nth-child(n)　　匹配属于其父元素的第 n 个子元素，不论元素的类型。
p:first-child　　匹配第一个p元素
:link 超连接访问前的状态
:visited 超连接访问后的状态
:hover 鼠标滑过期的状态
:active 鼠标点下去可是不抬起时的状态(激活)
:focus 焦点状态(文本框被编辑时就称为获取焦点)
:after　　在元素以后添加内容，配合content属性使用

/*第一个div元素*/
div:nth-child(1){
    }
/*超连接访问前的状态*/
a:link{
    }
/*超连接访问后的状态*/
a:visited{
    }
/*鼠标滑过期的状态*/
.c1:hover{ 
    }
/*每一个<p>元素以后插入内容*/
p:after
{
  content:"要添加的内容"  
}

注意 :

超连接若是须要为四种状态分别设置样式,必须按照如下顺序书写

  :link　　　　　　 /*访问前*/
  :visited　　　　 /*访问后*/
  :hover　　　　　  /*鼠标滑过期*/
  :active　　　　  /*鼠标点下去可是不抬起来*/

属性选择器

　　根据属性来选择元素的选择器。

选择包含属性 title 的全部元素

[title]
{
    color:blue;
}

选择包含属性 title="never" 的全部元素

[title=never]
{
    border:5px solid green;
}

选择title属性值包含hello的全部元素，使用（~）分隔属性和值:

[title~=hello] { color:blue; }

选择器的优先级

　　使用选择器为元素设置样式，发生样式冲突时，主要看选择器的权重，权重越大，优先级越高

选择器	权重
标签选择器	1
(伪)类选择器	10
id选择器	100
行内样式	1000

　　复杂选择器(后代,子代,伪类)最终的权重为各个选择器权重值之和，群组选择器权重以每一个选择器单独的权重为准，不进行相加计算例 :

/*群组选择器之间互相独立，不影响优先级*/
body,h1,p{ /*标签选择器权重为 1 */
 color:red;
}
.c1 a{ /*当前组合选择器权重为 10+1  */
 color:green;
}
#d1>.c2{ /*当前组合选择器权重为 100+10 */
 color:blue;
}

元素的尺寸和颜色

元素的尺寸

px 像素单位
% 百分比相对父元素
em 相对单位 1 em=16px 一般用于移动端的页面开发经常使用1.5em
rpx 小程序页面的单位

当页面元素的内容大小超出了元素的宽度，可使用 overflow 属性来解决超出部分的显示方式，建议使用auto;

颜色

元素的字体，背景，边框都会使用到颜色。使用方式 color:red;

颜色有如下几种表达方法：

英文单词 red
rgb：R G B 是红蓝绿三基色, 三个值的大小分别在(0~225)之间，
rgba: a是透明度值在(0~1)之间。a的值越小，越透明。
长16进制表明颜色：#ffffff; #000000
短16进制表明颜色：#fff;#000

盒子模型

　　盒模型是针对块元素的，由于每个块元素就至关于一个盒子，有边框(border)、外边距(margin)和内边距(padding)。

在容器模型中，它规定了元素处理内容、内边距、边框和外边距的大小
最里面是内容，包围内容的是内边距，内边距的边缘是边框
边框之外是外边距，外边距默认是透明的

盒模型相关的属性会影响元素在文档中的实际占位，进而影响布局

边框

border:width style color;

当border-color设置为transparent时，为透明，隐藏边框。

边框样式border-style属性经常使用的取值：

solid：实线边框
dotted：点线边框
dashed：虚线边框
double：双线边框

CSS边框属性容许单独设置某一方向的边框属性

border-top：设置上边框
border-bottom：设置下边框
border-left：设置左边框
border-right：设置右边框

一些特殊的边框案例：

网页三角标制做：标签元素设置宽高为0、统一设置四个方向透明边框、调整某个方向边框颜色

width: 0;
height: 0;
margin: 0 auto;
border: 50px solid blue;
border-bottom-color:transparent; 
border-left-color:transparent;
border-right-color:transparent;

圆角边框：border-radius 指定边框角的圆角半径

width: 0;
height: 0;
border: 50px solid red;
border-radius: 50%;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: green;

当border-radius为长宽的一半时，就是圆了，若是要设置圆角边框能够把边框圆半径border-radius的值设置小一点。

当某个属性能够取四个方向的值得时候，分别对应如下规律，

一个值表示统一设置上右下左
两个值表示分别设置上下左右
三个值表示分别设置上右下，左右保持一致
四个值表示分别设置上右下左

能够取四个值得经常使用属性有：border-style、border-width 、 border-color、padding、margin。

轮廓线

属性：outline

取值：width style color

线边框实际占位，轮廓不占位，取none能够取消文本输入框默认轮廓线

盒阴影

属性：box-shadow

取值：h-shadow v-shadow blur spread color;

h-shadow 取像素值，阴影的水平偏移距离
v-shadow 取像素值，阴影的垂直偏移距离
blur 取像素值，表示阴影的模糊程度，值越大越模糊
spread 选填，取像素值，阴影的尺寸
color 设置阴影颜色,默认为黑色

内边距

属性：padding

做用：调整元素内容框与边框之间的距离

取值：单位是 px 或百分比，但不容许使用负值。内边距padding支持上右下左取值。

内边距也能够单方向取值：padding-top、padding-right、padding-bottom、padding-left

外边距

属性：margin

做用：调整本元素与其余元素之间的距离

margin:0; 取消默认外边距

margin:0 auto; 左右自动外边距，实现元素在父元素范围内水平居中

margin:-10px;元素位置的微调

内边距也能够单方向取值：margin-top、margin-right、margin-bottom、margin-left

外边距合并问题：当一个元素包含在另外一个元素中时，它们的上和包含上/或下和包含下外边距也会发生合并。元素之间同时设置垂直方向的外边距，最终取较大的值包含合并

盒模型最终尺寸的计算= width/height+padding+border+margin

页面布局

默认布局方式，按照代码书写顺序及标签类型从上到下，从左到右依次显示

定位布局 position

结合定位属性调整元素的显示位置

position: static;

属性值：

static：默认，没有定位
fixed（固定定位）：参照浏览器窗口进行定位,不跟随网页滚动而滚动；
relative（相对定位）：可参照元素在文档中的原始位置进行偏移
absolute（绝对定位）：参照离他最近的已经定位的祖先元素进行偏移,若是没有,则参照窗口进行偏移；在文档中不占位,能够手动设置宽高

设置好定位后，就能够开始设置偏移属性了，设置定位的元素可使用偏移属性调整距离参照物的位置

top 距参照物的顶部
right 距参照物的右侧
bottom 距参照物的底部
left 距参照物的左侧

h2.pos_top
{
    position:relative;
    top:-50px;
}

通常状况才采用 "父相子绝" : 父元素设置相对定位,子元素绝对定位，参照已定位的父元素偏移。

重叠次序

元素发生堆叠时可使用 z-index 属性调整已定位元素的显示位置，值越大元素越靠上：

属性 : z-index

取值 : 无单位的数值,数值越大,越靠上

堆叠规则：

定位元素与文档中正常元素发生堆叠，永远是已定位元素在上
同为已定位元素发生堆叠，按照 HTML 代码的书写顺序，后来者居上

溢出布局 overflow

　　overflow：用于控制内容溢出元素框时显示的方式。

属性值：

visible：默认值，不会修剪，内容会呈如今元素框以外
hidden：内容会被修剪，其他内容不可见
scroll：多出内容以滚动条形式查看
auto：会自动选择，若是内容被修剪，多出部分以滚动条形式呈现

注意:overflow 属性只工做于指定高度的块元素上。

浮动布局 float

主要用于设置块元素的水平排列，因此若是要使用float，要把元素变成块元素display:block;，或者元素已是块元素。

属性值：

float: left;　　设置元素向左浮动
float: right;　　设置元素向右浮动

特色

元素设置浮动会从原始位置脱流，向左或向右依次停靠在其余元素边缘，在文档中再也不占位
元素设置浮动，就具备块元素的特征，能够手动调整宽高
"文字环绕"：浮动元素遮挡正常元素的位置，没法遮挡正常内容的显示，内容围绕在浮动元素周围显示

常见问题

子元素所有设置浮动，致使父元素高度为0，影响父元素背景色和背景图片展现,影响页面布局

解决

对于内容固定的元素，若是子元素都浮动，能够给父元素固定高度(例:导航栏)
指定元素两侧不能出现浮动元素。设置 clear:both; 清除浮动
为父元素设置 overflow:hidden; 解决高度为0

显示(Display)与可见性(Visibility)

隐藏元素

隐藏元素有两种实现方法

display：none
visibility：hidden

注意：这两种方法会产生不一样的结果，visibility:hidden隐藏的元素仍占用与未隐藏以前同样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

块元素和内联元素的转变

　　将元素变成内联元素

display:inline;

　　将元素变成块元素

display:block;

背景属性

CSS 属性定义背景效果：

background-color：背景颜色
background-image：背景图片
background-repeat：设置平铺方式
background-attachment：背景图像是否固定或者随着页面的其他部分滚动。
background-position：显示位置

背景颜色

background-color: red;

背景图片

　　默认状况下进行平铺重复显示，以覆盖整个元素实体.

background-image : url("图片路径");

设置背景图片，指定图片路径，若是路径中出现中文或空格，须要加引号

设置颜色渐变

可使用两个或两个以上节点

/*上->下，红变蓝*/
background-image: linear-gradient(#e66465, #9198e5); 
/*左->右，红变黄*/
background-image: linear-gradient(to right, red , yellow); 
/*从左上角开始，红变黄*/
background-image: linear-gradient(to bottom right, red, yellow);  
/*带有透明度的渐变*/
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); 
/*径向渐变*/
background-image: radial-gradient(red, yellow, green);

设置背景图片的平铺重复方式

默认背景图片从元素的左上角显示，若是图片尺寸与元素尺寸不匹配时，会出现如下状况：

若是元素尺寸大于图片尺寸，会自动重复平铺，直至铺满整个元素
若是元素尺寸小于图片尺寸，图片默认从元素左上角开始显示，超出部分不可见

平铺方式

background-repeat

取值：

repeat：默认值，沿水平和垂直方向重复平铺
repeat-x：沿X轴重复平铺
repeat-y：沿Y轴重复平铺
no-repeat：不重复平铺

背景是否固定

background-attachment:fixed;

属性值：

fixed：固定，背景图片不会随着页面滚动而滚动
scroll：随着页面滚动而滚动
local：随着页面元素滚动而滚动

显示位置

默认显示在元素左上角

background-position:x y;

取值方式：

　　1. 像素值
　　　　设置背景图片的在元素坐标系中的起点坐标
　　2. 方位值
　　　　水平方向取值：left/center/right
　　　　垂直方向取值：top/center/bottom

注：若是只设置某一个方向的方位值，另一个方向默认为center

精灵图技术：为了减小网络请求，能够将全部的小图标拼接在一张图片上，一次网络请求所有获得；借助于background-position 对背景图片开始位置进行调整，实现显示不一样的图标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #sp {
            border: solid 1px red;
            /* 设置显示背景图片的宽度和高度 */
            width: 25px;
            height: 25px;
            margin: 0 auto;
            background-image: url("imgs/img07.png");
        }
        #sp2 {
            border: solid 1px red;
            /* 设置显示背景图片的宽度和高度 */
            width: 25px;
            height: 25px;
            margin: 0 auto;
            background-image: url("imgs/img07.png");
            background-position: 0 -25px;
        }
        #sp3 {
            border: solid 1px red;
            /* 设置显示背景图片的宽度和高度 */
            width: 25px;
            height: 25px;
            margin: 0 auto;
            background: url("imgs/img07.png") 0 -50px;
        }
    </style>
</head>
<body>
    <div id="sp"></div>
    <div id="sp2"></div>
    <div id="sp3"></div>
</body>
</html>

案例代码

设置背景图片的尺寸

background-size:width height;

取值方式：

　　1. 像素值
　　　　500px 500px：同时指定宽高
　　　　500px：指定宽度，高度自适应
　　2. 百分比：参照元素的尺寸进行计算
　　　　50% 50%; 根据元素宽高,分别计算图片的宽高
　　　　50%; 根据元素宽度计算图片宽高,图片高度等比例缩放

背景属性简写

background:color url("") repeat position;

注意：

若是须要同时设置以上属性值，遵守相应顺序书写
background-size 单独设置

文本格式

字体样式

字体系列

font-family:"黑体","Microsoft YaHei",Arial;

取值：

family-name：字体类型名称：“宋体”、“微软雅黑”。其实中文字体也有英文名，都是同样的。
generic-family：字体系列名称：“serif”、“sans-serif”、“monospace”...

注意：能够指定多个字体名称做为备选字体，使用逗号隔开，若是浏览器不支持第一个字体，则会尝试下一个；若是字体名称为中文，或者名称中出现了空格，必须使用引号

Serif 和 Sans-serif 字体之间的区别

sans-serif 字体比较适合在屏幕上阅读，而 serif 字体更容易在纸上阅读。“sans”指无。

自定义字体

<style> 
@font-face
{
    font-family: myFirstFont;    /*自定义字体名*/
    src: url(sansation_light.woff);     /*自定义字体URL*/
}
 
div
{
    font-family:myFirstFont;
}
</style>

字体粗细

font-weight:normal;

normal（默认值）等价于400
bold (加粗) 等价于700

斜体

font-style:italic;

字体属性

font : style weight size family;

注意 :

若是四个属性值都必须设置，严格按照顺序书
size family 是必填项

文本样式

文本颜色

十六进制值，如: ＃FF0000
一个RGB值，如: RGB(255,0,0)
颜色的名称，如: red

color:red;

文本装饰线

/*删除文本装饰*/
text-decoration:none;

取值 :

underline：下划线
overline：上划线
line-through：删除线
none：取消装饰线

在CSS中，使用text-decoration属性来定义段落文本的下划线、删除线和顶划线。none即为默认值，能够用这个属性值也能够去掉已经有下划线或删除线或顶划线的样式。

水平对齐方式

text-align:center;

取值 :

left：左对齐(默认值)
center：居中对齐
right：右对齐
justify：两端对齐

行高

line-height:30px;

使用 : 文本在当前行中永远垂直居中，能够借助行高height调整文本在元素中的垂直显示位置

line-height = height 设置一行文本在元素中垂直居中
line-height > height 文本下移显示
line-height < height 文本靠上显示

特殊：line-height能够采用无单位的数值，表明当前字体大小的倍数,以此计算行高

字符间距

letter-spacing:2px   /*字母(汉字)与字母(汉字)  之间的间距*/
word-spacing:30px;　　/*单词与单词 之间的间距*/

文本缩进

text-indent:50px;

大小写转换

text-transform:uppercase;

属性值：

uppercase：文本大小
lowercase：文本小写
capitalize：首字母大写

文字方向

direction:rtl;    /*right to left*/

属性值：

ltr：默认，从左向右
rtl：从右向左

列表样式

　　经过列表样式，设置列表项标记的图像（小黑点、小方框、数字、字母...）。

list-style-type: circle;    /*设置标记为圆圈*/

经常使用属性值：

none：无标记
disc：默认。标记是实心圆。
circle：标记是空心圆。
square：标记是实心方块。
decimal：标记是数字。
lower-roman / upper-roman：小写或大写罗马数字(i, ii, iii, iv, v, I, II, III, IV, V, )
lower-alpha / upper-alpha：小/大写写英文字母

鼠标箭头样式

cursor：default;

属性值：

url：自定义光标的URL
default：默认光标
auto：浏览器默认光标
crosshair：十字线
move：可移动的图标
wait：转圈等待的光标
help：问号
text：可选文本的光标

提示工具

　　先让提示文本隐藏，当鼠标划过须要提示的地方的时候，再让提示文本显现。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS 教程</title>
</head>
<style>
    /*鼠标移动到这*/
    .tooltip {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black;
    }
    /*提示文本*/
    .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        /* 定位 */
        position: absolute;
        z-index: 1;
    }
　　 /*当鼠标划过期，提示显现*/
    .tooltip:hover .tooltiptext {
        visibility: visible;
    }
</style>
<body style="text-align:center;">

<div class="tooltip">
    鼠标移动到这<span class="tooltiptext">提示文本</span>
</div>

</body>
</html>

　　所以当咱们须要提示条出如今上下左右的时候，只须要在提示条的定位中进行修改。

右边

.tooltip .tooltiptext {
    top: -5px;    /*提示条向上移动5px*/
    left: 105%;  /*提示条向右移动5px*/
}

左边

.tooltip .tooltiptext {
    top: -5px;　　/*提示条向上移动5px*/
    right: 105%; /*提示条向右移动5px*/
}

上面

.tooltip .tooltiptext {
    width: 120px;
    bottom: 100%;    /*底部撑满，移到最上面*/
    left: 50%;              /*左边取一半，到中间*/
    margin-left: -60px; /* 向左移，居中 */
}

下面

.tooltip .tooltiptext {
    width: 120px;
    top: 100%;            /*上面取满，到底部*/
    left: 50%;              /*到中间*/
    margin-left: -60px; /* 向左移居中 */
}

指向性箭头

/*在后面添加样式*/
.tooltip .tooltiptext:after {
content: " ";           /*内容为空*/
position: absolute;
top: 100%;              /* 提示工具底部 */
left: 50%;              /* 到中间 */
margin-left: -5px;      /* 居中 */
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -60px;
}

.tooltip .tooltiptext:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<body style="text-align:center;">

<br><br>

<div class="tooltip">鼠标移动到我这
  <span class="tooltiptext">提示文本</span>
</div>

</body>
</html>

完整代码

其余方向依次类推

透明属性

opacity:0.5;

0是全透明，1是不透明。

过渡属性

transition：将鼠标悬停在一个元素上，逐步该元素的属性值：

/*逐步改变宽度从 100px 到 300px */
div
{
    width:100px;
    transition: width 2s;
}
div:hover {width:300px;}

transition-delay: 2s; 延迟2s再，变换。

媒体类型

　　媒体类型容许咱们指定HTML文档将如何在不一样媒体呈现。该文档能够以不一样的方式显示在电脑屏幕上，手机上、平板上和纸张上。

@media 规则

@media 属性值：

all：用于全部媒体设备
print：用于打印机
handheld：用于很小的手持设备
screen：用于电脑显示器
tv：用于电视

案例：在电脑屏幕上，字体14px，打印的时候，字体10px。

@media screen
{
    p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
    p.test {font-family:times,serif;font-size:10px;}
}

屏幕尺寸响应式布局

/* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改成上下布局 */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}

动画 @keyframes

　　@keyframes 规则是建立动画，建立一个动画演示，提供给animation属性调用。

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
div
{
    animation: myfirst 5s;
}

还可使用百分比来规定变化发生的时间，关键词 "from" 和 "to"，等同于 0% 和 100%。

@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

1. 前端之CSS
2. Web前端-CSS
3. 前端css position
4. 前端 CSS
5. 前端篇---------CSS
6. python--前端CSS
7. 前端之css
8. python前端CSS
9. 前端-html、css
10. 前端-html/css
更多相关文章...
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• CSS 指南 - 网站建设指南
• 使用阿里云OSS+CDN部署前端页面与加速静态资源
• Docker容器实战(一) - 封神Server端技术