CSS
如何学习
-
CSS是什么
-
CSS怎么用(快速入门)
-
CSS选择器(重点 + 难点)
-
美化网页(文字,阴影,超链接,列表,渐变。。。)
-
盒子模型
-
浮动
-
定位
-
网页动画(特效效果)
什么是CSS
Cascading Style Sheet 层叠级联样式表
CSS:表现(美化网页)
字体,颜色,边距,高度,宽度,背景图片,网页定位,网页浮动
发展史
CSS1.0
CSS2.0 DIV (块) + CSS,HTML 与CSS结构分离的思想
CSS2.1 浮动,定位
CSS3.0 圆角,阴影,动画。。。浏览器兼容性~
快速入门
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>
h1 {
color: red;
}
css的优势:
- 内容和表现分离
- 网页结构表现统一,可以实现复用
- 样式十分的丰富
- 建议使用独立于html的css文件
- 利用SEO,容易被搜索引擎收录!
CSS的3种导入方式
<!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>
/*外部样式*/
h1 {
color: blue;
}
拓展:外部样式两种写法
- 链接式:
html
<!--外部样式-->
<link rel="stylesheet" href="css/style.css">
-
导入式:
@import是CSS 2.1 特有的!
<!--导入式-->
<style>
@import url("css/style.css");
</style>
选择器
作用:选择页面上的某一个或者某一类元素
CSS,JS,JQuery,vue
基本选择器
- 标签选择器 :选择一类标签 标签{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器会选择到页面的=上所有的这个标签的元素*/
h1{
color: #654103;
background: red;
border-radius: 24px;
}
h2{
color: #d79119;
background: #dc3f3f;
border-radius: 24px;
}
p{
font-size: 80px;
}
</style>
</head>
<body>
<h1>HTLML</h1>
<h2>HTLML</h2>
<p>HTLML的学习</p>
</body>
</html>
- 类选择器 class : 选择所有class属性一致的标签,跨标签 .类名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*类选择器的格式 .class 的名称{}
好处:可以多个标签归类,是同一个class
*/
.XZZS{
color: yellowgreen;
}
.XZzs{
color: rosybrown;
}
.xzzs{
color: #d32c2c;
}
</style>
</head>
<body>
<h1 class ="xzzs">标题1</h1>
<h1 class ="XZZS">标题2</h1>
<h1 class ="XZzs">标题3</h1>
<h2 class ="XZZS">标题4</h2>
<p class ="xzzs">p标签</p>
</body>
</html>
- Id选择器 :全局唯一! #id名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
id选择器 : id必须保证全局唯一!
#id名称{}
优先级:
不遵循就近原则,固定的
id选择器>class选择器>标签选择器
*/
#XZZS{
color: #c41111;
}
.style1{
color: yellowgreen;
}
.style2{
color: yellow;
}
h1{
color: violet;
}
</style>
</head>
<body>
<h1 id="XZZS" class="style1">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style2">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>
优先级:id > class > 标签
层次选择器
- 后代选择器 : 在某个元素的后面 祖爷爷->爷爷->爸爸 ->你
body p {
background: red;
}
- 子选择器 一代,儿子
body>p{
background: #d7bd30;
}
- 相邻兄弟选择器 同辈
/*相邻兄弟选择器 : 只有一个,相邻(向下)*/
.active + p {
background: #d7bd30;
}
- 通用选择器
/*通用兄弟选择器 , 当前选中元素的向下的所有兄弟元素*/
.active~p{
background: #d7bd30;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*p{*/
/* background: green;*/
/*}*/
/*后代选择器*/
/*body p {*/
/* background: red;*/
/*}*/
/*子选择器*/
/*body>p{*/
/* background: #d7bd30;*/
/*}*/
/*相邻兄弟选择器 : 只有一个,相邻(向下)*/
/*.active + p {*/
/* background: #d7bd30;*/
/*}*/
/*通用兄弟选择器 , 当前选中元素的向下的所有兄弟元素*/
.active~p{
background: #d7bd30;
}
</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>
<p class="active">p7</p>
<p>p8</p>
</body>
</html>
结构伪类选择器
伪类 : 条件
/*ul 的第一个子元素*/
ul li:first-child{
background: violet;
}
/*ul 的最后一个子元素*/
ul li:last-child{
background: yellowgreen;
}
/*
选中p1:定位到父元素,选择当前的第一个元素
选择当前p元素的父级元素,选中父级元素的第一个,并且是当前元素才能生效!
*/
p:nth-child(2) {
background: wheat;
}
/*选中父元素下的p元素的第二个,类型*/
p:nth-of-type(1) {
background: yellow;
}
属性选择器(常用)
id + class 结合
<!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: #1e0ede;
text-align: center;
color: #ef056e;
text-decoration: none;
margin-right: 5px;
font: bold 20px/50px Arial;
}
/*属性名 属性名 = 属性值(正则)
= 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾
*/
/*
存在id属性的元素 a[]{}
*/
/*a[id] {*/
/* background: yellow;*/
/*}*/
/* id = first的元素*/
/* a[id = first]{*/
/* background:yellow;*/
/* }*/
/*class中有links的元素*/
/*a[class *= "links"]{*/
/* background: yellow;*/
/*}*/
/*选中href中以http开头的元素*/
/*a[href^=http] {*/
/* background: yellow;*/
/*}*/
a[href$=doc]{
background: yellow;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://baidu.com" class="links item first" id="first">1</a>
<a href="https://space.bilibili.com" 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">6</a>
<a href="/a.pdf">7</a>
<a href="/abc.pdf">8</a>
<a href="/abc.doc">9</a>
<a href="/abc.doc" class="links item">10</a>
</p>
</body>
</html>
= 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾
美化网页元素
为什么要美化网页
- 有效的传递页面信息
- 让页面漂亮,吸引用户
- 凸显页面的主题
- 提高用户的体验
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">HTML5</span>
</body>
</html>
字体样式
<!--
font-family: 字体
font-size: 字体大小
font-weight: 字体粗细
color: 字体颜色
-->
<style>
body {
font-family: "Arial Black",楷体;
color: #656513;
}
h1 {
font-size: 50px;
font-size: 5em;
}
.p1{
/*font-weight: bold;*/
font-weight:bolder;
}
</style>
文本样式
- 颜色 color rgb rgba
- 文本的对齐方式 text-align = center
- 首行缩进 text-indent:2em;
- 行高 line-height:
- 装饰 text-decoration:
- 文本图片水平对齐:vertical-align:middle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
颜色:
单词
RGB 0~F
RGBA
text-align:排版,居中
text-indent:2em; 段落首行缩进
weight:300px
line-height:300px;
行高和块的高度一致,就可以上下居中
-->
<style>
h1{
/*color: #FF0000;*/
color: rgba(255, 89, 0,0.8);
text-align: center;
}
.p1{
text-indent: 2em;
}
.p3{
background: #2700ff;
height: 300px;
line-height: 300px;
}
/*下划线*/
.L1{
text-decoration: underline;
}
/*中划线*/
.L2{
text-decoration: line-through;
}
/*上划线*/
.L3{
text-decoration: overline;
}
/*超链接去下划线*/
a{
text-decoration: none;
}
p {
font-family: 宋体;
font-size: 80px;
}
/*<!--*/
/*水平对齐~参照物 a,b*/
/*-->*/
img, span {
vertical-align: middle;
}
</style>
</head>
<body>
<p class="L1">123123</p>
<p class="L2">123123</p>
<p class="L3">123123</p>
<h1>HTML5百度百科</h1>
<p class="p1">
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。HTML产生于1990年,1997年HTML4成为互联网标准,并广泛应用于互联网应用的开发。
</p>
<p>
HTML5是Web中核心语言HTML的规范,用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的,在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进,虽然技术人员在开发过程中可能不会将这些新技术投入应用,但是对于该种技术的新特性,网站开发技术人员是必须要有所了解的
</p>
<p class="p3">
Happy Birthday
</p>
<p>
<img src="images/a.png" alt="">
<span>欢迎学习HTML5</span>
</p>
</body>
</html>
阴影
/*text-shadow : 阴影颜色 ,水平偏移,垂直偏移阴影半径*/
#price {
text-shadow: #2700ff 2px 1px 1px;
}
超链接伪类
正常情况下,a, a : hover
/*默认的颜色*/
a {
text-decoration: none;
color: #000;
}
/*鼠标悬浮的状态 (只需要记住:hover)*/
a:hover {
color: orange;
font-size: 20px;
}
列表
/*ul li*/
/*
list-style:
none 去掉圆点
circle 空心圆
decimal 数字
square 正方形
*/
/*ul{*/
/* background: #d79119;*/
/*}*/
ul li {
height: 30px;
list-style: none;
text-indent: 1em;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>列表样式</title>
<link href = "css/style.css" rel="stylesheet" type="text/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>
#nav{
width: 300px;
background: #d79119;
}
.title {
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height:35px;
background: red;
}
/*ul li*/
/*
list-style:
none 去掉圆点
circle 空心圆
decimal 数字
square 正方形
*/
/*ul{*/
/* background: #d79119;*/
/*}*/
ul li {
height: 30px;
list-style: none;
text-indent: 1em;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color: yellow;
text-decoration: underline;
}
背景
- 背景颜色
- 背景图片
<style>
div {
width: 1000px;
height: 500px;
border: 1px solid #ccc;
background-image: url("images/宝贝.jpg");
/*默认是全部平铺的*/
}
.div1 {
background-repeat: repeat-x;
}
.div2 {
background-repeat: repeat-y;
}
.div3{
background-repeat: no-repeat;
}
</style>
#nav{
width: 300px;
background: #d79119;
}
.title {
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height:35px;
/*颜色,图片,图片位置,平铺方式*/
background: red url("../images/下.jpg") 250px 5px no-repeat;
}
ul li {
height: 30px;
list-style: none;
text-indent: 1em;
background-image: url("../images/右.jpg");
background-repeat: no-repeat;
background-position: 210px 0px;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color: yellow;
text-decoration: underline;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>列表样式</title>
<link href = "css/style.css" rel="stylesheet" type="text/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>
渐变
background-color:#FFFFFF;
background-image: linear-gradient(19deg, #21D4FD 0%, #00ff4e 100%);
盒子模型
什么是盒子模型
margin:外边距
border:边框
padding:内边距
边框
- 边框的粗细
- 边框的样式
- 边框的颜色
内外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <!–外边距的妙用:居中元素-->
<style>
#box {
width: 300px;
border: 1px solid red;
margin: 0 auto;
}
/*
顺时针旋转
margin:0
margin:0 1px
margin:0 1px 2px 3px
*/
h2 {
font-size: 16px;
background-color: #3cbda6;
line-height: 30px;
color: white;
margin: 0 1px 2px 3px;
}
form {
background: #3cbda6;
}
input {
border: 1px solid black;
}
div:nth-of-type(1 ){
padding: 10px 2px;
}
</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个角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
左上 右上 右下 左下 顺时针方向
圆圈: 圆角 = 半径!
-->
<style>
div {
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 100px;
height: 50px;
margin: 30px;
border: 1px solid red;
/*background: red;*/
border-radius: 50px 50px 0px 0px;
}
img {
width: 100px;
height: 100px;
border-radius: 50px;
}
</style>
</head>
<body>
<div></div>
<img src="images/盒子模型.png" alt="">
</body>
</html>
盒子阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--margin:0 auto; 居中
要求:块元素,块元素有固定的宽度
-->
<style>
img{
width: 100px;
height: 100px;
border: 10px solid red;
box-shadow: 10px 10px 100px yellow;
}
</style>
</head>
<body>
<div style="width:100px ;height :100px"></div>
<img src="images/盒子模型.png" alt="">
</body>
</html>
浮动
标准文档流
块级元素:独占一行
h1~h6 p hiv 列表···
行内元素:不独占一行
span a img strong ···
行内元素可以包含在块级元素中,反之,则不可以~
display
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>浮动</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="father">
<div class="layer01"><img src="images/1.png" alt=""/></div>
<div class="layer02"><img src="images/2.png" alt=""/></div>
<div class="layer03"><img src="images/3.png" alt=""/></div>
<div class="layer04">
<h1>
<font color="#0000FF" face="楷体">
浮动的盒子可以向左浮动,也可以向右浮动,知道它的外边缘碰到包含框成另一个浮动盒子为止。
</font>
</h1>
</div>
</div>
</body>
</html>
- 这个也是一种实现行内元素排列的方式,但是我们很多情况都是用float
float
- 左右浮动 float
div {
margin: 10px;
padding: 5px;
}
#father {
border: 1px solid #000;
}
.layer01 {
border: 1px #F00 dashed;
display: inline-block;
float: left;
clear: both;
}
.layer02 {
border: 1px dashed #00F;
display: inline-block;
float: left;
clear: both;
}
.layer03 {
border: 1px dashed #060;
display: inline-block;
float: left;
clear: both;
}
.layer04 {
border: 1px dashed #d7b;
font-size: 12px;
line-height: 23px;
display: inline-block;
float: left;
clear: both;
}
父级边框塌陷的问题
clear
/*
clear:right;右侧不允许有浮动元素
clear:left;左侧不允许有浮动元素
clear:both;两侧不允许有浮动元素
*/
解决方案:
- 增加父级元素的高度
#father {
border: 1px solid #000;
height: 800px;
}
- 增加一个空的div标签,清除浮动
<div class="clear"></div>
.clear {
clear: both;
margin: 0;
padding: 0;
}
-
overflow
在父级元素中增加一个 overflow:hidden;
-
在父类添加一个伪类:after
#father:after {
content: " ";
display: block;
clear: both;
}
小结:
- 浮动元素后面增加空div
- 简单,但代码中尽量避免空div
- 设置父元素的高度
- 简单,元素假设有了固定的高度,就会被限制
- overflow
- 简单,下拉的一些场景避免使用
- 在父类添加伪类:after(推荐)
- 写法稍微复杂一点,但是没有副作用,推荐使用。
对比
-
display
- 方向不可控制
-
float
- 浮动起来的话会脱离标准文档流,所以要解决父级边框塌陷的问题
定位
相对定位
相对定位 : position:relative;
- 相对于原来的位置,进行指定的偏移,相对定位的话,仍然在标准文档流中!原来的位置会被保留
top:-20px;
left:20px;
bottom:-10px;
right:20px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--相对于自己原来的位置进行偏移-->
<style>
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father {
border: 1px solid #666;
padding: 0;
}
#first {
background-color: #8d2cdc;
border: 1px dashed #d31b1b;
position: relative; /*相对定位 : 上 下 左 右 */
top: -20px;
left: -20px;
}
#second {
background-color : #d31b1b;
border: 1px dashed #282bc9;
}
#third {
background-color: #d31b1b;
border: 1px dashed #60c71c;
position:relative;
bottom: 10px;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
- 练习
<!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;
text-decoration: none; /*去掉下划线*/
background-color: pink;
line-height: 100px; /*一行居中*/
text-align: center; /*文字居中*/
color: black; /*文字颜色*/
display: block; /*块级元素*/
}
a:hover {
background: blue;/*悬停*/
}
.a2,.a4{
position: relative;
left: 200px;
top: -100px;
}
.a5{
position: relative;
top: -300px;
left: 100px;
}
</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>
绝对定位
- 定位:基于xxx定位,上下左右~
- 没有父级元素定位的前提下,相对于浏览器定位
- 假设父级元素存在定位,我们通常会相对于父元素进行偏移~
- 在父级元素范围内移动
相对一父级或浏览器的位置,进行指定的偏移,绝对定位的话,他不在标准文档流中,原来的位置不会被保留
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father {
border: 1px solid #666;
padding: 0;
position: relative;
}
#first {
background-color: #8d2cdc;
border: 1px dashed #d31b1b;
}
#second {
background-color: #d31b1b;
border: 1px dashed #282bc9;
position: absolute;
left: 100px;
}
#third {
background-color: #d31b1b;
border: 1px dashed #60c71c;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
固定定位 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: red;
position: absolute;
right: 0;
bottom: 0;
}
div:nth-of-type(2){/*固定定位*/
width: 50px;
height: 50px;
background: yellow;
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
z-index
图层
z-index:默认是0,最高无限 (普遍999)
opacity:0.5 ; 背景透明度
#content {
width: 300px;
padding: 0px;
margin: 0px;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px black solid;
}
ul, li {
padding: 0px;
margin: 0px;
list-style: none; /*去圆点*/
}
/*父级元素相对定位*/
#content ul {
position: relative; /*相对定位*/
}
.tipText, .tipBg {
position: absolute;
width: 380px;
height: 25px;
top: 20px;
}
.tipText{
color: white;
z-index: 9999;
}
.tipBg {
background:black;
opacity: 0.5;/*背景透明度*/
filter:alpha(opacity=50);/*早期版本:背景透明度*/
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="content">
<ul>
<li><img src="images/1.png" alt=""></li>
<li class="tipText">层级场景,微服务《可爱的小黄人》</li>
<li class="tipBg"></li>
<li>时间:2099-01-01</li>
<li>地点:尖笔头老爹的月球一号基地</li>
</ul>
</div>
</body>
</html>