CSS
1. CSS概述
如何学习:
- CSS是什么
- CSS怎么用(快速入门)
- CSS选择器(重点+难点)
- 美化网页(文字、阴影、超链接、列表、渐变)
- 盒子模型
- 浮动
- 定位
1.1 什么是CSS
Cascading Style Sheet 层叠级联样式表
CSS:表现(美化网页)
字体、颜色、编剧、高度、宽度、背景图片、网页定位、浮动
1.2 发展史
CSS1.0
CSS2.0 DIV(块)+CSS, HTML与CSS结构分离的思想,网页变得简单。
CSS2.1 浮动,定位
CSS3.0 圆角,阴影,动画… 浏览器兼容性~
1.3 快速入门
style.css 文件:
/*语法:
选择器 {
声明1;
声明2;
声明3;
}
*/
h1{
color: red;
}
Index.html 文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>标题</h1>
</body>
</html>
图解:
CSS优势:
- 内容和表现分离
- 网页结构表现统一,可以实现复用
- 样式十分丰富
- 建议使用独立于html的css文件
- 利用SEO,容易被搜索引擎收录!
1.4 CSS三种导入方式
style.css 文件:
/*外部样式*/
h1{
color: blue;
}
index.html 文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--内部样式-->
<style>
h1{
color: green;
}
</style>
<!--外部样式-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--优先级:就近原则-->
<!--行内样式:在标签元素中,编写一个style属性,编写样式即可-->
<h1 style="color:red;">我是标题</h1>
</body>
</html>
注意三种导入方式的优先级: 就近原则!
2 选择器
作用:选择页面上的某一个或某一类元素
2.1 基本选择器(!!!)
-
标签选择器 : 选择一类标签
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*便签选择器:会选择页面上所有的这个标签*/ h1{ color: red; background: antiquewhite; border-radius: 24px; } p{ font-size: 50px; } </style> </head> <body> <h1>Demut</h1> <h1>Demut</h1> <p>Jever</p> </body> </html>
结果:
-
类 选择器 class:选择所有class属性一致的标签,跨标签
使用方式:
.类名称{}
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*类选择器的格式: .class的名称{} 好处: 可以多个标签归类,是同一个class,可以复用 */ .demut{ color: forestgreen; } .jever{ color: blueviolet; } </style> </head> <body> <h1 class="demut">Demut</h1> <h1 class="jever">Demut</h1> <h1 class="demut">Demut</h1> <p class="demut">Jever</p> </body> </html>
结果:
-
id 选择器:全局唯一,不可重复使用!
使用方式:
#id名称{}
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--优先级: id > 类 > 标签--> <style> /*id选择器: id必须保证全局唯一 #id名称{} */ #demut{ color:darkviolet; } .style1{ color: forestgreen; } h1{ color: red; } </style> </head> <body> <h1>标题1</h1> <h1 class="style1">标题2</h1> <h1>标题3</h1> <h1 class="style1" id="demut">标题4</h1> </body> </html>
结果:
优先级: id > class > 标签
2.2 层次选择器
本案例中测试代码如下: (选择器均已注释!)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*后代选择器*/
/*body p{ !*body后面的p标签均会变色!*!*/
/* background: yellow;*/
/*}*/
/*子选择器*/
/*body>p{*/
/* background: forestgreen;*/
/*}*/
/*相邻兄弟选择器*/ /*选择相邻同辈且是下一个同辈*/
/*.active+p{*/
/* background: blue;*/
/*}*/
/*通用选择器*/ /*当前选中元素的向下所有兄弟*/
/*.active~p{*/
/* background: blueviolet;*/
/*}*/
</style>
</head>
<body>
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p>p4</p>
</body>
</html>
原网页展示:
-
后代选择器:在某个元素的后面 grandparent parent son
body p{ /*body后面的所有p标签均会变色!*/ background: yellow; }
结果:
-
子选择器: parent son
body>p{ /*body后面的下一代p标签变色*/ background: forestgreen; }
-
相邻兄弟选择器
.active+p{/*选择相邻同辈且是下一个同辈*/ background: blue; }
-
通用选择器
.active~p{ /*当前选中元素的向下所有兄弟*/ background: blueviolet; }
2.3 结构伪类选择器
伪类: 添加了条件(带冒号)
结构伪类选择: 条件与结构相关!
案例展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*ul的第一个子元素*/
ul li:first-child{
background: cadetblue;
}
/*ul的最后一个元素*/
ul li:last-child{
background: red;
}
/*选中p1 : 定位到父元素,选择当前的第一个元素
选择当前p元素的父级元素,选中父级元素的第一个子元素,并且是当前元素猜生效!
*/
p:nth-child(1){
background: yellow;
}
/*选中父元素,下的p元素的第二个,类型*/
p:nth-of-type(2){
background: forestgreen;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
2.4 属性选择器(!!!)
重点掌握:
a[]{}
属性选择器语句格式,a可替换为其他元素名称=
绝对相等*=
包含匹配^=
开头匹配$=
结尾匹配
测试代码:
<!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: yellow;
text-decoration: none;
margin-right: 5px;
font: bold 20px/50px Arial;
}
/*!*选中存在id的元素 a[]{} *!*/
/*a[id=first]{*/
/* background: red;*/
/*}*/
/*!*选中class中有links的元素*!*/
/*a[class*="links"]{*/
/* background: aqua;*/
/*}*/
/*!*选中href中以http开头的元素*!*/
/*a[href^=http]{*/
/* background: blueviolet;*/
/*}*/
/*!*选中以png结尾的元素*!*/
/*a[href$=png]{*/
/* background: black;*/
/*}*/
</style>
</head>
<body>
<p class="demo">
<a href="http://www.bing.com" class="links item first" id="first">1</a>
<a href="http://www.bing.com" class="links item active" target="_blank" title="test">2</a>
<a href="images/123.html" class="links item first">3</a>
<a href="images/123.png" class="links item first">4</a>
<a href="abc" class="links item first">5</a>
<a href="http://www.bing.com" class="links item first">6</a>
<a href="http://www.bing.com" class="links item first">7</a>
<a href="http://www.bing.com" class="links item first">8</a>
<a href="http://www.bing.com" class="links item first">9</a>
<a href="http://www.bing.com" class="links item last">10</a>
</p>
</body>
</html>
原网页效果:
属性选择器说明如下:
选中存在id的元素
a[id=first]{
background: red;
}
运行结果:
选中class中包含links的元素
a[class*="links"]{
background: aqua;
}
选中href中以http开头的元素
a[href^=http]{
background: blueviolet;
}
选中href中以png结尾的元素
a[href$=png]{
background: black;
}
3 美化网页元素
3.1 为什么要美化网页
- 有效的传递页面信息
- 美化网页,吸引用户
- 凸显页面主题
- 提高用户体验
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">Java</span>
</body>
</html>
3.2 字体样式
代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体样式</title>
<style>
body{
font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif;
color: #a13d30;
}
h1{
font-size: 50px;
}
.p1{
font-weight: bolder;
}
</style>
</head>
<body>
<h1>数学分析</h1>
<p>
数学分析的主要内容是微积分学,微积分学的理论基础是极限理论,极限理论的理论基础是实数理论。微积分学是微分学(Differential Calculus)和积分学(Integral Calculus)的统称,英语简称Calculus,意为计算,这是因为早期微积分主要用于天文、力学、几何中的计算问题。后来人们也将微积分学称为分析学(Analysis),或称无穷小分析,专指运用无穷小或无穷大等极限过程分析处理计算问题的学问。
</p>
<p class="p1">
I have searched a thousand years,
And I have cried a thousand tears.
I found everything I need,
You are everything to me.
</p>
</body>
</html>
结果展示:
3.3 文本样式
- 颜色 color rgb rgba
- 文本对齐方式 text-align:center
- 首行缩进 text-indent:2em
- 行高 line-height: 单行文字上下居中! line-height=height
- 装饰 text-decoration
- 文本图片水平对齐方式:vertical-align:middle
代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体样式</title>
<!--
颜色:
RGB 红绿蓝 0~F
RGBA A为透明度 0~1
text-align: 左右排版
text-indent: 段落首行缩进
line-height: 行高
-->
<style>
h1{
color: rgb(0,255,255,0.5);
text-align: center;
}
.p1{
text-indent: 2em; /*1em表示一个字*/
}
.p3{
background: yellow;
}
.l1{
text-decoration: underline; /*下划线*/
}
.l2{
text-decoration: line-through; /*中划线*/
}
.l3{
text-decoration: overline; /*上划线*/
}
</style>
</head>
<body>
<h1>数学分析</h1>
<p class="p1">
数学分析的主要内容是微积分学,微积分学的理论基础是极限理论,极限理论的理论基础是实数理论。微积分学是微分学(Differential Calculus)和积分学(Integral Calculus)的统称,英语简称Calculus,意为计算,这是因为早期微积分主要用于天文、力学、几何中的计算问题。后来人们也将微积分学称为分析学(Analysis),或称无穷小分析,专指运用无穷小或无穷大等极限过程分析处理计算问题的学问。
</p>
<p class="p3">
I have searched a thousand years,
And I have cried a thousand tears.
I found everything I need,
You are everything to me.
</p>
<p class="l1">123123123</p>
<p class="l2">123123123</p>
<p class="l3">123123123</p>
</body>
</html>
结果:
3.4 超链接伪类与阴影
正常情况:a{}
鼠标悬停:a:hover{}
鼠标按住未释放:a:active{}
鼠标点击后:a:visited{}
text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径
代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接伪类</title>
<style>
/*默认颜色*/
a{
text-decoration: none;
color: black;
}
/*鼠标悬停颜色*/
a:hover{
color: orange;
}
/*鼠标按住未释放的状态*/
a:active{
color: green;
}
/*点击后的颜色*/
/*text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径 */
#price{
text-shadow: lightblue 0px 0px 10px;
}
</style>
</head>
<body>
<a href="#">
<img src="images/s25648004.jpg" alt="">
</a>
<p>
<a href="#">算法导论(原书第3版)</a>
</p>
<p>
<a href="">作者: Thomas H.Cormen / Charles E.Leiserson / Ronald L.Rivest / Clifford Stein </a>
</p>
<p id="price">
¥128.00
</p>
</body>
</html>
结果:
3.5 列表
重点在于去掉原点,并进行一些简单修饰。
代码展示:
css文件:
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
background: red;
}
#nav{
width: 40%;
}
/*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: #000000;
}
a:hover{
color: orange;
text-decoration: underline;
}
html文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
</ul>
</div>
</body>
</html>
运行结果:
3.6 背景
此处重点介绍背景图片的平铺以及渐变颜色的处理。
渐变颜色推荐网址:https://www.grabient.com/(可直接copy css代码,打开较慢,请耐心等待)
背景图片平铺:
代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 1000px;
height: 700px;
border: 1px solid red;
background-image: url("images/a.png");
/*默认全部平铺*/
}
.div1{
background-repeat: repeat-x; /*横向平铺*/
}
.div2{
background-repeat: repeat-y; /*纵向平铺*/
}
.div3{
background-repeat: no-repeat; /*不平铺*/
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
横向平铺:
纵向平铺:
无平铺:
4 盒子模型
4.1 什么是盒子模型
-
margin: 外边距
-
padding: 内边距
-
border: 边框
4.2 边框
border: 粗细,样式,颜色
- 边框的粗细
- 边框的样式
- 边框的颜色
案例集中在4.3中展示。
4.3 内外边距
代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
/*body总有一个默认的外边距*/
/*margin: 0;*/
}
#box{
/*border: 粗细,样式,颜色*/
width: 300px;
border: 1px solid red;
/*外边距可以令其居中*/
margin: 0 auto;
/*
margin: 0; 全部
margin: 0 1px; 上下 左右
margin: 0 1px 2px 1px; 上右下左
*/
}
h2{
font-size: 16px;
background-color: rebeccapurple;
color: gold;
text-align: center;
margin-top: 0;
}
form{
background: cadetblue;
padding: 5px;
}
div input{
border: 1px dashed yellowgreen;
}
</style>
</head>
<body>
<div id="box">
<h2>用户登录</h2>
<form action="#">
<div>
<span>用户名:</span>
<input type="text">
</div>
<div>
<span>密码:</span>
<input type="text">
</div>
<div>
<span>邮箱:</span>
<input type="text">
</div>
</form>
</div>
</body>
</html>
结果:
盒子计算模型:
margin+border+padding+内容宽度
4.4 圆角边框与阴影
圆角边框:
- border-top-left-radius: 40px 20px; x方向和y方向
- border-top-right-radius: 右上角
- border-bottom-left-radius: 左下角
- border-bottom-right-radius: 右下角
也可统一使用border-radius来设置。
阴影:
- box-shadow:水平偏移量x 垂直偏移量y 模糊范围 颜色
代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆角边框和阴影</title>
<style>
.box{
background-color: brown;
font-size: 20px;
text-align: center;
float: left;
/*box-shadow:水平偏移量x 垂直偏移量y 模糊范围 颜色*/
box-shadow: 10px 10px 30px #888;
}
.box1{
height: 100px;
width: 150px;
border-top-left-radius: 35px 40px;
border-bottom-right-radius: 20px;
border: 1px solid royalblue;
}
.box2{
height: 50px;
width:150px;
border-radius: 25px;
}
.box3{
height: 100px;
width: 100px;
border-radius: 50px;
}
</style>
</head>
<body>
<div class="box1 box">box1</div>
<div class="box2 box">box2</div>
<div class="box3 box">box3</div>
</body>
</html>
结果展示:
5 浮动
5.1 标准文档流
块级元素: 独占一行
h1-h6 p div 列表…
行内元素:不独占一行
span a img strong…
行内元素可以放在块级元素中,反之不可
5.2 display
代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* display:
block 块元素
inline 行内元素
inline-block 是块元素,但是可以内联 --> 在一行
*/
div{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
span{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
</style>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>
结果:
5.3 float
代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
.float_right{
float: right;
}
.float_left{
float: left;
}
</style>
</head>
<body>
<div style="color: grey;">
<img src="images/Werstrass.jpeg" class="float_right" width="80" height="110">
<p style="text-indent: 2em">
早期的微积分,已经被数学家和天文学家用来解决了大量的实际问题,但是由于无法对无穷小概念作出令人信服的解释,在很长的一段时间内得不到发展,有很多数学家对这个理论持怀疑态度,柯西(Cauchy)和后来的魏尔斯特拉斯(weierstrass)完善了作为理论基础的极限理论,摆脱了“要多小有多小”、“无限趋向”等对模糊性的极限描述,使用精密的数学语言来描述极限的定义,使微积分逐渐演变为逻辑严密的数学基础学科,被称为“Mathematical Analysis”,中文译作“数学分析”。
</p>
</div>
</body>
</html>
结果:
5.4 父级边框塌陷问题
问题描述:元素未全在父级边框内,如图,布局很丑!
测试源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Overflow</title>
<style>
.border{
border: 3px solid #4CAF50;
padding: 5px;
}
.float_right{
float: right;
}
</style>
</head>
<body>
<div class="border">
<img src="images/Werstrass.jpeg" class="float_right" width="120" height="170">
<p>
勤学如春起之苗,不见其增,日有所长;<br/>
辍学如磨刀之石,不见其损,日有所亏.
</p>
</div>
</body>
</html>
解决方案:
-
增加父级元素的高度 (Too low,不推荐)
-
在元素后增加一个空的div,清除浮动。
<style> .clear{ clear: both; margin: 0; padding: 0; } </style> ... <div class="clear"></div>
运行结果:
-
overflow方法。
在父元素上通过添加clearfix类,并设置overflow:auto;来解决问题。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Overflow</title> <style> .border{ border: 3px solid #4CAF50; padding: 5px; } .float_right{ float: right; } .clearfix{ overflow: auto; } </style> </head> <body> <div class="border"> <img src="images/Werstrass.jpeg" class="float_right" width="120" height="170"> <p> 勤学如春起之苗,不见其增,日有所长;<br/> 辍学如磨刀之石,不见其损,日有所亏. </p> </div> <p style="clear: right; color: red"> 在父元素上通过添加clearfix类,并设置overflow:auto;来解决问题。 </p> <div class="border and clearfix"> <img src="images/Werstrass.jpeg" class="float_right" width="120" height="170"> <p> 勤学如春起之苗,不见其增,日有所长;<br/> 辍学如磨刀之石,不见其损,日有所亏. </p> </div> </body> </html>
运行结果:
-
父类添加一个伪类:after
.border:after{ content: ''; display: block; clear: both; }
运行结果:
小结:
-
浮动元素后面增加空div
简单,代码中尽量避免空div
-
设置父元素的高度
简单,元素假设有一个固定的高度,就会被限制
-
overflow
下拉的场景中,避免使用
-
父类添加一个伪类:after(推荐)
写法稍微复杂一定,但是没有副作用!
5.5 对比
-
display
方向不可以控制
-
float
浮动起来的话会脱离标准文档流,所以要处理父级边框塌陷问题
6 定位
本章测试源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
padding: 20px;
}
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #666666;
}
#first{
background-color: gold;
border: 1px dashed #a13d30;
}
#second{
background-color: aqua;
border: 1px dashed rebeccapurple;
}
#third{
background-color: crimson;
border: 1px dashed chartreuse;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
运行结果:
6.1 相对定位
局部更改测试源码。
#first{
background-color: gold;
border: 1px dashed #a13d30;
position: relative;
top: -20px; /*距离上部偏离-20*/
left: 20px; /*距离左侧偏离20*/
}
#third{
background-color: crimson;
border: 1px dashed chartreuse;
position: relative;
bottom: 10px; /*距离下部偏离10px*/
right: 20px; /*相对右侧偏离20px*/
}
测试结果:
相对定位: position:relative;
相对于原来的位置,进行指定的偏移,相对定位之后,仍然在标准文档流中。
相对定位的一个练习:
练习源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 300px;
height: 300px;
padding: 10px;
border: 2px solid red;
}
a{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background-color: magenta;
text-decoration: none;
display: block;
}
a:hover{
background-color: lightblue;
}
.a2,.a4{
position: relative;
left: 200px;
top: -100px;
}
.a5{
position: relative;
left: 100px;
top: -300px;
}
</style>
</head>
<body>
<div id="box">
<a class="a1" href="#">链接1</a>
<a class="a2" href="#">链接2</a>
<a class="a3" href="#">链接3</a>
<a class="a4" href="#">链接4</a>
<a class="a5" href="#">链接5</a>
</div>
</body>
</html>
练习结果:
6.2 绝对定位
-
没有父级元素定位的情况下,相对于浏览器定位。
-
假设父级元素存在定位,通常相对于父级元素进行偏移。
-
在父级元素范围内移动。
相对于浏览器或父级的位置,进行指定的偏移,绝对定位之后,仍然在标准文档流中。
局部更改测试代码:
#second{
background-color: aqua;
border: 1px dashed rebeccapurple;
position: absolute;
right: 30px;
}
测试结果:
6.3 固定定位
positon:fixed;
测试代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height: 1000px;
}
div:nth-of-type(1){
width: 100px;
height: 100px;
background-color: red;
position: absolute; /*绝对定位*/
right: 0;
bottom: 0;
}
div:nth-of-type(2){
width: 50px;
height: 50px;
background-color: yellowgreen;
position: fixed; /*固定定位*/
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
测试结果:(上下滚动,红块上下移动,绿块始终在固定位置)
6.4 z-index
图层: z-index: 默认为0, 最高~999
测试代码:
style.css文件:
#content{
width: 145px;
padding: 0px;
margin: 0px;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px #000 solid;
text-align: center;
}
ul,li{
padding: 0px;
margin: 0px;
list-style: none;
}
/*父级元素相对定位*/
#content ul{
position: relative;
}
.tipText,.tipBg{
position: absolute;
width: 145px;
height: 25px;
top: 200px;
}
.tipText{
color: white;
z-index: 999;
}
.tipBg{
background: #000;
opacity: 0.3;
}
index.html文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="content">
<ul>
<li><img src="images/Cauchy.png" alt=""></li>
<li class="tipText">柯西!</li>
<li class="tipBg"></li>
<li>时间:2099-01-01</li>
</ul>
</div>
</body>
</html>
测试结果: