系列文章目录
CSS
一、基础内容
1.基础选择器
1.1 标签选择器
定义
:指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一得CSS样式
作用
:把某一类标签全部选择出来
div {
color : pink;
}
1.2 类选择器
语法
.类名 {
属性1 : 属性值1;
}
<style>
.red {
color : red;
}
.font35 {
font-size : 35px;
}
</style>
<div class="red font35" >刘德华</div>
1.3 id选择器
语法
id选择器的口诀: 样式#定义, 结构id调用, 只能调用一次, 别人切勿使用
/* */
#pink {
color: pink;
}
1.4 通配符选择器
语法
< style>
* {
color : red;
}
</ style>
基础选择器 作用 特点 使用情况 用法 标签选择器 可以选出所有相同得标签; 不能差异化选择 较多 p{color:red} 类选择器 可以选出1个或者多个标签 可以根据需求选择 非常多 .nav{color:red} id选择器 一次只能选择1个标签 ID属性只能在每个HTML文档中出现一次 一般和JS搭配 #nav{color:red} 通配符选择器 选择所有的标签 选择的太多,有部分不需要 特殊情况使用 *{color:red}
2.字体操作
2.1 字体
定义
< style>
h2 {
font-family : '微软雅黑' ;
}
p {
font-family : 'Times New Roman' , Times, serif;
}
</ style>
2.2 字体大小
定义
< style>
body {
font-size : 16px;
}
h2 {
font-size : 16px;
}
</ style>
2.3 字体粗细
定义 属性值
属性值 描述 normal 默认值(不加粗的) bold 定义粗体(加粗的) 100-900 400等同于normal,而700等同于bold 注意这个数字后面不跟单位
<style>
.bold {
/* font-weight: bold; */
/* 这个700 的后面不要跟单位 等价于 bold 都是加粗的效果 */
/* 实际开发中,我们跟提倡使用数字 表示加粗或者变细 */
font-weight: 700;
}
h2 {
font-weight: 400;
/* font-weight: normal; */
}
</style>
2.4 文字样式
定义
< style>
p {
font-style : italic;
}
em {
font-style : normal;
}
</ style>
属性
属性值 作用 normal 默认值,游览器会显示标准的字体样式font-style:normal; italic 游览器会显示斜体的字体样式
2.5 字符符合属性
定义:
<style>
/* 想要div文字变倾斜 加粗 字号设置为16像素 并且 是微软雅黑 */
div {
/* font-style: italic;
font-weight: 700;
font-size: 16px;
font-family: 'Microsoft yahei'; */
/* 复合属性: 简写的方式 节约代码 */
/* font: font-style font-weight font-size/line-height font-family; */
/* font: italic 700 16px 'Microsoft yahei'; */
font: 20px '黑体';
}
</style>
1.使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序
,并且各个属性间以空格隔开
2.不需要设置的属性可以省略(表示默认值),但必须保留fon-size
和 font-family
,否则font属性将不起作用
字体属性总结
属性 表示 注意点 font-size 字号 我们通常用的单位是px像素,一定要跟上单位 font-family 字体 实际工作中按照团队约定来写字体 font-weight 字体粗细 记住加粗是700或者blod
;不加粗是normal
或者400 ;记住数字不要跟单位 font-style 字体样式 记住倾斜是italic
;不倾斜是 normal
;工作中我们最常用normal
3.文本外观属性
3.1 文本颜色
定义
< style>
div {
color : rgb ( 255, 0, 255) ;
}
</ style>
属性说明
表示 属性值 预定义的颜色值 red,green… 十六进制 #FF0000,… RGB代码 rgb(255,0,0)/rgb(100%,0%,0%)
3.2 对齐文本
text-align
属性值 解释 left 左对齐(默认值) right 右对齐 center 居中对齐
< style>
h1 {
text-align : right;
}
</ style>
3.3 装饰文本
text-decoration
定义:可以给文本添加下划线、删除线、上划线等 属性说明
属性值 描述 none 默认。没有装饰线(最常用) underline 下划线。链接a自带下划线(常用) overline 上划线。(几乎不用) line-through 删除线。(不常用)
< style>
div {
text-decoration : line-through;
text-decoration : overline;
}
a {
text-decoration : none;
color : aqua;
}
</ style>
3.4 文本缩进
text-indent
定义:用来指定文本的第一行的缩进
< style>
p {
font-size : 24px;
text-indent : 2em;
}
</ style>
3.5 行间距
line-height
定义:属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离
< style>
div {
line-height : 26px;
}
p {
line-height : 25px;
}
</ style>
</ head>
< body>
< div> 中国人</ div>
< p> 打开北京、上海与广州的地铁地图,你会看见三张纵横交错的线路网络,这代表了中国最成熟的三套城市轨道交通系统。</ p>
< p> 可即使这样,在北上广生活的人依然少不了对地铁的抱怨,其中谈及最多的问题便是拥挤——对很多人而言,每次挤地铁的过程,都像是一场硬仗。更何况,还都是败仗居多。</ p>
< p> 那么,当越来越多的二线甚至三线城市迎接来了自己的地铁,中国哪里的地铁是最拥挤的呢?</ p>
</ body>
文本属性总结
属性 表示 注意点 color 文本颜色 我们通常用十六进制 比如 而且是简写形式 #fff text-aligh 文本对齐 可以设定文字水平的对齐方式 text-indent 文本缩进 通常我们用于段落首行缩进2个字的距离(text-indent:2em) text-decoration 文本修饰 记住添加下划线 underline取消下划线none line-height 行高 控制行与行之间的距离
4.CSS引入方式
4.1 内部样式表
< title> 内部样式表</ title>
< style>
div {
color : pink;
}
</ style>
</ head>
< body>
< div> 所谓内部样式表,就是在html页面内部写样式,但是是单独写到style标签内部.</ div>
</ body>
4.2 行内样式表
< body>
< p style =" color : pink; font-size : 20px; " > 给我一个粉红的回忆</ p>
</ body>
4.3 外部样式表
<link rel="stylesheet" href="style.css">
引入方式总结
样式表 优点 缺点 使用情况 控制范围 行内样式表 书写方便,权重高 结构样式混写 较少 控制一个标签 内部样式表 部分结构和样式相分离 没有彻底分离 较多 控制一个页面 外部样式表 完全实现结构和样式相分离 需要引入 最多,推荐 控制多个页面
二、进阶
1.Emmet语法
1.1 Emmet语法-生成标签
生成标签:div+tab
生成多个相同标签:div*3+tab
生成有父子级关系的标签:(eg)ul>li+tab
生成有兄弟关系的标签:(eg)div+p+tab
生成带有类名或者id名字的:.demo/#demo+tab
生成div带有类名有顺序的多个标签:.demo$*3+tab
生成标签且标签中间相同内容:div{jerry}+tab
div{$}*3+tab
< div> 1</ div>
< div> 2</ div>
< div> 3</ div>
1.2.Emmet语法-生成CSS
比如w200 按tab生成 width:200px;
2.复合选择器
2.1. 后代选择器(重要)
定义
:表示选择元素1里面的所有元素2
元素1 元素2{ 样式声明 }
注意
元素1和元素2中间用空格隔开 元素1是父级,元素2是子级,最终选择的是元素2 元素2可以是儿子,也可以是孙子,只要是元素1的后代 元素1和元素2可以是任意基础选择器
<!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> 复合选择器之后代选择器</ title>
< style>
ol li {
color : pink;
}
ol li a {
color : red;
}
.nav li a {
color : yellow;
}
</ style>
</ head>
< body>
< ol>
变态写法
< li> 我是ol 的孩子</ li>
< li> 我是ol 的孩子</ li>
< li> 我是ol 的孩子</ li>
< li> < a href = " #" > 我是孙子</ a> </ li>
</ ol>
< ul>
< li> 我是ul 的孩子</ li>
< li> 我是ul 的孩子</ li>
< li> 我是ul 的孩子</ li>
< li> < a href = " #" > 不会变化的</ a> </ li>
</ ul>
< ul class = " nav" >
< li> 我是ul 的孩子</ li>
< li> 我是ul 的孩子</ li>
< li> 我是ul 的孩子</ li>
< li> < a href = " #" > 不会变化的</ a> </ li>
< li> < a href = " #" > 不会变化的</ a> </ li>
< li> < a href = " #" > 不会变化的</ a> </ li>
< li> < a href = " #" > 不会变化的</ a> </ li>
</ ul>
</ body>
</ html>
2.2. 子选择器(重要)
定义:只能选择作为某元素的最近一级子元素,简单理解就是选亲儿子元素
元素1 > 元素2{样式声明}
div > p{样式声明}
注意:
元素1和元素2中间用大于号隔开 元素1是父级,元素2是子级,最终选择的是元素2 元素2必须是亲儿子
<!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> 复合选择器之子元素选择器</ title>
< style>
.nav>a {
color : red;
}
</ style>
</ head>
< body>
< div class = " nav" >
< a href = " #" > 我是儿子</ a>
< p>
< a href = " #" > 我是孙子</ a>
</ p>
</ div>
</ body>
</ html>
3.并集选择器(重要)
定义:是各选择器通过英文(,)连接而成,任何形式的选择器都可以作为并集选择器的一部分
元素1,元素2{样式声明} //选择了元素1和元素2
ul,div{样式声明}
注意
元素1和元素2中间用逗号
隔开 逗号可以理解为和的意思 并集选择通常用于集体声明
4.伪类选择器
1.链接伪类选择器
为了确保生校,建议按照LVHA的顺序声明:link visited hover active
a:link
:选择所有未访问的链接
a:link {
color: #333;
text-decoration: none;
}
a:visited
:选择所有已访问的链接
a:visited {
color: orange;
}
a:hover
:选择鼠标指针位于其上的链接
a:hover{
color:skyblue;
}
a:active
:选择活动链接(鼠标按下未弹起的链接)
a:active {
color: green;
}
2.focus伪类选择器
定义:焦点就是光标,用于选取获得焦点的表单元素
input:focus {
background-color: pink;
color: red;
}
*nth-child(n)
选择器
n可以是数字,关键字,公式
n如果是数字,就是选择第n个子元素,从1开始 n如果是关键字:even偶数,odd奇数
<!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> CSS3新增结构伪类选择器</ title>
< style>
ul li:first-child {
background-color : pink;
}
ul li:last-child {
background-color : pink;
}
ul li:nth-child(2) {
background-color : skyblue;
}
ul li:nth-child(6) {
background-color : skyblue;
}
</ style>
</ head>
< body>
< ul>
< li> 我是第1个孩子</ li>
< li> 我是第2个孩子</ li>
< li> 我是第3个孩子</ li>
< li> 我是第4个孩子</ li>
< li> 我是第5个孩子</ li>
< li> 我是第6个孩子</ li>
< li> 我是第7个孩子</ li>
< li> 我是第8个孩子</ li>
</ ul>
</ body>
</ html>
选择器总结
选择器 作用 特征 使用情况 隔开符号及用法 后代选择器 用来选择后代元素 可以是子孙后代 较多 符号是空格.nav a 子代选择器 选择最近一级元素 只选亲儿子 较少 符号是大于 .nav>p 并集选择器 选择某些相同样式的元素 可以用于集体声明 较多 符号是逗号 .nav,.header 链接伪类选择器 选择不同状态的链接 跟链接相关 较多 重点记住a{}和a:hover实际开发的写法 :focus选择器 选择获得光标的表单 跟表单相关 较少 input:focus记住这个写法
3.元素的显示模式
分类:块元素/行内元素/行内块元素
3.1 块元素
3.1.1 常见的块元素:h1~h6 p div ul li等
3.1.2 特点:
自己独占一行 高、宽、内外边距都可以控制 宽度默认是容器(父级)的100% 是一个容器及贺子,里面可以放行内或者块级元素
3.1.3 注意
文字类的元素内不能使用块级元素 p和h1~h6标签标签主要用于存放文字,不能放块级元素
3.2 行内元素
3.2.1 常见的行内元素a strong b em i span等
3.2.2 特点:
相邻行内元素在一行上个,一行可以显示多个 高、宽直接设置是无效的 默认宽度就是它本身内容的宽度 行内元素只能容纳文本或其他行内元素
3.2.3 注意
链接里面不能再放链接 特殊情况链接<a>
里面可以放块级元素,但是给它转换一下块级模式最安全
3.3 行内块元素
3.3.1 例如
img input td
3.3.2 特点:
和相邻行内元素在一行上,但中间有空白缝隙,一行显示多个元素(行内元素特点) 默认宽度就是它本身内容的宽度(行内元素特点) 高、行高,内外边距都可以控制(块级元素特点)
总结
元素模式 元素排列 设置样式 默认宽度 包含 块级元素 一行只能放一个块级元素 可以设置宽度高度 容易的100% 容器级可以包含任何标签 行内元素 一行可以放多个行内元素 不可以直接设置宽度、高渡 它本身内容的宽度 容纳文本或其他行内元素 行内块元素 一行放多个行内块元素 可以设置宽度和高度 它本身内容的宽度
4.元素显示模式转换
4.1 使用场景
4.2转换
转换为块元素: display:block 转换为行内元素:display:inline 转换为行内块:display:inline-block
5.CSS背景
5.1 背景颜色background-color
background- color: 颜色值
一般情况下元素背景颜色默认值是transparent
5.2 背景图片background
5.2.1 背景属性background-image:none|url()
<style>
div {
width : 300px;
height : 300px;
background-image : url(images/logo.png) ;
}
</style>
参数值 作用 none 无背景图(默认的) url 使用绝对或相对地址指定背景图片
5.2.2 背景样式属性 background-repeat
<style>
div {
width : 300px;
height : 300px;
background-color : pink;
background-image : url(images/logo.png) ;
background-repeat : repeat-y;
}
</style>
参数值 作用 repeat 背景图像在纵向和横向上平铺(默认的) no-repeat 背景图像不平铺 repeat-x 背景图像在横向上平铺 repeat-y 背景图像在纵向平铺
5.3 背景图片位置background-position
<style>
div {
width : 300px;
height : 300px;
background-color : pink;
background-image : url(images/logo.png) ;
background-repeat : no-repeat;
background-position : 方位名词;
background-position : center top;
background-position : right center;
如果是方位名词 right center 和 center right 效果是等价的 跟顺序没有关系
background-position : center right;
此时 水平一定是靠右侧对齐 第二个参数省略 y 轴是 垂直居中显示的
background-position : right;
此时 第一个参数一定是 top y轴 顶部对齐 第二个参数省略x 轴是 水平居中显示的
background-position : top;
}
</style>
参数值 说明 length 百分数|长度值 position top|center|bottom|left|right|center方位名词
5.4 背景附着background-attachment
background-attachment : scroll|fixed
<style>
body {
background-image : url(images/bg.jpg) ;
background-repeat : no-repeat;
background-position : center top;
background-attachment : fixed;
color : #fff;
font-size : 20px;
}
</style>
参数 作用 scroll 背景图像时随对象内容滚动 fixed 背景图像固定
5.5 复合写法
background : transparent url(image.jpg) repeat-y fixed top;
5.6 背景色半透明background:rgba(0,0,0,0,3)
最后一个参数时alpha透明度,取值范围0~1
background:rgba(0,0,0,0,3)
背景总结
属性 作用 值 background-color 背景颜色 预定义的颜色值/十六进制/RGB代码 background-image 背景图片 url(图片路径) background-repeat 是否平铺 repeat/no-repeat/repeat-x/repeat-y background-position 背景位置 length/position 分别是x和y坐标 background-attachment 背景附着 scoll(背景滚动)/fixed(背景固定) 背景简写 书写简单 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 背景色半透明 背景颜色半透明 background:rgba(0,0,0,0.3);后面必须时4个值
6.CSS的优先级
选择器 选择器权重 继承或者* 0,0,0,0 元素选择器 0,0,0,1 类选择器,伪类选择器 0,0,1,0 ID选择器 0,1,0,0 行内样式style="" 1,0,0,0 !important重要的 无穷大
7.权重的叠加
<!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> 权重的叠加</ title>
< style>
ul li {
color : green;
}
li {
color : red;
}
.nav li {
color : pink;
}
</ style>
</ head>
< body>
< ul class = " nav" >
< li> 大猪蹄子</ li>
< li> 大肘子</ li>
< li> 猪尾巴</ li>
</ ul>
</ body>
</ html>
三、CSS盒子模型
1. 边框border
1.1 定义
border : border-width||border-style||border-color
属性 作用 border-width 定义边框粗细,单位是px border-style 边框的样式 border-color 边框颜色
<style>
div {
width: 300px;
height: 200px;
/* border-width 边框的粗细 一般情况下都用 px */
border-width: 5px;
/* border-style 边框的样式 solid 实线边框 dashed 虚线边框 dotted 点线边框*/
border-style: solid;
/* border-style: dashed; */
/* border-style: dotted; */
/* border-color 边框的颜色 */
border-color: pink;
}
</style>
1.2 边框简写
border:1px solid red;没有顺序
//边框分开写法
border-top:1px solid red;//只设定上边框
1.3 边框的合并
border-collapse:collapse// 表示相邻边框合并在一起
2.内边距(Padding)
2.1 定义:
用于设置内边距,边框与内容直接的距离
2.2 特点:
属性 作用 padding-left 左内边距 padding-right 右内边距 padding-top 上内边距 padding-bottom 下内边距
2.3 写法
值得个数 表达意思 padding:5px 1个值,代表上瞎左右都有5像素内边距 padding:5px 10px 2个值,代表上瞎内边距是5像素 左右内边距是10像素 padding:5px 10px 20px 3个值,代表上内边距5像素 左右内边距10像素 下内边距20像素 padding:5px 10px 20px 30px 4个值,上是5像素 右10像素 下20像素 左30像素 (顺时针)
3.外边距(margin)
3.1 定义
控制盒子和贺子之间得距离
3.2 特点
属性 作用 margin-left 左外边距 margin-right 右外边距 margin-top 上外边距 margin-bottom 下外边距
3.3 写法
值得个数 表达意思 margin:5px 1个值,代表上下左右都有5像素外边距 margin:5px 10px 2个值,代表上下外边距是5像素 左右外边距是10像素 margin:5px 10px 20px 3个值,代表上外边距5像素 左右外边距10像素 下外边距20像素 margin:5px 10px 20px 30px 4个值,上是5像素 右10像素 下20像素 左30像素 (顺时针)
3.4 典型应用
常见写法
行内元素或者行内块元素水平居中给其父元素添加text-align:center即可
4.清除内外边距
*{
padding:0;
margin:0;
}
5.圆角边框border-radius
border-radius:length
5.1 特点:
参数值可以为数值或百分比形式 简写属性,可以跟四个值,代表:左上角,右上角,右下角,左下角
<!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> 圆角边框常用写法</ title>
< style>
.yuanxing {
width : 200px;
height : 200px;
background-color : pink;
border-radius : 50%;
}
.juxing {
width : 300px;
height : 100px;
background-color : pink;
border-radius : 50px;
}
.radius {
width : 200px;
height : 200px;
border-top-left-radius : 20px;
background-color : pink;
}
</ style>
</ head>
< body>
1. 圆形的做法:
< div class = " yuanxing" > </ div>
2. 圆角矩形的做法:
< div class = " juxing" > </ div>
3. 可以设置不同的圆角:
< div class = " radius" > </ div>
</ body>
</ html>
6.盒子阴影box-shadow
box-shadow : h-shadow v-shadow blur spread color inset;
值 描述 h-shadow 必须,水平阴影得位置。允许负值 v-shadow 必须,垂直阴影得位置。允许负值 blur 可选。模糊距离 spread 可选。阴影得尺寸 color 可选。阴影得颜色。 inset 可选。将外部阴影(outset)改为内部阴影
注意
默认得是外阴影(outset),但是不可以写这个单词,否则导致阴影失效 盒子阴影不占用空间,不会影响其他盒子排列
7.文字阴影text-shadow
text-shadow:h-shadow v-shadow blur color;
值 描述 h-shadow 必须,水平阴影得位置。允许负值 v-shadow 必须,垂直阴影得位置。允许负值 blur 可选。模糊距离 color 可选。阴影得颜色
四、浮动(float)
1.定义:
float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框得边缘
选择器{float:属性值}
属性值 描述 none 元素不浮动(默认值) left 元素向左浮动 right 元素向右
2.特性
浮动元素会脱离标准流
如果多个盒子都设置了浮动,则他们会按照属性值一行内显示并且顶端对齐排列 浮动元素会具有行内块元素特性
如果块级盒子没有设置宽度,默认宽度和父级一样宽,但是添加浮动后,它得大小根据内容来决定 浮动得盒子中间是没有缝隙得,是紧挨着一起得
3.清除浮动得方法
3.1 额外标签法
<!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> 清除浮动之额外标签法</ title>
< style>
.box {
width : 800px;
border : 1px solid blue;
margin : 0 auto;
}
.damao {
float : left;
width : 300px;
height : 200px;
background-color : purple;
}
.ermao {
float : left;
width : 200px;
height : 200px;
background-color : pink;
}
.footer {
height : 200px;
background-color : black;
}
.clear {
clear : both;
}
</ style>
</ head>
< body>
< div class = " box" >
< div class = " damao" > 大毛</ div>
< div class = " ermao" > 二毛</ div>
< div class = " ermao" > 二毛</ div>
< div class = " ermao" > 二毛</ div>
< div class = " ermao" > 二毛</ div>
< span class = " clear" > </ span>
</ div>
< div class = " footer" > </ div>
</ body>
</ html>
闭合浮动,只让浮动在父盒子内部影响,不影响父盒子外面得其他盒子
3.2 清除浮动 – 父级添加overflow:hidden|auto|scroll
overflow:hidden
3.3 清除浮动 – :after伪元素法
五、定位(position
)
1.定位模式
值 语义 static 静态定位 relative 相对定位 absolute 绝对定位 fixed 固定定位
2.边偏移
边偏移 示例 描述 top top:80px 顶端偏移量,定义元素相对于其父元素上边线得距离 bottom bottom:80px 底部偏移量,定义元素相对于其父元素下边线得距离 left left:80px 左侧偏移量,定义元素相对于其父元素左边线得距离 right right:80px 右侧偏移量,定义元素相对于其父元素右边线得距离
3.相对定位relative
选择器{position:relative}
3.1 特点:
相对于自己原来得位置来移动得
4.绝对定位absolute
4.1 定义:相对于祖先元素来说
选择器{position:absolute}
4.2 特点
如果没有祖先元素或者祖先元素没有定位,则以游览器为准定位 如果祖先元素有定位(相对、绝对、固定),则以最近一级有定位祖先元素为参考点移动位置 绝对定位不再占有原先得位置
5.固定定位fixed
选择器{position:fixed}
5.1 特点:
以游览器得可视窗口为参照点移动元素 跟父元素没有关系 不随滚动条滚动 固定定位不在占有原先得位置
六、元素显示与隐藏(display
)
display:none|block:
七、用户界面样式
7.1 鼠标样式cursor
li{cursor:pointer}
属性值 描述 default 小白默认 pointer 销售 move 移动 text 文本 mot-allwed 禁止
<!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> 用户界面样式-鼠标样式</ title>
</ head>
< body>
< ul>
< li style =" cursor : default; " > 我是默认的小白鼠标样式</ li>
< li style =" cursor : pointer; " > 我是鼠标小手样式</ li>
< li style =" cursor : move; " > 我是鼠标移动样式</ li>
< li style =" cursor : text; " > 我是鼠标文本样式</ li>
< li style =" cursor : not-allowed; " > 我是鼠标禁止样式</ li>
</ ul>
</ body>
</ html>
八、过度(transition
)
transition:要过度得属性 花费时间 运动曲线 合适开始
1.属性
属性:想要变化得css属性,宽度高度 背景颜色 内外边距都可以。如果想要所有得属性都变化过度,写一个all就可以 花费事件:单位是秒(必须写单位) 比如0.5s 运动曲线:默认是ease(可以省略) 合适开始:单位(s) 默认0s
<!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> CSS3 过渡效果</ title>
< style>
div {
width : 200px;
height : 100px;
background-color : pink;
transition : all 0.5s;
}
div:hover {
width : 400px;
height : 200px;
background-color : skyblue;
}
</ style>
</ head>
< body>
< div> </ div>
</ body>
</ html>
案例
1.使用类选择器画盒子
<!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> 利用类选择器画三个盒子</ title>
< style>
.red {
width : 100px;
height : 100px;
background-color : red;
}
.green {
width : 100px;
height : 100px;
background-color : green;
}
</ style>
</ head>
< body>
< div class = " red" > 红色</ div>
< div class = " green" > 绿色</ div>
< div class = " red" > 红色</ div>
</ body>
</ html>
2.新闻案例
<!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>
body {
font : 16px/28px 'Microsoft YaHei' ;
}
h1 {
font-weight : 400;
text-align : center;
}
a {
text-decoration : none;
}
.gray {
color : #888888;
font-size : 12px;
text-align : center;
}
.search {
color : #666;
width : 170px;
}
.btn {
font-weight : 700;
}
p {
text-indent : 2em;
}
.pic {
text-align : center;
}
.footer {
color : #888888;
font-size : 12px;
}
</ style>
</ head>
< body>
< h1> 北方高温明日达鼎盛 京津冀多地地表温度将超60℃</ h1>
< div class = " gray" > 2019-07-03 16:31:47 来源: < a href = " #" > 中国天气网</ a>
< input type = " text" value = " 请输入查询条件..." class = " search" > < button class = " btn" > 搜索</ button>
</ div>
< hr>
< p> 中国天气网讯 今天(3日),华北、黄淮多地出现高温天气,截至下午2点,北京、天津、郑州等地气温突破35℃。预报显示,今后三天(3-5日),这一带的高温天气将继续发酵,高温范围以及强度将在4日达到鼎盛,预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃,其中北京和石家庄的最高气温还有望创今年以来的新高。</ p>
< h4> 气温41.4℃!地温66.5!北京强势迎七月首个高温日</ h4>
< p class = " pic" >
< img src = " images/pic.jpeg" alt = " " >
</ p>
< p> 今天,华北、黄淮一带的高温持续发酵,截至今天下午2点,陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中,北京、天津、郑州均迎来高温日。</ p>
< p> 在阳光暴晒下,地表温度也逐渐走高。今天下午2点,华北黄淮大部地区的地表温度都在50℃以上,部分地区地表温度甚至超过60℃。其中,河北衡水地表温度高达68.3℃,天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。</ p>
< h4> 明日热度再升级!京津冀携手冲击38℃+</ h4>
< p> 中国天气网气象分析师王伟跃介绍,明天(4日),华北、黄淮地区35℃以上的高温天气还将继续升级,并进入鼎盛阶段,高温强度和范围都将发展到最强。 明天,北京南部、天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。</ p>
< p> 不过,专家提醒,济南被雨水天气完美绕开,因此未来一周,当地的高温还会天天上岗。在此提醒当地居民注意防暑降温,防范持续高温带来的各种不利影响。(文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽)</ p>
< p class = " footer" > 本文来源:中国天气网 责任编辑:刘京_NO5631</ p>
</ body>
</ html>
3.小米侧边栏
<!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> 简单版小米侧边栏</ title>
< style>
a {
display : block;
width : 230px;
height : 40px;
background-color : #55585a;
font-size : 14px;
color : #fff;
text-decoration : none;
text-indent : 2em;
line-height : 40px;
}
a:hover {
background-color : #ff6700;
}
</ style>
</ head>
< body>
< a href = " #" > 手机 电话卡</ a>
< a href = " #" > 电视 盒子</ a>
< a href = " #" > 笔记本 平板</ a>
< a href = " #" > 出行 穿戴</ a>
< a href = " #" > 智能 路由器</ a>
< a href = " #" > 健康 儿童</ a>
< a href = " #" > 耳机 音响</ a>
</ body>
</ html>
4.五彩导航栏
<!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> 综合案例-五彩导航</ title>
< style>
.nav a {
display : inline-block;
width : 120px;
height : 58px;
background-color : pink;
text-align : center;
line-height : 48px;
color : #fff;
text-decoration : none;
}
.nav .bg1 {
background : url(images/bg1.png) no-repeat;
}
.nav .bg1:hover {
background-image : url(images/bg11.png) ;
}
.nav .bg2 {
background : url(images/bg2.png) no-repeat;
}
.nav .bg2:hover {
background-image : url(images/bg22.png) ;
}
.nav .bg3 {
background-image : url(images/bg3.png) ;
}
.nav .bg3:hover {
background-image : url(images/bg22.png) ;
}
.nav .bg4 {
background : url("images/bg4.png") no-repeat ;
}
.nav .bg4:hover {
background-image : url(images/bg11.png) ;
}
.nav .bg5 {
background : url("images/bg5.png") no-repeat ;
}
.nav .bg5:hover {
background-image : url(images/bg22.png) ;
}
</ style>
</ head>
< body>
< div class = " nav" >
< a href = " #" class = " bg1" > 五彩导航</ a>
< a href = " #" class = " bg2" > 五彩导航</ a>
< a href = " #" class = " bg3" > 五彩导航</ a>
< a href = " #" class = " bg4" > 五彩导航</ a>
< a href = " #" class = " bg5" > 五彩导航</ a>
</ div>
</ body>
</ html>
5.表格边框的去重
<!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> 今日小说排行榜</ title>
< style>
table {
width : 500px;
height : 249px;
}
th {
height : 35px;
}
table,
td, th {
border : 1px solid pink;
border-collapse : collapse;
font-size : 14px;
text-align : center;
}
</ style>
</ head>
< body>
< table align = " center" cellspacing = " 0" >
< thead>
< tr>
< th> 排名</ th>
< th> 关键词</ th>
< th> 趋势</ th>
< th> 进入搜索</ th>
< th> 最近七日</ th>
< th> 相关链接</ th>
</ tr>
</ thead>
< tbody>
< tr>
< td> 1</ td>
< td> 鬼吹灯</ td>
< td> < img src = " down.jpg" > </ td>
< td> 456</ td>
< td> 123</ td>
< td> < a href = " #" > 贴吧</ a> < a href = " #" > 图片</ a> < a href = " #" > 百科</ a> </ td>
</ tr>
< tr>
< td> 1</ td>
< td> 鬼吹灯</ td>
< td> < img src = " down.jpg" > </ td>
< td> 456</ td>
< td> 123</ td>
< td> < a href = " #" > 贴吧</ a> < a href = " #" > 图片</ a> < a href = " #" > 百科</ a> </ td>
</ tr>
< tr>
< td> 3</ td>
< td> 西游记</ td>
< td> < img src = " up.jpg" > </ td>
< td> 456</ td>
< td> 123</ td>
< td> < a href = " #" > 贴吧</ a> < a href = " #" > 图片</ a> < a href = " #" > 百科</ a> </ td>
</ tr>
< tr>
< td> 1</ td>
< td> 鬼吹灯</ td>
< td> < img src = " down.jpg" > </ td>
< td> 456</ td>
< td> 123</ td>
< td> < a href = " #" > 贴吧</ a> < a href = " #" > 图片</ a> < a href = " #" > 百科</ a> </ td>
</ tr>
< tr>
< td> 1</ td>
< td> 鬼吹灯</ td>
< td> < img src = " down.jpg" > </ td>
< td> 456</ td>
< td> 123</ td>
< td> < a href = " #" > 贴吧</ a> < a href = " #" > 图片</ a> < a href = " #" > 百科</ a> </ td>
</ tr>
< tr>
< td> 1</ td>
< td> 鬼吹灯</ td>
< td> < img src = " down.jpg" > </ td>
< td> 456</ td>
< td> 123</ td>
< td> < a href = " #" > 贴吧</ a> < a href = " #" > 图片</ a> < a href = " #" > 百科</ a> </ td>
</ tr>
</ tbody>
</ table>
</ body>
</ html>
6.新浪导航栏
<!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> 新浪导航</ title>
< style>
.nav {
height : 41px;
border-top : 3px solid #ff8500;
border-bottom : 1px solid #edeef0;
background-color : #fcfcfc;
line-height : 41px;
}
.nav a {
display : inline-block;
height : 41px;
padding : 0 20px;
font-size : 12px;
color : #4c4c4c;
text-decoration : none;
}
.nav a:hover {
background-color : #eee;
color : #ff8500;
}
</ style>
</ head>
< body>
< div class = " nav" >
< a href = " #" > 新浪导航</ a>
< a href = " #" > 手机新浪网</ a>
< a href = " #" > 移动客户端</ a>
< a href = " #" > 微博</ a>
< a href = " #" > 三个字</ a>
</ div>
</ body>
</ html>
7.盒子布局
<!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> 综合案例-产品模块</ title>
< style>
* {
margin : 0;
padding : 0;
}
body {
background-color : #f5f5f5;
}
a {
color : #333;
text-decoration : none;
}
.box {
width : 298px;
height : 415px;
background-color : #fff;
margin : 100px auto;
}
.box img {
width : 100%;
}
.review {
height : 70px;
font-size : 14px;
padding : 0 28px;
margin-top : 30px;
}
.appraise {
font-size : 12px;
color : #b0b0b0;
margin-top : 20px;
padding : 0 28px;
}
.info {
font-size : 14px;
margin-top : 15px;
padding : 0 28px;
}
.info h4 {
display : inline-block;
font-weight : 400;
}
.info span {
color : #ff6700;
}
.info em {
font-style : normal;
color : #ebe4e0;
margin : 0 6px 0 15px;
}
</ style>
</ head>
< body>
< div class = " box" >
< img src = " images/img.jpg" alt = " " >
< p class = " review" > 快递牛,整体不错蓝牙可以说秒连。红米给力</ p>
< div class = " appraise" > 来自于 117384232 的评价</ div>
< div class = " info" >
< h4> < a href = " #" > Redmi AirDots真无线蓝...</ a> </ h4>
< em> |</ em>
< span> 99.9元</ span>
</ div>
</ div>
</ body>
</ html>
8.新闻快报
<!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> 新闻快报模块</ title>
< style>
* {
margin : 0;
padding : 0;
}
li {
list-style : none;
}
.box {
width : 248px;
height : 163px;
border : 1px solid #ccc;
margin : 100px auto;
}
.box h3 {
height : 32px;
border-bottom : 1px dotted #ccc;
font-size : 14px;
font-weight : 400;
line-height : 32px;
padding-left : 15px;
}
.box ul li a {
font-size : 12px;
color : #666;
text-decoration : none;
}
.box ul li a:hover {
text-decoration : underline;
}
.box ul li {
height : 23px;
line-height : 23px;
padding-left : 20px;
}
.box ul {
margin-top : 7px;
}
</ style>
</ head>
< body>
< div class = " box" >
< h3> 品优购快报</ h3>
< ul>
< li> < a href = " #" > 【特惠】爆款耳机5折秒!</ a> </ li>
< li> < a href = " #" > 【特惠】母亲节,健康好礼低至5折!</ a> </ li>
< li> < a href = " #" > 【特惠】爆款耳机5折秒!</ a> </ li>
< li> < a href = " #" > 【特惠】9.9元洗100张照片!</ a> </ li>
< li> < a href = " #" > 【特惠】长虹智能空调立省1000</ a> </ li>
</ ul>
</ div>
</ body>
</ html>