700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > html ul 圆点轮播图 实现轮播图图片重叠及小圆点

html ul 圆点轮播图 实现轮播图图片重叠及小圆点

时间:2021-04-25 12:43:09

相关推荐

html ul 圆点轮播图 实现轮播图图片重叠及小圆点

轮播图

/* 设置图片的容器大小 */

.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);

}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。