轮播图代码封装

最新推荐文章于 2023-11-18 15:17:50 发布

VIP文章 HAI6545

最新推荐文章于 2023-11-18 15:17:50 发布

阅读量270

点赞数 1

分类专栏： JavaScript案例文章标签： css html css3

本文链接：https://blog.csdn.net/HAI6545/article/details/122309327

版权


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style> 
.carousel{
    width: 600px;
    height: 300px;
    border:1px solid #000;
    margin:50px auto;
    position: relative;
}
.carousel ul, .carousel ol{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.carousel ul li{
    display:none;
}
.carousel ul li.active{
    display: block;
}
.carousel ul li a img{
    width: 600px;
    height: 300px;
}
.carousel ol{
    height: 20px;
    background-color: rgba(255,255,255,.7);
    border-radius:10px;
    position:absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
}
.carousel ol li{
    width: 10px;
    height: 10px;
    background-color: #000;
    float:left;
    border-radius:50%;
    margin:5px;
}
.carousel ol li.active{
    background-color: #f00;
}
.carousel span{
    width: 20px;
    height:

最低0.47元/天解锁文章

HAI6545

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
轮播图代码封装

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style> .carousel{ width: 600px; height: 300px; border:1px solid #000; margin:50px aut..
复制链接

扫一扫