CSS简介
CSS简介
什么是CSS
层叠样式表，给HTML标签添加样式的，让它变的更加的好看
CSS注释
# 注释
/*单行注释*/
/*
多行注释1
多行注释2
多行注释3
*/
通常我们在写css样式的时候也会用注释来划定样式区域(因为HTML代码多所以对应的css代码也会很多)
/*这是博客园首页的css样式文件*/
/*顶部导航条样式*/
...
/*左侧菜单栏样式*/
...
/*右侧菜单栏样式*/
CSS语法结构
选择器 {
属性1:值1;
属性2:值2;
属性3:值3;
属性4:值4;
}
CSS的三种引入方式
1.style标签内部直接书写(教学演示方便用第一种)
<style>
h1 {
color: burlywood;
}
</style>
2.link标签引入外部css文件(最正规的方式 解耦合)
<link rel="stylesheet" href="test1.css">
3.行内式（一般不用，偶尔临时用一下）
<h1 style="color: green">老板好 要上课吗?</h1>
CSS学习流程
1.先学如何查找标签
css查找标签的方式，一定要学会
因为后面所有的框架封装的查找语句都是基于css来的
css选择器很简单很好学不要有压力!!!
2.之后再学如何添加样式
CSS选择器
代码准备
<!DOCTYPE html>
<html lang="en" xmlns:background="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
</head>
<body>
<div id="d1" class="c1">div
<p>div中的p</p>
<span>div中的span</span>
</div>
<p id="d2" class="c1">ppp</p>
<span id="d3" class="c1 c2">span11</span>
<span id="d4" class="c3">span22</span>
</body>
</html>
基本选择器
id选择器
#id值 {
/*找到id值对应的标签，对其样式进行渲染*/
}
/*id为d1的标签的字体颜色变成deeppink*/
<style>
#d1{
color: deeppink;
}
</style>
类选择器
.class值{
/*找到包含class值的标签，对其样式进行渲染*/
}
/*class值包含c1的将字体颜色变为greenyellow*/
<style>
.c1{
color: greenyellow;
}
</style>
元素/标签选择器
标签名 {
/*找到所有的指定标签名，对其样式进行渲染*/
}
/*将所有span标签字体颜色全部变成 blanchedalmond*/
<style>
span{
color: blanchedalmond;
}
</style>
通用选择器
*{
/*将html文档内所有标签修改为一种样式*/
}
/*将html文档内所有标签内字体颜色全部变成 blanchedalmond*/
<style>
* {
color: blueviolet;
}
</style>
组合选择器
在前端中，我们将标签的嵌套用亲戚关系表述层级
代码准备
<!DOCTYPE html>
<html lang="en" xmlns:background="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
</head>
<body>
<span>span1</span>
<span>span2</span>
<div>div
<p>div中的p</p>
<p>div p
<span>div p span</span>
</p>
<span>div span</span>
</div>
<span>span1</span>
<span>span2</span>
</body>
</html>
后代选择器
空格表示后代选择器
/*div内部的span标签变成红色，div与span之间的空格表示后代关系*/
<style>
div span {
color: red;
}
</style>
儿子选择器
>表示儿子关系，内部第一层
/*只将div的儿子层级的sapn标签变成红色*/
<style>
div > span {
color: red;
}
</style>
毗邻选择器
+表示毗邻关系，毗邻关系：同级别紧挨着的下一个标签
/*将紧挨着div的同级别的span标签样式变成红色*/
<style>
div + span {
color: red;
}
</style>
弟弟选择器
~表示弟弟关系，弟弟关系：同级别的所有标签
/*将div同级别的所有标签样式变成红色*/
<style>
div ~ span {
color: red;
}
</style>
属性选择器
代码准备
<!DOCTYPE html>
<html lang="en" xmlns:background="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
</head>
<body>
<input type="text" username>
<input type="text" username="jason">
<input type="text" username="egon">
<p username="tank">水箱老师</p>
<div username="egon">一根老师</div>
<span username="jason">jason</span>
</body>
</html>
含有某个属性的标签
[属性名]{
/*将所有含有指定属性名的标签将其样式进行渲染*/
}
/*将所有含有属性名是username的标签背景色改为红色*!*/
<style>
[username]{
background: greenyellow;
}
</style>
含有某个属性并且有某个值
[属性名=值]{
/*找到所有指定属性名=某个属性值的标签，对其样式进行渲染*/
}
/*找到所有属性名是username并且属性值是jason的标签*/
<style>
[username='jason']{
background: greenyellow;
}
</style>
含有某个属性并且有某个值的某个标签
标签名[属性名=值]{
/*找到所有指定属性名=某个属性值的指定的标签名，对其样式进行渲染*/
}
/*找到所有属性名是username并且属性值是jason的input标签*/
<style>
input[username='jason']{
background: greenyellow;
}
</style>
分组嵌套
当几个标签的样式相同时，可以进行进行分组，用逗号隔开，使用同一种样式
选择器可以混合使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1,.c1 {
color:red;
}
</style>
</head>
<body>
<div>div
<span class="c1">div span</span>
</div>
<span>span</span>
<h1 id="h1">哈哈</h1>
</body>
</html>
伪类选择器
表示标签的状态，例如a标签默认没被点过是蓝色，点击不松手是红色，点击后是紫色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
background: blanchedalmond;
}
/*链接初始颜色*/
a:link {
color:red;
}
/*鼠标悬浮在链接上，链接的颜色*/
a:hover{
color:blue;
}
/*点击链接不松手，链接的颜色*/
a:active{
color: aquamarine;
}
/*链接点击后，链接的文本颜色*/
a:visited{
color:darkgray;
}
/*鼠标悬浮在文本上显示的颜色*/
p:hover {
color: crimson;
}
/*input框获取焦点(鼠标点了input框)*/
input:focus {
color: crimson;
background: black;
}
</style>
</head>
<body>
<a href="http://www.cat.com">点我送你花</a>
<p>笑哈哈</p>
focus:<input type="text">
</body>
</html>
伪元素选择器
在标签开始/结尾添加样式，类似于CSS添加样式的效果
可以添加文本内容，但是添加的内容无法选中
before和after通常都是用来清除浮动带来的影响:父标签塌陷的问题(后面马上讲)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:first-letter {
/*段落第一个字的样式*/
font-size: 48px;
color: fuchsia;
}
p:before {
/*文本开头，CSS添加样式，内容无法选中*/
content: "李白";
color: green;
}
p:after {
/**文本末尾，CSS添加样式，内容无法选中*/
content: 'who?';
color: green;
font-size: 50px;
}
</style>
</head>
<body>
<p>我醉欲眠卿且去，明朝有意抱琴来</p>
</body>
</html>
选择器的优先级
对比：id选择器 类选择器 标签选择器 行内式的优先级
- 选择器相同，书写顺序不同时
就近原则：哪个选择器离标签最近，就选择使用哪个选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="test1.css">
<style>
p {
color: green;
}
</style>
</head>
<body>
<p style="color: blue">我醉欲眠卿且去，明朝有意抱琴来</p>
</body>
</html>
teat1.css
p {
color: red;
}
- 选择器不同时
行内 > id选择器 > 类选择器 > 标签选择器
精确度越高越有效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="test1.css">
<style>
#i1 {
color: blue;
}
.c1 {
color: green;
}
p {
color: indigo;
}
</style>
</head>
<body>
<p id="i1" class="c1" style="color: red">我醉欲眠卿且去，明朝有意抱琴来</p>
</body>
</html>
CSS属性相关（操作标签样式）
标签设置长宽及背景颜色
块级标签：宽度不修改的情况下默认占浏览器一整行，块级标签的高度也是取决与标签内部的文本的高度，也可以通过CSS设置
行内标签：宽度和高度都是由内部文本决定的，行内标签是无法设置长宽的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
background: blanchedalmond;
height: 500px;
width: 500px;
}
span {
/*行内标签无法设置长宽，就算设置了，也不会生效*/
background: darkgray;
height: 30px;
width: 20px;
}
</style>
</head>
<body>
<p>ppp</p>
<span>span</span>
</body>
</html>
字体属性
p {
/*font-family: "Arial Black","微软雅黑","..."; !*第一个不生效就用后面的 写多个备用*!*/
/*font-size: 24px; !*字体大小*!*/
/*font-weight: inherit; !*bolder lighter 100~900 inherit继承父元素的粗细值*!*/
/*color: red; !*直接写颜色英文*!*/
/*color: #ee762e; !*颜色编号*!*/
/*color: rgb(128,23,45); !*三基色 数字 范围0-255*!*/
/*color: rgba(23, 128, 91, 0.9); !*第四个参数是颜色的透明度 范围是0-1*!*/
/*当你想要一些颜色的时候 可以利用现成的工具
1 pycharm提供的取色器
2 qq或者微信截图功能
也可以多软件结合使用
*/
}
文本属性
- text-align
- text-decoration
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
/*文本居中*/
text-align: center;
/*文本居左*/
/*text-align: left;*/
/*文本居右*/
/*text-align: right;*/
/*文本两端对齐*/
/*text-align: justify;*/
/*文本添加下划线*/
/*text-decoration: underline;*/
/*文本添加上划线*/
/*text-decoration: overline;*/
/*文本添加删除线*/
/*text-decoration: line-through;*/
/*文本首行缩进*/
text-indent：2em
}
a {
/*主要用于给链接去掉下划线*/
text-decoration: none;
}
</style>
</head>
<body>
<p>背着一个大竹筐</p>
<p>噻罗罗</p>
<a href="http://www.baidu.com">click</a>
</body>
</html>
背景图片
- 涉及知识
图片的url:可以是本地地址，也可以是网络地址
属性名简写的条件：多个属性名前缀名相同，可以只写前缀以及对应的属性值。
background-attachment: fixed; 背景图片固定，不会因为页面滚动而重复
background-repeat: no-repeat; 图片不会平铺，只显示一张
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1 {
background: red;
height: 500px;
}
#i2 {
background: green;
height: 500px;
}
/*#i3 {*/
/* background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589367551396&di=53b76e3671e900b3c5702669ed03f9c7&imgtype=0&src=http%3A%2F%2Fimage.biaobaiju.com%2Fuploads%2F20180302%2F14%2F1519972718-FXVPnLlDtJ.jpg")*/
/*;*/
/* height: 500px;*/
/* !*背景图片固定，不会因为页面滚动而重复*!*/
/* background-attachment: fixed;*/
/* !*图片不会平铺，只显示一张*!*/
/* background-repeat: no-repeat;*/
/* !*图片x方向平铺，*!*/
background-repeat:repeat-x;
/* !*图片y方向平铺，*!*/
background-repeat:repeat-y;
/*在调整样式的时候，可以借助浏览器快速微调，然后将调整好的参数修改到CSS样式中*/
background-position:0 0;
/*}*/
/*#i3可以简写*/
#i3 {
background: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589367551396&di=53b76e3671e900b3c5702669ed03f9c7&imgtype=0&src=http%3A%2F%2Fimage.biaobaiju.com%2Fuploads%2F20180302%2F14%2F1519972718-FXVPnLlDtJ.jpg") fixed no-repeat ;
height: 500px;
}
#i4 {
background: blueviolet;
height: 500px;
}
</style>
</head>
<body>
<div id="i1"></div>
<div id="i2"></div>
<div id="i3"></div>
<div id="i4"></div>
</body>
</html>
边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
/*!*p标签的背景色*!*/
/*background: red;*/
/*!*p标签边框的宽度*!*/
/*border-width: 5px;*/
/*!*边框的样式*!*/
/*border-style: solid;*/
/*!*边框的颜色*!*/
/*border-color: aquamarine;*/
/*上述属性名及属性值可以简写*/
background: red;
border:5px solid aquamarine
}
#d1 {
border-left-width: 5px;
border-left-color: red;
border-left-style: dotted;
border-right-width: 10px;
border-right-color: greenyellow;
border-right-style: solid;
border-top-width: 15px;
border-top-color: deeppink;
border-top-style: dashed;
border-bottom-width: 10px;
border-bottom-color: tomato;
border-bottom-style: solid;
}
#d2 {
background: black;
border: 5px red dotted;
width:400px;
height:600px;
/*画圆，如果长款不相等，就是椭圆，大于等于50%是椭圆/圆形，小于50%是圆角形状，*/
border-radius: 80%;
}
</style>
</head>
<body>
<p>从前有只(⊙﹏⊙)</p>
<div id="d1">div</div>
<div id="d2">我想画个圆</div>
</body>
</html>
display属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
background: red;
height: 100px;
width:200px;
/*p标签具有行内标签的特点*/
display:inline;
}
#d1 {
background: green;
height: 100px;
width:200px;
/*div标签具有行内标签的特点*/
display: inline;
/*隐藏，并且原来的位置也没了*/
display:none;
/*只隐藏，位置还在*/
visibility:hidden
}
span {
background: blue;
height: 100px;
width:200px;
/*span标签具有块级标签的属性*/
display: block;
}
#p1 {
background: aquamarine;
height: 100px;
width:100px;
/*p标签具有行内标签的特点又可以在一行内设置长宽*/
display: inline-block;
}
</style>
</head>
<body>
<p>从前有只(⊙﹏⊙)</p>
<p id="p1">p具有块级标签的特点</p>
<div id="d1">div</div>
<span>span</span>
</body>
</html>
盒子模型
就以快递盒为例
快递盒与快递盒之间的距离(标签与标签之间的距离 margin外边距)
盒子的厚度(标签的边框 border)
盒子里面的物体到盒子的距离(内容到边框的距离 padding内边距)
物体的大小(内容 content)
如果你想要调整标签与标签之间的距离 你就可以调整margin
浏览器会自带8px的margin，一般情况下我们在写页面的时候，就会先将body的margin去除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
/*上下左右的外边距都是0*/
/*margin: 0;*/
/*第一个上下外边距，第二个左右外边距*/
/*margin: 10px 20px;*/
/*第一个上外边距，第二个左右外边距，第三个下外边距*/
/*margin: 10px 20px 30px;*/
/*上 右 下 左*/
margin: 10px 20px 30px 40px;
}
#d1 {
margin-left: 10px;
margin-bottom: 20px;
margin-right: 30px;
margin-top: 40px;
}
/*两个标签挨着，上一个标签的下外边距与下一个标签的上外边距都有值的时候，不会叠加*/
#d2 {
margin-bottom: 30px;
}
#d3 {
margin-top:15px;
}
#d4 {
/*标签的水平居中*/
margin: 0 auto;
}
#d6 {
border:5px red solid;
/*padding用法与margin相同*/
padding:10px
}
</style>
</head>
<body>
<p id="d1">p</p>
<p id="d2">p1</p>
<p id="d3">p2</p>
<div id="d4">div
<span>div span</span>
</div>
<span id="d5">span</span>
<p id="d6">pppppp</p>
</body>
</html>
浮动float
- 浮动的元素 没有块儿级一说 本身多大浮起来之后就只能占多大
- 只要是设计到页面的布局一般都是用浮动来提前规划好
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
background: pink;
height: 200px;
width:200px;
/*浮动 浮到空中往左飘*/
float:left;
}
#d2 {
background: red;
height: 200px;
width: 200px;
/*浮动 浮到空中往左飘*/
float:right;
}
</style>
</head>
<body>
<div id="d1">d1</div>
<div id="d2">d2</div>
</body>
</html>
- 浮动带来的影响
浮动会带来父标签塌陷的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin:0;}
#d1{
border:3px solid black;
}
#d2 {
height: 100px;
width:100px;
background: hotpink;
float: left;
}
#d3 {
height: 100px;
width:100px;
background:green;
float: left;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
<div id="d3"></div>
</div>
</body>
</html>
- 解决浮动带来的影响
推导步骤
1：低配版---自己加一个div，设置高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin:0;}
#d1{
border:3px solid black;
}
#d2 {
height: 100px;
width:100px;
background: hotpink;
float: left;
}
#d3 {
height: 100px;
width:100px;
background:green;
float: left;
}
/* 解决方式1*/
#d4 {
height: 100px;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
</div>
</body>
</html>
2：中配版：clear:该标签的左边（地面和空中）不能有浮动的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin:0;}
#d1{
border:3px solid black;
}
#d2 {
height: 100px;
width:100px;
background: hotpink;
float: left;
}
#d3 {
height: 100px;
width:100px;
background:green;
float: left;
}
/* 解决方式2*/
#d4 {
clear:left;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
</div>
</body>
</html>
3：终极版：通用的解决浮动带来的影响---专业解决方式
写html页面之前，先提前写好处理浮动带来的影响的 css代码
.clearerfix:after {
content: "";
display: block;
clear: both;
}
之后只要标签出现了塌陷的问题就给该塌陷的标签加一个clearfix属性即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin:0;}
#d1{
border:3px solid black;
}
#d2 {
height: 100px;
width:100px;
background: hotpink;
float: left;
}
#d3 {
height: 100px;
width:100px;
background:green;
float: left;
}
/* 解决方式3*/
.clearerfix:after {
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div id="d1" class="clearerfix">
<div id="d2"></div>
<div id="d3"></div>
</div>
</body>
</html>
溢出属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
height: 100px;
width:50px;
border:3px solid red;
/*默认就是visible,溢出还是溢出*/
/*overflow: visible;*/
/*超出的部分直接隐藏*/
/*overflow: hidden;*/
/*设置成上下滚动条的形式*/
/*overflow: scroll;*/
/*和滚动效果差不多*/
/*overflow: auto;*/
}
</style>
</head>
<body>
<p>采蘑菇的小姑娘采蘑菇的小姑娘采蘑菇的小姑娘采蘑菇的小姑娘采蘑菇的小姑娘采蘑菇的小姑娘采蘑菇的小姑娘采蘑菇的小姑娘</p>
</body>
</html>
- 溢出属性应用---圆形头像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin:0;
background: #4e4e4e;
}
#d1{
height: 120px;
width:200px;
border-radius: 50%;
border: 5px solid white;
margin:0 auto;
overflow: hidden;
}
#d1>img {
/*占标签的100%比例*/
/*max-width: 100%;*/
width:100%
}
</style>
</head>
<body>
<div id="d1">
<img src="头像.jpg" alt="">
</div>
</body>
</html>
定位
静态
所有的标签默认都是静态（static）的，无法改变位置
相对定位
相对(relative)于标签原来的位置做移动
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin:0;
}
#d1 {
height:100px;
width:100px ;
background: deeppink;
/*从左往右移动50px 如果是负数方向相反*/
left: 50px;
/*从上往下移动50px 如果是负数方向相反*/
top: 50px;
/*默认是static,静态，无法修改位置*/
/*position: static;*/
/*改为相对定位，标签由static变为relative它的性质就从原来美誉定位的标签变成已经定位过的标签，哪怕你没有动，性质也改变了*/
position: relative;
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
绝对定位（常用）
相对于已经定位过的父标签做移动，如果没有父标签那么就以body为参照
参照实例：小米购物车
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin:0;
}
#d2 {
height: 100px;
width: 200px;
background: hotpink;
/*父标签定位操作*/
position: relative;
}
#d3 {
height: 200px;
width: 400px;
background: green;
position:absolute;;
/*left:200px;*/
top:100px
}
</style>
</head>
<body>
<div id="d2">
<div id="d3"></div>
</div>
</body>
</html>
固定定位（常用）
相对于浏览器窗口固定在某个位置
参照实力：小米侧人工服务等
当不知道页面其他标签的位置和参数，只给了父标签的参数，基于该标签做定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin:0;
}
#d4 {
/*写了fixed之后，定位就是依据浏览器串口*/
position: fixed;
bottom: 20px;
right: 20px;
height: 50px;
width: 100px;
background: hotpink;
border: 3px solid black;
}
</style>
</head>
<body>
<div style="height: 500px;background: red"></div>
<div style="height: 500px;background: black"></div>
<div style="height: 500px;background: green"></div>
<div id="d4">回到顶部</div>
</body>
</html>
扩展
浏览器是优先展示文本内容，如果返现文本内容被挡住了，会想方设法将文本展示出来
验证浮动和定位是否脱离文档流
- 改变标签位置的两种方式：浮动 定位
脱离文档流（原来的位置是否还保留）
浮动
绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
</head>
<body>
<div style="height: 100px;width: 100px;background: hotpink;"></div>
<div style="height: 100px;width: 100px;background: green;position: absolute;left:500px "></div>
<div style="height: 100px;width: 100px;background: black "></div>
</body>
</html>
- 固定定位
不脱离文档流
相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
</head>
<body>
<div style="height: 100px;width: 100px;background: hotpink;position: relative;left: 500px"></div>
<div style="height: 100px;width: 100px;background: green "></div>
</body>
</html>绝对定位
z-index模态框
模态框：实例：百度的登陆，三层结构
1 最底部正常内容（z=0） 最远的
2 黑色的透明区 (z=99) 中间层
3 白色的注册区域(z=100) 离用户最近
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0
}
.cover {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.4);
z-index: 99;
}
.modal {
background: white;
height: 200px;
width: 400px;
position: fixed;
/*根据框的顶点居中*/
left:50%;
top: 50%;
z-index: 100;
/*将注册框居中*/
margin-left: -200px;
margin-top: -100px;
}
</style>
</head>
<body>
<div>最底层内容</div>
<div class="cover"></div>
<div class="modal">
<h1>注册</h1>
<p>usrname:<input type="text"></p>
<p>password:<input type="text"></p>
<p>password:<input type="submit"></p>
</div>
</body>
</html>
透明度opacity
不单单可以修改颜色的透明度，还同时修改字体的透明度
rgba只能影响颜色
opacity可以修改颜色和字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0
}
#d1 {
background: rgba(0,0,0,0.5);
}
#d2 {
opacity: 0.5;
}
</style>
</head>
<body>
<p id="d1">1111</p>
<p id="d2">2222</p>
</body>
</html>
