轮播图
/* 设置图片的容器大小 */
.img-list{
width: 300px;
height: 300px;
/* 上下100 左右居中 */
margin: 100px auto;
/* 开启相对定位*/
position: relative;
}
.img-list li{
position: absolute;
}
/* 通过修改元素的层级来显示图片 */
.img-list li:nth-child(4){
z-index: 1;
}
/* 设置导航点的样式 */
.pointer{
position: absolute;
z-index: 9999;
bottom: 20px;
left: 40px;
}
.pointer a{
float: left;
width: 10px;
height: 10px;
margin: 0px 2px;
margin-left: 4px;
border-radius: 50%;
background-color: rgba(255, 255, 255, .3);
/* 表示将背景颜色值设置到内容区,边缘和内边距不在有背景颜色 */
background-clip: content-box;
/* transparent 表示透明 */
border: 2px solid transparent;
}
.pointer a.active{
background-color: #fff;
border: 2px solid rgba(255, 255 255, .3);
}