s="warp">
<div class="right"></div>
<div class="left"></div>
</div>
<div class="f-box">^</div>
</body>
</html>
12. 层级关系
z-index: *;
- 只针对于非static有定位元素
- 值越高优先级越高，值相等会实现覆盖-后来者居上
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 150px;
height: 150px;
background: blue;
position: absolute;
z-index:
}
.box2 {
width: 180px;
height: 180px;
background: black;
position: absolute;
z-index: ;
}
.box3 {
width: 200px;
height: 200px;
background: red;
position: absolute;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
13. banner轮播图
静态简易轮播
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<title>Examples</title>
<style>
* {
margin: 0;
padding: 0;
}
.banner-wrap{
/* 设置大盒子的宽高和图片一致*/
width: 1023px;
height: 400px;
/*让轮播图盒子居中*/
margin-left: auto;
/*让轮播图盒子居中*/
margin-right: auto;
margin-top: 50px;
position: relative; /* 相对定位，让其占据一定的位置*/
/* 用户无法选中*/
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.img-box{
width: 1023px;
height: 400px;
/* overflow: hidden; 不用overflow解决溢出，用绝对定位让其重叠 */
}
.img-box img {
position: absolute;
}
li {
list-style: none; /*去除列表的小圆点 用列表的原因时其很有规则*/
}
.previous, .next { /*注意此处一次写两个样式，要用逗号分隔开*/
width:70px;
height:100px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
font-size: 50px;
cursor: pointer;
text-align: center;
line-height:100px;
position: absolute; /*绝对定位让其重叠*/
top: 50%; /* 相对于轮播图盒子位置的百分之五十高度*/
z-index: 3; /* 优先级高于图片盒子*/
margin-top:-50px; /* 位置完全居中*/
}
.previous {
left: 0; /*靠左*/
}
.next{
right: 0; /*靠右*/
}
.button{
position: absolute;
bottom: 20px;
z-index: 2;
left: 50%;
margin-left:-39px;
}
.button li{
width: 16px;
height: 16px;
background: white;
float: left; /* 改变列表排列顺序为左到右而不是默认的上到下*/
margin-left: 10px; /*按钮间间距*/
border-radius: 8px 8px 8px 8px ; /* CSS3 设置圆角*/
cursor: pointer;
}
.button .on {
background: orange; /*优先级最高时的颜色变化*/
}
</style>
</head>
<body>
<div class="banner-wrap">
<div class="img-box">
<img src="image/1.jpg" alt="" width="1023" height="400" >
<img src="image/2.jpg" alt="" width="1023" height="400" style="z-index: 2">
<