CSS的学习
标注:通过学习b站上博主狂神说java的视频做的笔记。
如何学习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;
}
安利一个好看的渐变网站:https://www.grabient.com
练习
渐变
/*径向渐变、圆形渐变*/
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及以前的版本支持)
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值越大图层就越往上
[外链图片转存中…(img-W09vAcFG-1608625437684)]
div:nth-of-type(1){
width:100px;
htight:100px;
background: red;
z-index:999;
}
透明
属性
opacity:0.2;
或(IE8及以前的版本支持)
filter:alpha(opacity=50);