CSS学习之路
CSS的学习
如何学习CSS
- CSS是什么
- CSS怎么用（快速入门）
- CSS选择器（重点+难点）
- 美化网页（文字，阴影，超链接，列表，渐变……）
- 盒子模型
- 浮动
- 定位
- 网页动画
CSS是什么
什么是CSS
Cascading Style Sheet 层叠样式表
CSS：表现（美化网页）
字体，颜色，边距，宽度，高度，背景图片，网页定位，网页浮动……
发展史
CSS1.0
CSS2.0 DIV(块)+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO
CSS2.1 浮动，定位
CSS3.0 圆角，阴影，动画……浏览器兼容性~
练习格式
1、快速入门
注释方法：/**/
style一体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范，<style>可以编写css代码
每一个声明最好使用分号结尾。
语法：
选择器{
声明1;
声明2;
声明3;
}
-->
<style>
h1{
color: red;
}
</style>
</head>
<body>
<h1>我是一级标题</h1>
</body>
</html>
分离
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范，<style>可以编写css代码
每一个声明最好使用分号结尾。
语法：
选择器{
声明1;
声明2;
声明3;
}
<!-- 使用link标签引入CSS文件-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>我是一级标题</h1>
</body>
</html>
CSS文件
h1{
color: red;
}
建议使用分离写法
CSS的优势：
- 内容和表现分离
- 网页结构表现统一，可以实现复用。
- 样式十分丰富。
- 建议使用独立于html的css文件
- 利用SEO，容易被搜索引擎收录。
CSS的三种导入方式
内部样式表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--style标签-->
<style>
h1{
color: red;
}
</style>
</head>
<body>
<h1>一级标题</h1>
</body>
</html>
外部样式表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--使用link标签引入css文件-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>一级标题</h1>
</body>
</html>
/*这是注释*/
h1{
color: red;
}
行内样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--行内样式：在标签元素中，编写一个style属性，编写央样式即可。-->
<h1 style="color: red">一级标题</h1>
</body>
</html>
优先级：
- 行内样式>内部样式 | 外部样式 ❌
- 就近原则 ✔
拓展：外部样式的两种写法
-
链接式
html标签
<!--使用link标签引入CSS文件--> <link rel="stylesheet" href="css/style.css"> -
导入式
@import是CSS2.1特有的
<!--此方法已不常见--> <style> @import url(css/style.css); </style>
2、选择器
作用：选择页面上的某一个或某一类元素
基本选择器
标签选择器：选中一类标签 标签{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器会选择到页面上所有的这个标签的元素*/
h1{
color: #b4e55e;
background: aqua;
border-radius: 5px;
}
p{
font-size: 80px;
}
</style>
</head>
<body>
<h1>HTML</h1>
<h1>CSS</h1>
<p>JavaScript</p>
</body>
</html>
类选择器class：选中所有class属性一致的标签，跨标签 .类名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*类选择器的格式 .class的名称{}
好处,可以选择多个标签,是同一个class可以复用(归类)
*/
.biaoti1{
color: aqua;
}
.biaoti2{
color: blanchedalmond;
}
</style>
</head>
<body>
<h1 class="biaoti1">标题1</h1>
<h1 class="biaoti2">标题2</h1>
<h1 class="biaoti1">标题3</h1>
<p class="biaoti2">p标签</p>
</body>
</html>
ID选择器：全局唯一 #id名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
id选择器:id必须保证全局唯一
#id名称{
}
*/
#biaoti1{
color: #99ff00;
}
.style1{
color: firebrick;
}
h1{
color: #ff1fd0;
}
</style>
</head>
<body>
<h1 id="biaoti1">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>
优先级：不遵循就近原则
ID选择器>类选择器>标签选择器
层次选择器
后代选择器：在某个元素的后面 祖爷爷 爷爷 爸爸 你
/*后代选择器*/
body p{
background: green;
}
子选择器：一代，儿子
/*子选择器*/
body>p{
background: #ff1fd0;
}
相邻兄弟选择器：具有相同父元素，同辈,后面的实现效果，即p，只选中一个
/*相邻兄弟选择器*/
.active + p{
background: red;
}
通用兄弟选择器：当前选中元素的向下的所有元素
/*通用选择器*/
.active~p{
background: #ff1fd0;
}
使用的网页结构图以及源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*p{*/
/* background: green;*/
/*}*/
/*后代选择器*/
/*body p{*/
/* background: green;*/
/*}*/
/*子选择器*/
/*body>p{*/
/* background: #ff1fd0;*/
/*}*/
/*相邻兄弟选择器*/
/*.active + p{*/
/* background: red;*/
/*}*/
/*通用选择器*/
/*.active~p{*/
/* background: #ff1fd0;*/
/*}*/
</style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li><p>p4</p></li>
<li><p>p5</p></li>
<li><p>p6</p></li>
</ul>
</body>
</html>
结构 伪类选择器
伪类：在原来的基础上加上了条件。（带冒号）
index文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--避免使用class，id选择器-->
<style>
/*ul的第一个子元素*/
ul li:first-child{
background: #06ff00;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: red;
}
</style>
</head>
<body>
<a href="#">这是超链接</a>
<h1>标题</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
ul的第一个子元素
ul li:first-child{
background: #06ff00;
}
ul的最后一个子元素
ul li:last-child{
background: red;
}
选中p2:定位到父元素，选择当前的第二个元素，选择当前p元素的父级元素，选中父级元素的第二个，并且是当前元素才生效！，此方法把标题作为第一个元素
/*选中父元素下的第二个p元素，按顺序，不分类型*/
p:nth-child(2){
background: aqua;
}
选中p2:定位到父元素，选择当前的第二个元素，选择当前p元素的父级元素，选中父级元素的第二个p元素，此方法把标题作为第p1个元素
/*选中父元素下的p元素的第二个，按类型*/
p:nth-child(2){
background: aqua;
}
鼠标移动上去变背景颜色
a:hover{
background: #ff1fd0;
}
属性选择器（常用）
把id和class进行了结合
index文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: blue;
text-align: center;
color: gainsboro;
text-decoration: none;
margin-right: 10px;
font: bold 20px/50px Arial;
}
/*属性名，属性名=属性值（可用正则）
=:绝对等于
*=：包含等于
^=：以这个开头
$=：以这个结尾
*/
/*存在id属性的元素a[id]{}*/
a[id]{
background: yellow;
}
/*选中id属性为first的元素*/
a[id="first"]{
background: green;
}
/*选中class中含有links的元素*/
a[class*="links"]{
background: red;
}
/*选中href中以http开头的元素*/
a[href^=http]{
background: #ff1fd0;
}
/*选中以png结尾的文件*/
a[href$=png]{
background: firebrick;
}
</style>
</head>
<body>
<p class="demo">
<a href="https://www.baidu.com" class="links item first" id="first">1</a>
<a href="#" class="links item active" target="_blank" title="test">2</a>
<a href="images/123.html" class="links item">3</a>
<a href="images/123.png" class="links item">4</a>
<a href="images/123.jpg" class="links item">5</a>
<a href="abc" class="links item last">6</a>
<a href="/a.png" class="links item last">7</a>
<a href="/abc.png" class="links item last">8</a>
<a href="abc.doc" class="links item last">9</a>
<a href="abcd.doc" class="links item last">10</a>
</p>
</body>
</html>
属性选择器格式：
属性名，属性名=属性值（可用正则）
= ：绝对等于
*= ：包含等于
^= ：以这个开头
$= ：以这个结尾
例子：
存在id属性的a元素
a[id]{
background: yellow;
}
选中id属性为first的a元素
a[id="first"]{
background: green;
}
选中class中含有links的a元素
a[class*="links"]{
background: red;
}
选中href中以http开头的a元素
a[href^=http]{
background: #ff1fd0;
}
选中href中以png结尾的a元素
a[href$=png]{
background: firebrick;
}
3、美化网页元素
为什么要美化
- 有效的传递页面信息
- 美化页面，页面漂亮才能吸引用户
- 凸显页面主题
- 提高用户的体验
span标签：重点要突出的字使用span标签套起来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#title1{
font-size: 50px;
}
</style>
</head>
<body>
欢迎学习 <span id="title1">CSS3</span>
</html>
字体样式
index文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
color：字体颜色
font-family:字体
font-size:字体大小
font—weigth:调整字体的粗细
bold：粗的
bolder：更粗的
lighter：更细的
normal：正常的
也可用数值，数值最高1000
*/
body{
font-family: "Arial Black" , 楷体;
color: #ff1fd0;
}
h1{
font-size: 50px;
}
.p1{
font-weight: bold;
}
</style>
</head>
<body>
<h1>故事介绍</h1>
<p class="p1">平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>
<p>在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。 [1]
</p>
<p>Let me not to the marriage of true mindsAdmit impediments. Love is not loveWhich alters when it alteration finds,Or bends with the remover to remove:
</p>
</body>
</html>
本节重点
color：字体颜色
font-family:字体
font-size:字体大小
font—weigth:调整字体的粗细
bold：粗的
bolder：更粗的
lighter：更细的
normal：正常的
也可用数值，数值最高1000
补充：也可以把字体样式卸在一行
/*字体风格*/
p{
font: oblique bold 12px/80px "楷体" ;
}
其中oblique是斜体（字体风格），bold是粗体（字体粗细），12px是字体大小，80px是行高，楷体为字体。
文本样式
index.php文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
颜色：
单词
RGB 0~f
RGBA A:(0~1)
text-align: center; 排版，居中
text-indent: 2em; 段落首行缩进
line-height: 300px; 行高，和块的高度一致就可以实现垂直居中
*/
h1{
color: rgba(0,255,255,0.5);
text-align: center;
}
.p1{
text-indent: 2em;
}
.p3{
background: blue;
height: 300px;
line-height: 300px;
}
.l1{
/*下划线*/
text-decoration: underline;
}
.l2{
/*删除线*/
text-decoration: line-through;
}
.l3{
/*上划线*/
text-decoration: overline;
}
a{
/*超链接去下划线*/
text-decoration: none;
}
/*文本与图片水平对齐
vertical-align对齐是有一个参照的概念
*/
img,span{
/*center是水平的概念，middle才是上中下的概念*/
vertical-align: middle;
}
</style>
</head>
<body>
<a href="#">超链接去下划线</a>
<p class="l1">123123</p>
<p class="l2">123123</p>
<p class="l3">123123</p>
<h1>故事介绍</h1>
<p class="p1">平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>
<p>在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。 [1]
</p>
<p class="p3">Let me not to the marriage of true mindsAdmit impediments. Love is not loveWhich alters when it alteration finds,Or bends with the remover to remove:
</p>
<p>
<img src="images/test.png" alt="test">
<span>12312314335456675</span>
</p>
</body>
</html>
颜色----------------color、rgb、rgba
/*
颜色：
单词
RGB 0~f
RGBA A:(0~1)
*/
h1{
color: rgba(0,255,255,0.5);
}
文本对齐方式---------text-align:center
/*text-align: center; 排版，居中*/
h1{
text-align: center;
}
首行缩进-------------text-indent:2em
/*text-indent: 2em; 段落首行缩进*/
.p1{
text-indent: 2em;
}
行高-----------------line-height:
/*line-height: 300px; 行高，和块的高度一致就可以实现垂直居中*/
line-height: 300px;
}
单行文字上下居中------line-height:height
/*
text-indent: 2em; 段落首行缩进
line-height: 300px; 行高，和块的高度一致就可以实现垂直居中
*/
.p3{
background: blue;
height: 300px;
line-height: 300px;
}
装饰-----------------text-decoration:
.l1{
/*下划线*/
text-decoration: underline;
}
.l2{
/*删除线*/
text-decoration: line-through;
}
.l3{
/*上划线*/
text-decoration: overline;
}
a{
/*超链接去下划线*/
text-decoration: none;
}
文本图片水平对齐------vertical-align:middle
/*文本与图片水平对齐
vertical-align对齐是有一个参照的概念
*/
img,span{
/*center是水平的概念，middle才是上中下的概念*/
vertical-align: middle;
}
阴影
/*阴影颜色，阴影位置，模糊半径*/
#price{
text-shadow: #00fffd 10px 10px 2px;
}
超链接伪类
正常情况下只用a，a:hover
/*默认的颜色*/
a{
text-decoration: none;
color: #000000;
}
/*鼠标悬浮的颜色（只需记住hover）*/
a:hover{
color: orange;
}
/*鼠标按住未释放的状态*/
a:active{
color: green;
font-size: 50px;
}
/*访问后（不管用）*/
/*a:visited{*/
/* color: blue;*/
/*}*/
列表样式
index文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="nav">
<h2 class="title">全部商品分类</h2>
<ul>
<li><a href="#">图书</a> <a href="#"> 音像</a> <a href="#" >数字商品</a></li>
<li><a href="#" >家用申器</a> <a href="#"> 手机</a>  ; <a href= "#" >数碍</a></li>
<li><a href="#" >屯脳</a> <a href="#">亦公</a></li>
<li><a href= "#" >家居</a> <a href=" #" >家装</a> <a href="#" >厨具</a></li>
<li><a href="#" >服怖鞋帽</a> <a href="#"> 个抉化妝</a></li>
<li><a href=" #">礼品箱包</a> <a href=" #">中表</a> <a href="#" >珠宝</a></li>
<li><a href="#">食 品欲料</a> <a href="#">保健食品</a></li>
<li><a href=" #" >彩票</a> <a href=" #" >旅行</a> <a href=" #" >充値</a> <a href="#">票各</a></li>
</ul>
</div>
</body>
</html>
css文件
#nav{
width: 300px;
background: #a0a0a0;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 2em;
line-height: 35px;
background: red;
}
/*ul li
list-style:
none 去掉圆点
circle 空心圆
decimal 数字
square 正方形
*/
ul{
background:#a0a0a0;
}
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color: orange;
text-decoration: underline;
}
背景
背景颜色
div{
background: red;
}
背景图片
/*设置背景图片，默认为平铺*/
div{
background-image: url("iamges/tx.jpg");
}
/*沿X、y轴方向平铺、水平*/
div{
background-repeat: repeat-x;
}
/*沿y轴方向平铺、垂直*/
div{
background-repeat: repeat-y;
}
/*不平铺*/
div{
background-repeat: no-repeat;
}
综合
/*颜色， 图片，图片位置，平铺方式*/
div{
background: red url("../images/a.gif") 200px 10px no-repeat;
}
ul li{
background-image: url("../images/r.gif");
background-position: 200px 2px;
}
练习
渐变
/*径向渐变、圆形渐变*/
body{
background-image: linear-gradient(19deg, #21ddfd 0%,#b721ff 100%);
}
/*一样*/
body{
background: linear-gradient(19deg, #21ddfd 0%,#b721ff 100%);
}
4、盒子模型
index文件
<div class="box">
<h2>登陆页面</h2>
<form>
<div>
<span>用户名：</span>
<input type="text">
</div>
<div>
<span>密码：</span>
<input type="text">
</div>
</form>
</div>
css文件
/*一般网页有默认的外边距和内边距，我们为了不受到它的影响需要将她们清除*/
h1,ul,li,a,body{
margin: 0;
padding: 0;
text-decoration: none;
}
/*border:粗细，样式，颜色*/
#box{
width: 300px;
border: 1px solid red;
}
h2{
font-size: 16px;
background-color: #3cbda6;
line-height: 30px;
color: white;
}
form{
background: #3cbda6;
}
div:nth-of-type(1) input{
border: 3px solid black;
}
div:nth-of-type(2) input{
border: 3px dashed yellow;
}
div:nth-of-type(3) input{
border: 3px solid black;
}
- margin：外边距
- border：边框
- padding：内边距
边框：
div:nth-of-type(1) input{
border: 3px solid black;
}
外边距
/*居中*/
#box{
margin: 0 auto;
}
内边距
/*顺序依次是上右下左，即顺时针旋转*/
#box{
padding: 1 2 3 4;
}
盒子大小计算方式：
margin+boder+padding+内容
圆角边框
/*正圆，border-radius=height/2+1=width/2+1*/
div{
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 100px;
}
/*扇形（四分之一圆）*/
div {
height: 100px;
width: 100px;
border: 1px solid red;
border-radius: 100px 0 0 0;
}
/*半圆*/
div {
height: 50px;
width: 100px;
border: 1px solid red;
border-radius: 50px 50px 0 0;
}
/*border-radius四个参数分别是左上角半径、右上角半径、有下角半径、左下角半径*/
盒子阴影
div{
width: 100px;
height: 100px;
border: 10px solid red;
box-shadow: 10px 10px 100px yellow;
text-align: center;
}
/*box-shadow: 水平移动、垂直移动、模糊半径、阴影颜色*/
img{
border-radius: 50px;
box-shadow: 10px 10px 100px yellow;
}
不要重复造轮子
5、浮动
概念：标准文档流
display概念：
块级元素：独占一行
例：h1~h6 div 列表 p
行内元素：不独占一行，好多元素可以放在同一行
例：span a img strong···
行内元素可以被包含在块元素中，反之不行
/*
display常用的三个值
block 块元素
inline-block 行内块元素，保持块元素的特性，也可以写在一行
inline 行内元素
none 消失
*/
div{
height:100px;
width:100px;
border:1px solid red;
display:inline-block;
}
浮动
div{
float:left;
}
/*出现问题：
缩放网页时浮动元素会进行重新排版，解决办法clear属性
这时候div既有浮动的效果，也有块元素的特性，不会乱飘了
*/
div{
float:left;
clear:both；
}
解决父级边框塌陷问题
clear属性
left：左侧不允许有浮动
right：右侧不允许有浮动
both：两侧都不允许有浮动
方法一、给父级元素设置固定高度
方法二、添加一个空的div标签,并给他设置clear：both,清除浮动
.clear{
clear:both;
margin:0;
padding:0;
}
<div class="clear"></div>
方法三、在父级元素中增加一个overflow:hidden;属性
overflow属性：
scroll:超出部分使用滚动条进行显示
hidden: 超出部分内容进行隐藏、修剪
#father{
border: 1px #000 solid;
overflow: hidden;
}
方法四、给父类添加一个伪类（推荐使用）
优点：避免了增加html代码
#father:after{
content: '';
displaty: block;
clear: both;
}
6、定位
分为相对定位和绝对定位
相对定位
相对于本身原来的位置进行位移
posttion: relative;相对于原来的位置，进行指定的偏移，他仍然在标准文档流中，原来的位置会被抱保留
#first{
background-color: #a13d30;
border: 1px solid #ff0000;
/*相对于原来的位置，向上移动20px，向左移动20px*/
posttion: relative;
top: -20;
left: -20;
/*距离下面10px,右边 20px*/
bottom： 10px;
right: 20px;
}
练习：
<style>
ul{
padding:5px;
border: 1px solid yellow;
width: 300px;
height: 300px;
}
ul li{
background-color:red;
list-style: none;
margin:0;
padding:0;
position: relative;
height:100px;
width:100px;
text-align: center;
line-height: 100px;
}
ul li:hover{
background-color:blue;
}
li:nth-of-type(2){
top:-100px;
left:200px;
}
li:nth-of-type(4){
top:-100px;
left:200px;
}
li:nth-of-type(5){
top:-300px;
left:100px;
}
a{
color: black;
text-decoration: none;
}
</style>
<div>
<ul>
<li><a href="#">链接1</a></li>
<li><a href="#">链接2</a></li>
<li><a href="#">链接3</a></li>
<li><a href="#">链接4</a></li>
<li><a href="#">链接5</a></li>
</ul>
</div>
绝对定位
position:absolute;
相对于父级或浏览器进行指定的偏移，因为他不在标准文档流中，所以原来的位置不会被保留；
- 没有给父元素设置定位的情况下，相对于浏览器定位；
- 若给父级元素设置了相对定位即给父元素添加属性position：relative;则会相对于父级元素进行定位
- 使用绝对定位不能超出父级元素，即一般不能将top、left等设置为负数
例：相对于浏览器
/*将父元素下的第一个div固定在body的右下角*/
div:nth-of-type(1){
width:100px;
htight:100px;
background: red;
position: absolute;
right:0;
bottom:0;
}
固定定位
/*将父元素下的第一个div固定在浏览器的的右下角*/
div:nth-of-type(1){
width:100px;
htight:100px;
background: red;
position: absolute;
right:0;
bottom:0;
}
z-index
将它与PS中的图层一块理解,从0~999值越大图层就越往上
div:nth-of-type(1){
width:100px;
htight:100px;
background: red;
z-index:999;
}
透明
属性
opacity:0.2;
或（IE8及以前的版本支持）
filter:alpha(opacity=50)；
浙公网安备 33010602011771号