目录
css 是指层叠样式表(Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 中
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 css 文件中
- 多个样式定义可层叠为一
- html 在一个网页中负责的事情是一个页面的结构
- css(层叠样式表)在一个网页中主要负责了页面的数据样式。
css样式
行内样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css</title>
</head>
<body>
<!--style 样式-->
<h3 style="color: green;">星期日</h3>
<h3 style="color: green;">星期日</h3>
<h3 style="color: green;">星期日</h3>
</body>
</html>
内部样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css</title>
<style type="text/css">
/* 内部样式 */
h3{
color: green;
}
</style>
</head>
<body>
<h3>星期日</h3>
<h3>星期日</h3>
<h3>星期日</h3>
</body>
</html>
外部样式
新建文件夹命名为css然后新建文件命名为文件名.css直接输入内容即可
h3{
color: green;
}
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css</title>
<!-- 引入外部css样式 -->
<link rel="stylesheet" href="./css/03.css">
</head>
<body>
<h3>星期日</h3>
<h3>星期日</h3>
<h3>星期日</h3>
</body>
</html>
css选择器
标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
p{
color: red;
}
</style>
</head>
<body>
<p>桃李不言</p>
<p>下自成蹊</p>
</body>
</html>
类选择器
css类选择器是可以叠加使用的 .查找
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css类选择器</title>
<style>
.a{
font-size: 1.857rem;
color: #00FF00;
}
.ha{
border: width 0.0625em;
border-style:solid ;
border-color: blueviolet;
}
</style>
</head>
<body>
<p class="a ha" >桃李不言</p>
<p class="a ha">下自成蹊</p>
</body>
</html>
ID选择器
ID选择器是唯一的 #查找
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>cssID选择器</title>
<style>
#tlby{
font-size: 3rem;
}
</style>
</head>
<body>
<p class="a ha" id="tlby">桃李不言</p>
<p class="a ha" id="xzcx">下自成蹊</p>
</body>
</html>
子选择器与后代选择器
后代选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>后代选择器</title>
<style type="text/css">
ul a{
text-decoration: line-through;
}
</style>
</head>
<body>
<a href="">00</a>
<ul>
<a href="">11</a>
<a href="">22</a>
<li><span><a href="">33</a></span></li>
<li><span><a href="">44</a></span></li>
</ul>
<a href="">55</a>
</body>
</html>
子选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>子选择器</title>
<style type="text/css">
ul > a{
text-decoration: line-through;
}
</style>
</head>
<body>
<a href="">00</a>
<ul>
<a href="">11</a>
<li><span><a href="">33</a></span></li>
<li><span><a href="">44</a></span></li>
<a href="">22</a>
</ul>
<a href="">55</a>
</body>
</html>
直接相邻选择器与间接相邻选择器
直接相邻选择器查找使用+号加相邻标签
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>直接相邻选择器</title>
<style type="text/css">
#two+p{
color: rgb(241, 15, 15);
background-color: aqua;
font-size: 1.875rem;
font-weight: 100;
font-family: 'Courier New', Courier, monospace;
}
</style>
</head>
<body>
<span>
<p>星期一</p>
<p id="two">星期二</p>
<p>星期三</p>
<p>星期四</p>
<p>星期五</p>
</span>
<p>星期六</p>
</body>
</html>
间接相邻选择器查找使用~符号加相邻标签
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>间接相邻选择器</title>
<style type="text/css">
#two~p{
color: rgb(241, 15, 15);
background-color: aqua;
font-size: 1.875rem;
font-weight: 100;
font-family: 'Courier New', Courier, monospace;
}
</style>
</head>
<body>
<span>
<p>星期一</p>
<p id="two">星期二</p>
<p>星期三</p>
<p>星期四</p>
<p>星期五</p>
</span>
<p>星期六</p>
</body>
</html>
属性选择器
属性选择器查找属性使用标签[ 属性 ]
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性选择器</title>
<style type="text/css">
input[type=text]{
width: 30rem;
height: 18rem;
}
</style>
</head>
<body>
<input type="text" name="" id="" value="" placeholder="请输入账号" >
<input type="password" name="" id="" value="" placeholder="请输入密码">
</body>
</html>
公共选择器
属性之间用逗号隔开
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>公共选择器</title>
<style type="text/css">
input[type=text],
input[type=password]{
width: 30rem;
height: 18rem;
}
input[type=text]{
border: 0.0625rem solid #5B5BEB;
}
input[type=password]{
border: 0.0625rem solid #00FF00;
}
</style>
</head>
<body>
<input type="text" name="" id="" value="" placeholder="请输入账号" >
<input type="password" name="" id="" value="" placeholder="请输入密码">
</body>
</html>
通配符选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通配符选择器</title>
<style type="text/css">
*{
color: rgb(241, 62, 200);
background-color: blue;
font-size: 1.875rem;
}
</style>
</head>
<body>
<ul>
<li>
<a href="">超链接</a>
</li>
</ul>
<p>桃李不言</p>
<span>下自成蹊</span>
</body>
</html>
伪类符选择器
伪类:伪类用于定义元素的特殊状态。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪类选择器</title>
<style type="text/css">
/*
什么是伪类?
伪类用于定义元素的特殊状态。
a: 锚选择器
*/
a{
text-decoration: none;
font-size: 1.875rem;
}
/* 未访问的链接 */
a:link{
color: #FF0000;
}
/* 已访问的链接 */
a:visited{
color: #00FF00;
}
/* 鼠标悬停链接 */
a:hover{
color: #FF00FF;
}
/* 已选择的链接 */
a:active{
color: #0000FF;
}
img:hover{
width: 600px;
cursor: pointer;
box-shadow: 0px 0px 150px 150px #0000FF inset;
}
/* 边框 */
img:active{
border-radius: 50%;
}
</style>
</head>
<body>
<a href="https://cn.bing.com/search">csdn</a>
<img src="../html/demo04.html" alt="" width="500px" title="点击查看原图">
</body>
</html>
伪对象选择器
伪对象选择器
- 伪对象也叫伪元素,在过去,伪类和伪元素都被书写成前面只加一个冒号,实际上伪对象应该用两个冒号老定义。
伪类和伪对象(元素)的区别
- 伪类一般反映无法在css中轻松或者可靠检测到的某个元素的状态或者属性;
- 伪元素表示DOM 外部的某种文档结构
常用伪元素
- 1.E:before/E::before
- 2.E:after/E::after
伪元素是在元素内容和的前面或后面定义的,必须要添加content:“”这个属性,不然伪元素无法定义成功。
p::after{content:"在P 标签元素内容前面加了内容“;color:red}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪对象选择器</title>
<style>
input:checked+span{
background-color: chartreuse;
}
input:checked+span::after{
background-color: rgb(255, 98, 0);
content: 'color';
}
</style>
</head>
<body>
<form action="" method="post">
<fieldset>
<legend>颜色</legend>
<ul>
<li><label><input type="radio" name="colour-group"><span>蓝色</span></label></li>
<li><label><input type="radio" name="colour-group"><span>红色</span></label></li>
<li><label><input type="radio" name="colour-group"><span>绿色</span></label></li>
</ul>
</fieldset>
</form>
</body>
</html>
div盒子模型
常用css-背景色
使用ID选择器添加底色和边框
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>div盒子模型</title>
<style>
*{
margin: 0;
padding: 0;
font-size: 3.75rem;
}
#container{
border: 0.625rem solid #000ff0;
background-color: rgb(237, 147, 12);
}
</style>
</head>
<body>
<div id="container">星期日</div>
</body>
</html>
div文字水平垂直居中
line-height 垂直居中(通常文字居中)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>div盒子模型</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
margin: 30px;
padding: 0px;
width: 150px;
height: 150px;
border: 0.0625rem solid #000ff0;
text-align: center;
line-height: 150px;
/*vertical-align: middle;*/
/*display: table-cell;*/
}
</style>
</head>
<body>
<div id="box01">1</div>
<div id="box02">2</div>
<div id="box03">3</div>
</body>
</html>
div图片水平垂直居中
以表格形式改变内容的垂直居中 同时也改变了div的结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>div盒子模型</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
margin: 30px;
padding: 0px;
width: 150px;
height: 150px;
border: 0.0625rem solid #000ff0;
text-align: center;
/*line-height: 150px;*/
vertical-align: middle;
display: table-cell;
}
</style>
</head>
<body>
<div id="box01"><img src="../img/c++.jpg" width="50px" height="50px"></div>
<div id="box01"><img src="../img/java.jpg" width="50px" height="50px"></div>
<div id="box01"><img src="../img/python.jpg" width="50px" height="50px"></div>
</body>
</html>
背景图
图片平铺 :background-image: url(图片路径);
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景图</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-image: url(../img/css.jpg);
}
</style>
</head>
<body>
</body>
</html>
background-repeat: repeat-x; 水平方向平铺
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景图</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-image: url(../img/css.jpg);
background-repeat: repeat-x;
}
</style>
</head>
<body>
</body>
</html>
background-repeat: repeat-y; 纵向平铺
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景图</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-image: url(../img/css.jpg);
background-repeat: repeat-y;
}
</style>
</head>
<body>
</body>
</html>
background-repeat: no-repeat; 不平铺就一张图片
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景图</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-image: url(../img/css.jpg);
background-repeat: no-repeat;
}
</style>
</head>
<body>
</body>
</html>
等比例缩放图片
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景图</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background: url(../img/网页.jpg);
background-size:cover;
}
</style>
</head>
<body>
</body>
</html>
透明度
透明度:0到1之间的小数
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>透明度</title>
<style>
*{
margin: 0;
padding: 0;
}
img{
width: 300px;
}
#css2{
/* opacity 透明度:0到1之间的小数 */
opacity: 0;
}
</style>
</head>
<body>
<img id="css1" src="../img/css.jpg" alt="">
<img id="css2" src="../img/css.jpg" alt="">
<img id="css3" src="../img/css.jpg" alt="">
</body>
</html>
透明度opacity: 1;时
透明度opacity: 0;时
透明度opacity: 0.5;时
transparent实现三角形效果
transparent 透明是指和背景色是同一颜色
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>透明度</title>
<style>
*{
margin: 0;
padding: 0;
}
img{
width: 300px;
}
#css2{
opacity: 0.5;
}
span{
color: transparent;
}
</style>
</head>
<body>
<img id="css1" src="../img/css.jpg" alt="">
<img id="css2" src="../img/css.jpg" alt="">
<span>桃李不言</span>
<img id="css3" src="../img/css.jpg" alt="">
</body>
</html>
花拼三角形
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transparent</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background-color: #FF6060 ;
height: 100%;
font-family: 微软雅黑,宋体,Arial;
text-size-adjust: none;
}
#triangle{
margin-left: 6.25rem;
margin-top: 6.25rem;
width: 0px;
height: 0px;
border-width :6.25rem;
border-left-color:rgb(6, 239, 57) ;
border-top-color:rgb(40, 19, 229) ;
border-right-color:#fcfffc ;
border-bottom-color:rgb(249, 243, 84) ;
border-style:solid ;
}
</style>
</head>
<body>
<div id="triangle">
</div>
</body>
</html>
三角形
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transparent</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background-color: #FF6060 ;
height: 100%;
font-family: 微软雅黑,宋体,Arial;
text-size-adjust: none;
}
#triangle{
margin-left: 6.25rem;
margin-top: 6.25rem;
width: 0px;
height: 0px;
border-width :6.25rem;
border-left-color: transparent;
border-top-color: transparent;
border-right-color:#fcfffc ;
border-bottom-color: transparent;
border-style:solid ;
}
</style>
</head>
<body>
<div id="triangle">
</div>
</body>
</html>
显示与隐藏
visibility: hidden; 隐藏后保留原来的位置
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hidden隐藏</title>
<style>
*{
margin: 0;
padding: 0;
}
img{
width: 300px;
}
#css2{
visibility: hidden;
}
</style>
</head>
<body>
<img id="css1" src="../img/css.jpg" alt="">
<img id="css2" src="../img/css.jpg" alt="">
<img id="css3" src="../img/css.jpg" alt="">
</body>
</html>
display: none; 隐藏后不保留原来的位置
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>display隐藏</title>
<style>
*{
margin: 0;
padding: 0;
}
img{
width: 300px;
}
#css2{
display: none;
}
</style>
</head>
<body>
<img id="css1" src="../img/css.jpg" alt="">
<img id="css2" src="../img/css.jpg" alt="">
<img id="css3" src="../img/css.jpg" alt="">
</body>
</html>
浮动
float: left;向左浮动 (浮动的方向不同元素的顺序不同)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动</title>
<style>
*{
margin: 0;
padding: 0;
}
ul > li{
list-style: none;
float: left;
}
ul > li > a{
text-decoration: none;
display: block;
/*width: 9.375rem;*/
height: 1.875rem;
line-height: 1.875rem;
text-align: center;
/*border: 1px solid #FF0000;*/
}
.nav_spacing{
width: 5.625rem;
height: 1.875rem;
/*border: 0.625rem solid #FF0000;*/
}
</style>
</head>
<body>
<ul>
<li>
<div class="nav_spacing"></div>
</li>
<li><a href="">全部课程</a></li>
<li>
<div class="nav_spacing"></div>
</li>
<li><a href="">项目实战</a></li>
<li>
<div class="nav_spacing"></div>
</li>
<li><a href="">阿里云</a></li>
<li>
<div class="nav_spacing"></div>
</li>
<li><a href="">书籍</a></li>
<li>
<div class="nav_spacing"></div>
</li>
<li><a href="">在线题库</a></li>
</ul>
<img src="../img/css.jpg" alt="">
</body>
</html>
clear: both;清除浮动
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动</title>
<style>
*{
margin: 0;
padding: 0;
}
ul > li{
list-style: none;
float: left;
}
ul > li > a{
text-decoration: none;
display: block;
/*width: 9.375rem;*/
height: 1.875rem;
line-height: 1.875rem;
text-align: center;
/*border: 1px solid #FF0000;*/
}
.nav_spacing{
width: 5.625rem;
height: 1.875rem;
/*border: 0.625rem solid #FF0000;*/
}
.clear{
clear: both;
}
</style>
</head>
<body>
<ul>
<li>
<div class="nav_spacing"></div>
</li>
<li><a href="">全部课程</a></li>
<li>
<div class="nav_spacing"></div>
</li>
<li><a href="">项目实战</a></li>
<li>
<div class="nav_spacing"></div>
</li>
<li><a href="">阿里云</a></li>
<li>
<div class="nav_spacing"></div>
</li>
<li><a href="">书籍</a></li>
<li>
<div class="nav_spacing"></div>
</li>
<li><a href="">在线题库</a></li>
</ul>
<div id="" class="clear">
</div>
<img src="../img/css.jpg" alt="">
</body>
</html>
overflow
- visible 默认值。内容不会被修剪,会呈现在元素框之外。
- hidden 内容会被修剪,并且其余内容是不可见的。
- scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
- auto 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
- inherit 规定应该从父元素继承 overflow 属性的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>overflow</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
overflow: scroll;
}
div{
width: 18.75rem;
height: 18.75rem;
border: 1px solid #FF0000;
margin: 0 auto;
overflow: inherit;
}
</style>
</head>
<body>
<div>
行深般若波罗蜜多时,
<br /> 照见五蕴皆空,
<br /> 度一切苦厄。
<br /> 舍利子,
<br /> 色不异空,
<br /> 空不异色,
<br /> 色即是空,
<br /> 空即是色,
<br /> 受想行识,
<br /> 亦复如是。
<br /> 舍利子,
<br /> 是诸法空相,
<br /> 不生不灭,
<br /> 不垢不净,
<br /> 不增不减。
<br /> 是故空中无色,
<br /> 无受想行识,
<br /> 无眼耳鼻舌身意,
<br /> 无色声香味触法,
<br /> 无眼界,
<br /> 乃至无意识界。 去第二段 去第三
<br /> 无无明,
<br /> 亦无无明尽,
<br /> 乃至无老死,
<br /> 亦无老死尽。
<br /> 无苦集灭道,
<br /> 无智亦无得。
<br /> 以无所得故,
<br /> 菩提萨埵,
<br /> 依般若波罗蜜多故,
<br /> 心无罣碍,
<br /> 无罣碍故,
<br /> 无有恐怖,
<br /> 远离颠倒梦想,
<br /> 究竟涅磐。
<br /> 三世诸佛,
<br /> 依般若波罗蜜多故,
<br /> 得阿耨多罗三藐三菩提。
<br /> 故知般若波罗蜜多,
<br /> 是大神咒,
<br /> 是大明咒,
<br /> 是无上咒,
<br /> 是无等等咒,
<br /> 能除一切苦,
<br /> 真实不虚。
<br /> 故说般若波罗蜜多咒,
<br /> 即说咒曰:揭谛揭谛波罗揭谛波罗僧揭谛菩提萨婆诃。
</div>
</body>
</html>
position位置
绝对定位absolute
position: absolute; 绝对定位 是相对与父容器的位置定位
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绝对定位</title>
<style>
*{
margin: 0;
padding: 0;
}
img{
width: 18.75rem;
}
#container{
margin-left: 100px;
margin-top: 100px;
width:75rem ;
height: 56.25rem;
border: 1px solid #00FF00;
position: absolute;
left: 100px;
top: 100px;
}
#css2{
position: absolute;
left: 200px;
top: 200px;
}
</style>
</head>
<body>
<div id="container">
<img id="css1" src="../img/css.jpg" alt="">
<img id="css2" src="../img/css.jpg" alt="">
</div>
</body>
</html>
相对定位relative
position: relative; 相对定位 是相对自己原来的位置定位
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相对定位</title>
<style>
*{
margin: 0;
padding: 0;
}
img{
width: 18.75rem;
}
#container{
margin-left: 100px;
margin-top: 100px;
width:75rem ;
height: 56.25rem;
border: 1px solid #00FF00;
position: relative;
left: 100px;
top: 100px;
}
#css2{
position: relative;
left: 200px;
top: 200px;
}
</style>
</head>
<body>
<div id="container">
<img id="css1" src="../img/css.jpg" alt="">
<img id="css2" src="../img/css.jpg" alt="">
</div>
</body>
</html>
粘性定位sticky
position: sticky; 粘性定位
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>粘性定位</title>
<style>
#nav{
position: sticky;
top: 3.125rem;
background-color: aquamarine;
font-size: 1.875rem;
}
</style>
</head>
<body>
<p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 stick 属性。</p>
<br><br><br><br><br><br><br><br>
<div id="nav">我是粘性定位!</div>
<div style="padding-bottom: 2000px;">
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
</div>
</body>
</html>
固定定位fixed
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>固定定位fixed</title>
<style>
#css{
position: fixed;
right: 30px;
top: 50px;
}
</style>
</head>
<body>
<img id="css" src="../img/css.jpg" alt="">
<div style="padding-bottom: 2000px;">
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
</div>
</body>
</html>
z_index
可以通过z_index的值来控制显示图层的顺序,z_index值越大越在外面显示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>重叠元素z_index</title>
<style>
*{
margin: 0;
padding: 0;
}
img{
width: 400px;
}
#container{
margin-left: 100px;
margin-top: 100px;
width:75rem ;
height: 56.25rem;
border: 1px solid #00FF00;
position: absolute;
left: 100px;
top: 100px;
}
#html{
position: absolute;
left: 150px;
top: 150px;
}
#css{
position: absolute;
z-index: 30;
}
#html{
position: absolute;
z-index: 20;
}
</style>
</head>
<body>
<div id="container">
<img id="css" src="../img/css.jpg" alt="">
<img id="html" src="../img/图片.jpg" alt="">
</div>
</body>
</html>
transition过渡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>transition过渡</title>
<style type="text/css">
/*
float 浮
*/
* {
margin: 0;
padding: 0;
}
ul{
position: absolute;
}
ul > li{
list-style: none;
float: left;
}
ul > li > a{
text-decoration: none;
display: block;
/* width: 9.375rem; */
height: 1.875rem;
line-height: 1.875rem;
text-align: center;
/* border: 0.0625rem solid #FF0000; */
z-index: 1;
}
.nav_spacing{
width: 5.625rem;
height: 1.875rem;
/* border: 0.0625rem solid #00FF00; */
}
.clear{
clear: both;
}
img{
width: 4.125rem;
position: relative;
top: -5rem;
/* display: none; */
z-index: -1;
}
ul > li > a:hover+img{
position: relative;
top: 0.625rem;
/* display: block; */
transition: 2s;
}
</style>
</head>
<body>
<ul>
<li>
<div class="nav_spacing "></div>
</li>
<li><a href="">全部课程</a><img src="../img/css.jpg" ></li>
<li>
<div class="nav_spacing "></div>
</li>
<li><a href="">项目实战</a><img src="../img/css.jpg" ></li>
<li>
<div class="nav_spacing "></div>
</li>
<li><a href="">阿里云</a><img src="../img/css.jpg" ></li>
<li>
<div class="nav_spacing "></div>
</li>
<li><a href="">书籍</a><img src="../img/css.jpg" ></li>
<li>
<div class="nav_spacing "></div>
</li>
<li><a href="">在线题库</a><img src="../img/css.jpg" ></li>
</ul>
<div id="" class="clear">
</div>
</body>
</html>
animate
Animate.css 是一个随时可用的跨浏览器动画库。
下载安装使用
导入文件animate.css
下载地址https://cdnjs.cloudflare.com/ajax/libs/animate.css
或者直接添加网址到网页
https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css
动画元素库
https://animate.style/
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animate</title>
<link rel="stylesheet" type="text/css" href="./css/animate.min.css">
</head>
<body>
<img class="animate__animated animate__zoomOutDown" src="../img/css.jpg" alt="">
</body>
</html>
图片精灵
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background-color: #DADBDC;
}
.coutainer{
background-color: #FFFFFF;
margin: 0 auto;
width: 640px;
height:350px ;
margin-top: 180px; ;
text-align: center;
border-radius: 10px;
position: relative;
}
.input_coutainer{
margin-top: 30px;
width: 290px;
height: 66px;
line-height: 66px;
font-size: 33px;
padding-left: 90px;
}
#account_img,
#password_img{
width: 60px;
height: 60px;
background-image: url(../img/jingling.png);
background-repeat: no-repeat;
overflow: hidden;
position: absolute;
}
#account_img{
background-position: 0px -69px ;
top: 74px;
left: 146px;
}
#password_img{
background-position: -202px -135px ;
top: 174px;
left: 146px;
}
</style>
</head>
<body>
<div class="coutainer">
<h1>登录</h1>
<i id="account_img"></i>
<input class="input_coutainer" type="text" name="account" id="account" value="" placeholder="请输入账号" autocomplete="off">
<i id="password_img"></i>
<input class="input_coutainer" type="passworad" name="passworad" id="passworad" value="" placeholder="请输入密码">
</div>
</body>
</html>