层级
z-index:;样式名设置,样式值是正整数
默认是0
注意:
1、设置层级前提是元素必须开启定位
2、父元素的层级再高也不会盖住子元素
透明度
opacity、transparent、rgba(r,g,b,a)设置透明,
几者的区别是什么
1、属性、属性值
opacity是样式名,transparent、rgba(r,g,b,a)是设置样式值
2、设置范围
opacity相对于给元素整体蒙上一层玻璃
transparent、rgba(r,g,b,a)必须跟在特定的样式名后,例如
背景色,边框色
3、继承问题
opacity是通过样式进行设置的,所以有一定的继承性
transparent、rgba(r,g,b,a)没有继承的,给谁设置,谁会生效
Tab栏的切换
用超链接的锚点功能
<!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>
* {
padding: 0;
margin: 0;
list-style: none;
text-decoration: none;
}
.box {
width: 500px;
height: 500px;
background-color: #bfa;
margin: 0 auto;
}
.title {
width: 100%;
height: 50px;
background-color: blue;
}
.title > a {
display: inline-block;
width: 100px;
line-height: 50px;
background-color: #ccc;
color: #fff;
font-weight: bold;
text-align: center;
}
.title > a:hover {
background-color: #333;
}
.content {
width: 100%;
height: 450px;
background-color: pink;
overflow: hidden;
}
.content>div{
width: 100%;
height: 100%;
font-size: 50px;
line-height: 450px;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<div class="title">
<a href="#box1">页面1</a>
<a href="#box2">页面2</a>
<a href="#box3">页面3</a>
</div>
<div class="content">
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3">box3</div>
</div>
</div>
</body>
</html>
用伪类:target选择器
用来匹配文档(页面)的url的某个标志符的目标元素
这里的:target就是指id="brand"的div对象
每个a标签的href属性须与其兄弟节点.content元素的id值一致
② .content元素与a标签的顺序不能更改,否则选不中a
<!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>
*{
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
}
ul{
width: 400px;
height: 400px;
background-color: pink;
margin: 50px auto;
position: relative;
}
li a{
float: left;
width: 30%;
height: 40px;
line-height: 40px;
border: 1px solid black;
}
li>.content{
width: 100%;
height: 360px;
background-color: brown;
position: absolute;
top: 41px;
font-size: 50px;
color: #fff;
line-height: 360px;
text-align: center;
visibility: hidden;
}
#content1:target{
visibility: visible;
}
#content2:target{
visibility: visible;
}
#content3:target{
visibility: visible;
}
</style>
</head>
<body>
<!--
① 每个a标签的href属性须与其兄弟节点.content元素的id值一致
② .content元素与a标签的顺序不能更改,否则选不中a -->
<ul>
<li>
<a href="#content1">选项一</a>
<div class="content" id="content1">选项一内容</div>
</li>
<li>
<a href="#content2">选项二</a>
<div class="content" id="content2">选项二内容</div>
</li>
<li>
<a href="#content3">选项三</a>
<div class="content" id="content3">选项三内容</div>
</li>
</ul>
</body>
</html>
用lable
原理: 当用户点击label元素时,该label所绑定的input单选框就会被选中,
同时通过使用CSS选择器让被选中的input元素之后的label和.content元素都加上相应的样式。
<!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>
<!--
原理: 当用户点击label元素时,该label所绑定的input单选框就会被选中,
同时通过使用CSS选择器让被选中的input元素之后的label和.content元素都加上相应的样式。
-->
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
position: relative;
width: 500px;
margin: 100px auto;
}
ul li input {
display: none;
}
ul li label {
float: left;
width: 150px;
text-align: center;
line-height: 30px;
border: 1px solid red;
box-sizing: border-box;
cursor: pointer;
}
ul li input:checked + label {
color: #fff;
background-color: #000;
}
ul li .content {
visibility: hidden;
position: absolute;
left: 0;
top: 31px;
width: 100%;
height: 300px;
border: 1px solid #000;
font-size: 24px;
text-align: center;
line-height: 300px;
color: #fff;
}
ul li input:checked ~ .content {
visibility: visible;
}
ul li:nth-child(1) .content {
background-color: #0f0;
}
ul li:nth-child(2) .content {
background-color: #00f;
}
ul li:nth-child(3) .content {
background-color: #f0f;
}
/*
① input需要隐藏,因为我们并不需要显示它,但它却是实现Tab切换的核心力量
② “input:checked+label” 表示被选中的单选框后的 label 元素需要做标记
③ .content 元素需要先全部隐藏
③ “input:checked~.content” 表示被选中的单选框后的 .content 元素需要显示
*/
</style>
</head>
<body>
<!--① label需要绑定input,方法就是label的for属性值与input的id一致,
这样当点击label元素时input单选框就会被选中
② input、label和div三者是有顺序的,不能随意调换顺序-->
<ul>
<li>
<input id="tab1" type="radio" name="tab" checked />
<label for="tab1">选项一</label>
<div class="content">选项一内容</div>
</li>
<li>
<input id="tab2" type="radio" name="tab" />
<label for="tab2">选项二</label>
<div class="content">选项二内容</div>
</li>
<li>
<input id="tab3" type="radio" name="tab" />
<label for="tab3">选项三</label>
<div class="content">选项三内容</div>
</li>
</ul>
</body>
</html>
① input需要隐藏,因为我们并不需要显示它,但它却是实现Tab切换的核心力量
② “input:checked+label” 表示被选中的单选框后的 label 元素需要做标记
③ .content 元素需要先全部隐藏
③ “input:checked~.content” 表示被选中的单选框后的 .content 元素需要显示
用插件swiper
在官网下载并按照上面的提示操作即可