CSS
快速入门
HTML直接融合CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
通过style标签，在里面写css的代码，每一个声明最好使用分号结尾
语法：
选择器{
声明1;
声明2;
声明3;
}
-->
<style>
h1{
color: dodgerblue;
}
</style>
</head>
<body>
<h1>入门</h1>
</body>
</html>
这样是不规范的，我们应该将css和html分离开
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--通过链接，实现css和html分离 -->
<link rel="stylesheet" href="../css/index.css">
</head>
<body>
<h1>入门</h1>
</body>
</html>
index.css
h1{
color: dodgerblue;
}
CSS的优势
- 内容和表现分离
- 网页结构表现统一，可以实现复用
- 样式十分的丰富
- 建议使用独立与html的css文件
- 利用SEO，网站容易被搜索
CSS的导入方式
- 页面内利用style标签导入
- 标签内导入style
- 外部css
优先级：行内样式>内部样式>外部样式
如果出现冲突，样式以就近原则而决定
CSS的选择器
选择器就是选择对某一个元素或某一类元素进行样式改变
基本选择器
标签选择器
指定某一类标签进行样式的修改
h1{
color: #22d2bc;
background: bisque;
border-radius: 18px;
}
p{
color: #150901;
font-size: 80px;
background: cadetblue;
border-radius: 18px;
}
类选择器
类选择器需要在html里面表明是什么class，类选择器是可以复用的
<body>
<h1 class="hh1">CSS入门</h1>
<h1 class="hh2">好好学习</h1>
<p class="hh1">天天向上</p>
</body>
.hh1{
color: #22d2bc;
background: bisque;
border-radius: 18px;
}
.hh2{
color: #150901;
background: cadetblue;
border-radius: 18px;
}
类选择器就是 .+class名称
Id选择器
同理，Id选择器就要在html里面表明id
<body>
<h1 id="hh1">CSS入门</h1>
<h1 id="hh2">好好学习</h1>
<p id="pp1">天天向上</p>
</body>
#hh1{
color: #22d2bc;
background: bisque;
border-radius: 18px;
}
#hh2 {
color: #150901;
background: cadetblue;
border-radius: 18px;
}
#pp1{
font-size: 80px;
color: darkblue;
}
Id选择器使用 #+id名即可
注意：
当出现冲突时，Id选择器>类选择器>标签选择器
高级选择器
层次选择器
先建立一个层级关系
<body>
<p class="ppp">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>
可以看到body下面有三个p标签，一个ul标签，ul标签下面有三个li标签，三个li标签中每个标签里面有一个p标签
后代选择器
后代选择器：某个元素的后面 祖爷爷 爷爷 爸爸 儿子
将body下的所有p标签都改变样式
body p{
color: #de1333;
background: #1fecec;
}
子选择器
子选择器：只有一代，也就是只有儿子
body>p{
color: #de1333;
background: #1fecec;
}
可以看到body下面的第一层的p标签样式改变，而ul标签中li标签下的p标签没有改变
相邻选择器
相邻选择器：也称为相邻兄弟选择器，只有跟它同级别的下一个标签会改变，只有一个
.ppp + p{
color: #de1333;
background: #1fecec;
}
通用选择器
通用选择器：标注的标签下的所有兄弟都会改变，也是下方的样式会变，而这个class代表的标签本身不会改变
.ppp ~ p{
color: #de1333;
background: #1fecec;
}
结构伪类选择器
<body>
<p class="ppp">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>l1</li>
<li>l2</li>
<li>l3</li>
</ul>
</body>
可以看到目前没有样式，如何让ul下的第一个li标签有样式？最后一个呢？
ul li:first-child{
background: olivedrab;
}
ul li:last-child{
background: chocolate;
}
如何只选中p1？
/*
这种方法是先定位到父元素，然后选择父元素的第n个元素，按照顺序进行选择
选择当前p元素的父级元素body，然后选中父级元素的第一个，并且是当前的p标签类型才会生效
*/
p:nth-child(1){
background: #34ec28;
}
如何选中p标签中的第二个标签？
p:nth-of-type(2){
background: #34ec28;
}
p:nth-of-type(2)这个也是先定位到父元素，再定位到p标签的第二个，区别是这个方法的顺序只考虑p标签，是按照类型来判断定位的，找的是body下按照p标签的顺序，找到第二个p标签
特效：
p:hover{
background: #34ec28;
}
鼠标移上去显示背景特效
属性选择器（重要）
<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">6</a>
<a href="/a.pdf" class="links item">7</a>
<a href="/abc.pdf" class="links item">8</a>
<a href="abc.doc" class="links item">9</a>
<a href="abcd.doc" class="links item last">10</a>
</p>
</body>
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: cadetblue;
text-align: center;
color: gainsboro;
text-decoration: none;
margin-right: 10px;
font: bold 20px/50px Arial;
}
如何选中存在id属性的元素？
a[id]{
background: yellow;
}
那么如何选中id为first的元素？
a[id=first]{
background: yellow;
}
刚好第一个就是id为first的元素
属性选择器厉害的一点就是，可以用正则表达式进行选中
比如选中class中存在links的元素
/*
= 是绝对等于
*=是包含这个元素的
*/
a[class*="links"]{
background: yellow;
}
比如选中href中以http开头的元素
/*
= 是绝对等于
*=是包含这个元素的
^=是以这个元素开头
*/
a[href^="http"]{
background: yellow;
}
比如选中href中以pdf结尾的元素
/*
= 是绝对等于
*=是包含这个元素的
^=是以这个元素开头
$=是以这个元素结尾
*/
a[href$="pdf"]{
background: yellow;
}
美化网页
美化页面的作用：
- 有效的传递信息
- 美化网页，吸引用户
- 凸显页面主体
- 提供用户的体验
字体样式
<body>
<h1>人物简介</h1>
<p class="p1">
斯蒂芬·库里（Stephen Curry），全名沃德尔·斯蒂芬·库里二世（Wardell Stephen Curry II），1988年3月14日出生于美国俄亥俄州阿克伦，美国职业篮球运动员，司职控球后卫，效力于NBA金州勇士队。
</p>
<p class="p2">
斯蒂芬·库里于2009年通过选秀进入NBA后一直效力于金州勇士队，新秀赛季入选最佳新秀第一阵容；2014-15、2016-17、2017-18赛季、2021-22赛季四次夺得NBA总冠军，并于2021-22赛季当选总决赛MVP（FMVP）；两次荣膺常规赛MVP；2015-16、2020-21赛季两次荣膺常规赛得分王；2021-22赛季荣膺西部决赛MVP； 8次入选最佳阵容（4次一阵、3次二阵、1次三阵）； 8次入选全明星首发阵容，2021年10月入选NBA75大巨星，12月成为NBA历史三分王，2022年荣膺全明星正赛MVP。
斯蒂芬·库里于2010年随美国队获土耳其世锦赛冠军，2014年随美国队获西班牙篮球世界杯冠军。2019福布斯100名人榜，斯蒂芬·库里排名第23位。
</p>
<p>Never give up Never lose hope. 永不放弃，永不心灰意冷。</p>
<p>Always have faith It allows you to cope.永存信念，它会使你应付自如。</p>
<p>Trying times will pass As they always do.难捱的时光终将过去，一如既往。</p>
<p>Just have patience Your dreams will come true.只要有耐心，梦想就会成真。</p>
<p>So put on a smile You’ll live through your pain.露出微笑，你会走出痛苦。</p>
<p>Know it will pass And strength you will gain 相信苦难定会过去，你将重获力量</p>
</body>
/*
font-family 字体,字体可以有两个属性，当中文会自动使用中文字体，英文会自动使用英文字体
font-size 大小
font-weight 粗细
color 颜色
*/
body{
font-family: 楷体,"Book Antiqua";
font-size: 18px;
}
.p1{
font-weight: bold;
color: cadetblue;
}
字体样式除了可以使用单独的font-**来标记，还可以使用font
/*
字体风格比如斜体 oblique
加粗 bolder
大小 12px
字体 "楷体"
*/
.p2{
font: oblique bolder 12px "楷体";
}
文本样式
颜色
颜色有很多种表达方式，主要有两类：单词、RGB
color: yellow;
color: #1bcad0;
color: rgb(0,255,255);
color: rgb(2, 54, 54,0.1);
/*
rgba()是在rgb的基础上加了一个参数a，表示透明度，取值范围为0-1
*/
对齐方式
居中
text-align: center;
靠右
text-align: right;
靠左
text-align: left;
首行缩进
text-indent: 2em;
em是字符单位，一个em表示一个字符所占的位置大小
行高
line-height: 30px;
文本的装饰
下划线
text-decoration: underline;
中划线
text-decoration: line-through;
上划线
text-decoration: overline;
文本阴影
/*
text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径
*/
.pp{
text-shadow: sandybrown 10px 0px 2px;
}
图片和文本对齐
<p class="p1">
<img src="../main/resources/image/curry.jpg">
<span>斯蒂芬·库里（Stephen Curry），1988年3月14日出生于美国俄亥俄州阿克伦，美国职业篮球运动员，司职控球后卫，效力于NBA金州勇士队。</span>
</p>
img,span{
vertical-align: middle;
}
对齐需要有参照物，所以使用span和img一起
注意：这里的中不是center，是middle
a标签去除下划线
a{
text-decoration: none;
}
超链接伪类
a:link{} 未访问的链接
a:visited 以访问的链接
a:havor 鼠标悬停
a:active 被选择的链接
鼠标移动改变样式
a{
text-decoration: none;
color: black;
}
a:hover{
color: cadetblue;
font-size: 30px;
}
鼠标按住不放改变样式
a{
text-decoration: none;
color: black;
}
a:hover{
color: cadetblue;
font-size: 30px;
}
a:active{
color: yellow;
}
列表样式
<div id="nav">
<h1>商品分类</h1>
<ul class="service-bd" role="menubar">
<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> <a href="">箱包</a></li>
<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> <a href="">车品</a></li>
<li><a href="">食品</a> <a href="">生鲜</a> <a href="">母婴</a></li>
<li><a href="">医药</a> <a href="">保健</a> <a href="">进口</a></li>
</ul>
</div>
#nav{
width: 360px;
background: darkgray;
}
h1{
color: cadetblue;
background: sandybrown;
}
/*
list-style none 去掉圆点
circle 变成空心圆
decimal 变成数字
square 变成正方形
*/
ul{
background: darkgray;
}
ul li{
height: 30px;
list-style: none;
text-indent: 2em;
}
a{
text-decoration: none;
font-size: 18px;
}
a:hover{
color: yellow;
text-decoration: underline;
}
背景图像
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
div{
width: 900px;
height: 1600px;
border: 1px solid black;
background-image: url("../main/resources/image/curry.png");
/*
默认是全部平铺的 repeat
*/
}
.div1{
background-repeat: repeat-x;
}
.div2{
background-repeat: repeat-y;
}
.div3{
background-repeat: no-repeat;
}
当使用一张图片作为div的背景，会默认平铺重复很多次，我们可以通过background-repeat进行选择实现纵向重复、横行重复、不重复
除此之外，我们还可以定位图片的位置
<div id="nav">
<h1>商品分类</h1>
<ul class="service-bd" role="menubar">
<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> <a href="">箱包</a></li>
<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> <a href="">车品</a></li>
<li><a href="">食品</a> <a href="">生鲜</a> <a href="">母婴</a></li>
<li><a href="">医药</a> <a href="">保健</a> <a href="">进口</a></li>
</ul>
</div>
#nav{
width: 460px;
height:900px;
}
h1{
color: cadetblue;
background: sandybrown;
}
/*
list-style none 去掉圆点
circle 变成空心圆
decimal 变成数字
square 变成正方形
*/
ul li{
height: 50px;
list-style: none;
text-indent: 2em;
/*
background: 颜色 图片 图片位置 平铺方式
*/
background: antiquewhite url("../main/resources/image/jt_32.png") 380px 11px no-repeat;
}
a{
text-decoration: none;
font-size: 36px;
}
a:hover{
color: yellow;
text-decoration: underline;
}
我们通过background将图片放到了每一个商品分类的左边
background也可分开写
ul li{
height: 50px;
list-style: none;
text-indent: 2em;
/*
background: 颜色 图片 图片位置 平铺方式
*/
background-color: antiquewhite;
background-image: url("../main/resources/image/jt_32.png");
background-repeat: no-repeat;
background-position: 380px 11px;
}
渐变
body{
background-image: linear-gradient(19deg, #2db5d3 0%, #173dcc 100%);
background-repeat: no-repeat;
}
盒子模型
margin：外边距
margin如果使用auto,那么会自动居中，但是前提是在一个有宽度的盒子内或者块内才可以实现
margin:0 auto; 左右居中
margin:0; 上下左右都为0
margin:1px 2px; 上下为1，左右为2
margin:1px 2px 3px 4px; 上1 右2 下3 左4
border：边框
border: 1px solid darkgray; 粗细 样式 颜色
padding：内边距
padding与margin类似，只是改变的是内边距
注意：
很多标签默认有外边距，有时候效果跟设置的不一样可以看看是不是因为默认的外边距导致的；
盒子模型的盒子在页面中的大小为 margin+border+padding+内容宽度；
圆角边框
<div id="box">
</div>
/*
边框的参数按照顺时针，从左上开始，每一个角执行一个参数，进行一个循环
比如如果只有一个参数10px，那么四个角都是10px
如果有两个参数10px 20px，那么左上10px，右上20px，右下10px，左下20px以此类推
*/
#box{
width: 100px;
height: 100px;
border: 5px solid olivedrab;
border-radius: 50px 20px;
}
如果想让这个div呈现一个圆形，可以将圆角设置为宽度的一半+边框的大小
#box{
width: 100px;
height: 100px;
border: 5px solid olivedrab;
border-radius: 55px;
}
除了画div之外，我们还可以让图片变成圆角，比如很多网页的头像都是圆形
<img src="../main/resources/image/curry.png">
/*取168px是因为这个图片大小是355*356，边框为0，因此直接取168px就可以实现圆形
*/
img{
border-radius: 168px;
}
盒子阴影
<div id="box">
</div>
#box{
width: 100px;
height: 100px;
border: 5px solid olivedrab;
border-radius: 55px;
/*
box-shadow: x位置 y位置 模糊半径 颜色
*/
box-shadow: 10px 10px 8px black;
}
同理图片也可也做出阴影效果
<div id="box">
<img src="../main/resources/image/curry.png">
</div>
img{
width: 320px;
height: 320px;
border: 8px solid gainsboro;
border-radius: 168px;
box-shadow: 8px 8px 68px black;
}
如果要使图片居中，那么可以先定义图片为块元素，再设置即可。
Display
块级元素：独占一行的元素，比如：h1-h6、p、div、列表等
行内元素：不独占一行的元素，，比如：span、a、img、strong等
行内元素可以包含在块级元素中，反之则不行
但是我们可以通过display改变这些元素
<body>
<div id="box">
div元素
</div>
<span id="box2">
span元素
</span>
</body>
#box{
width: 100px;
height: 100px;
border: 3px solid olivedrab;
}
#box2{
width: 100px;
height: 100px;
border: 3px solid olivedrab;
}
可以看到div作为块元素独占一行，我们可以通过display: block;将span也设置为块元素
#box2{
width: 100px;
height: 100px;
border: 3px solid olivedrab;
display: block;
}
除此之外，我们还可以通过display: inline-block;将这两个元素设置为既是行内元素也是块元素
#box{
width: 100px;
height: 100px;
border: 3px solid olivedrab;
display: inline-block;
}
#box2{
width: 100px;
height: 100px;
border: 3px solid olivedrab;
display: inline-block;
}
同理可知，我们也可以通过display: inline;将div设置为行内元素
#box{
width: 100px;
height: 100px;
border: 3px solid olivedrab;
display: inline;
}
#box2{
width: 100px;
height: 100px;
border: 3px solid olivedrab;
display: inline-block;
}
| 名称 | 作用 |
|---|---|
| block | 将元素设置为块元素 |
| inline | 将元素设置为行内元素 |
| inline-block | 将元素设置为块元素的同时也有行内元素特性，可以在同一行 |
| none | 在页面消失但是是存在的，只是没有显示出来 |
浮动
浮动可以让一个盒子向左或向右，直到它的外边缘碰到包含框或另一个浮动盒子为止。
通常使用浮动带来实现元素的排列。
比如现在有两张图片
<body>
<div id="box">
<div id="curry1">
<img src="../main/resources/image/curry.png">
</div>
<div id="curry2">
<img src="../main/resources/image/curry.jpg" style="width: 180px;height: 320px">
</div>
</div>
</body>
#curry1{
display: inline-block;
}
#curry2{
display: inline-block;
}
现在可以看到两张图片之间有空隙，如果我们增加浮动，让两张图片向左浮动
#curry1{
display: inline-block;
float: left;
}
#curry2{
display: inline-block;
float: left;
}
但是浮动会存在很多问题，比如当网页的大小发生改变，浮动就会自动重新排版，会跟之前的样式不同。
拓展：
clear可以消除浮动，它有三个属性right 右侧不允许有浮动元素，left 左侧不允许有浮动元素，both 两侧不允许有浮动元素
父级边框塌陷的问题
我们将最外层的div加上边框
<body>
<div id="box">
<div id="curry1">
<img src="../main/resources/image/curry.png">
</div>
<div id="curry2">
<img src="../main/resources/image/curry.jpg" style="width: 180px;height: 320px">
</div>
</div>
</body>
#box{
border:3px solid olivedrab;
}
#curry1{
display: inline-block;
}
#curry2{
display: inline-block;
}
此时可以看到两张图片都在边框内，此时如果两张图片所在的div都加上向左浮动
#box{
border:3px solid olivedrab;
}
#curry1{
display: inline-block;
float: left;
}
#curry2{
display: inline-block;
float: left;
}
可以看到此时边框塌陷，浮动的元素跑到了父级边框的外面，解决办法可以直接写定父级边框的高度
#box{
border:3px solid olivedrab;
height: 360px;
}
除此之外，我们可以在原本的父级div下新加一个空的div
<body>
<div id="box">
<div id="curry1">
<img src="../main/resources/image/curry.png">
</div>
<div id="curry2">
<img src="../main/resources/image/curry.jpg" style="width: 180px;height: 320px">
</div>
<!-- 新加的div-->
<div id="box2"></div>
</div>
</body>
#box{
border:3px solid olivedrab;
}
#curry1{
display: inline-block;
float: left;
}
#curry2{
display: inline-block;
float: left;
}
/*新的div的样式*/
#box2{
clear: both;
margin: 0;
padding: 0;
}
此时解决了父级边框塌陷的问题，除此之外还有一些方法能够解决。
overfloat
overfloat可以让内容超出父级边框时，能够让原内容仍然显示在父级边框内，并且有一个滚动条让我们可以查看父级边框内的内容。
<body>
<div id="box">
<img src="../main/resources/image/curry.png">
<p>
斯蒂芬·库里（Stephen Curry），全名沃德尔·斯蒂芬·库里二世（Wardell Stephen Curry II），1988年3月14日出生于美国俄亥俄州阿克伦，美国职业篮球运动员，
司职控球后卫，效力于NBA金州勇士队。
</p>
</div>
</body>
#box{
border:3px solid olivedrab;
height: 300px;
}
可以看到此时内容超出父级边框，那我们使用overflow:scroll
#box{
border:3px solid olivedrab;
height: 300px;
overflow: scroll;
}
此时出现滚动条，并且内容显示在了父级边框内。
同理这种方法也可以解决上面的父级边框塌陷的问题，只需要在父级边框加上overflow:auto。
注意:display的方向不可控制，float浮动会脱离标准文档流，会出现父级边框塌陷的问题
定位
相对定位
相对某一个元素现在的位置进行定位
<div id="outbox">
<div id="box">
<img src="../main/resources/image/curry.png">
</div>
<div id="box2">
盒子2
</div>
<div id="box3">
盒子3
</div>
</div>
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 28px;
}
#outbox{
border:3px solid gold;
}
#box{
border:3px solid olivedrab;
height: 300px;
overflow: scroll;
/*
相对定位
*/
position: relative;
top: -10px;
left: 10px;
}
#box2{
border:3px solid red;
position: relative;
bottom: 30px;
right: 15px;
}
#box3{
border:3px solid powderblue;
}
position: relative; 相对定位
top: -10px; 原位置的上方向距离-10px，相对于向上移10px
left: 10px; 原位置的左方向距离+10px，相对于向右移10px
position: relative;
bottom: 30px; 原位置的下方向距离+30px，相对于向上移30px
right: 15px; 原位置的右方向距离+15px，相对于向左移15px
注意：这里的移动距离不是top就往上移，right就往右移，如果移动距离为负数才是往名称的方向移动，正数是往反方向移动。主要是因为定位选择的参照物是原位置的某个方向的距离，正数就是原方向距离加上移动距离，负数就是原方向距离减去移动距离。除此之外，相对定位移动之后仍然保留了原来的位置，只是显示了偏移后的位置而已。
绝对定位
绝对定位分两张情况
- 没有父级元素定位的前提下，根据浏览器进行定位，这里的父级元素定位指的是没有设置position属性
- 有父级元素定位，根据父级元素进行定位，比如父级元素中设置了position属性，就是相对于父级元素定位
<div id="outbox">
<div id="box">
<img src="../main/resources/image/curry.png">
</div>
<div id="box2">
盒子2
</div>
<div id="box3">
盒子3
</div>
</div>
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 28px;
}
#outbox{
border:3px solid gold;
}
#box{
border:3px solid olivedrab;
height: 300px;
overflow: scroll;
}
#box2{
border:3px solid red;
}
#box3{
border:3px solid powderblue;
}
当我们设置盒子2为绝对定位
#box2{
border:3px solid red;
position: absolute;
}
发现设置为绝对定位之后盒子2改变了原本的位置及样式
我们设置一下定位的位置，比如设置右边50px
#box2{
border:3px solid red;
position: absolute;
right: 50px;
}
可以看到此时父级元素没有设置position，所以此时是根据浏览器定位，right: 50px;指的是相对于浏览器右边距离50px，距离大小跟相对定位的不同。
假设父级元素有定位
#outbox{
border:3px solid gold;
position: relative;
}
此时盒子2相对于父级边框的右边距离为50px。
固定定位
固定定位就是定位在页面的某一个位置，无论怎么移动都会保持在同一个位置，比如有些网站的导航栏、返回顶部功能等，它们都固定在某一个位置
<div id="box1">
盒子1
</div>
<div id="box2">
盒子2
</div>
#box1{
border:3px solid red;
position: fixed;
right: 0;
bottom: 100px;
}
#box2{
border:3px solid powderblue;
}
此时盒子1就固定在了页面这个位置，页面的上下滑动都不会改变它的位置
z-index
实际上就相当于图层的层级，可以参考ps中的图层
<div id="box">
<ul>
<li>
<img src="../main/resources/image/curry.png">
</li>
<li class="tipText">库里</li>
<li class="tipBg"></li>
<li>时间：2022-09-10</li>
<li>地点：甲骨文球馆</li>
</ul>
</div>
/*
很多标签都总有一个默认的外边距，所以我们先让margin为0
*/
/*
边框的参数按照顺时针，从左上开始，每一个角执行一个参数，进行一个循环
比如如果只有一个参数10px，那么四个角都是10px
如果有两个参数10px 20px，那么左上10px，右上20px，右下10px，左下20px以此类推
*/
#box{
padding:0;
margin: 0;
width: 330px;
overflow: hidden;
font-size: 18px;
line-height: 30px;
border: 3px solid darkgreen;
}
ul,li{
padding:0;
margin: 0;
list-style: none;
}
/*父级元素相对定位*/
#box ul{
position: relative;
}
.tipText,.tipBg{
position: absolute;
width: 330px;
height: 30px;
top: 300px;
}
.tipText{
color: white;
}
.tipBg{
background: black;
}
可以看到tipText所在的li被tipBg所在的li所遮住了，此时我们如果需要库里二字显示在黑色背景之上可以通过z-index
.tipText{
color: white;
/*从0开始取值，可以随便取*/
z-index: 999;
}
除了调整层级还有一个属性可以实现类似的效果，我们可以在tipBg里设置透明度
.tipBg{
background: black;
opacity:0.3;
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
