栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

轮播图小结

CSS教程 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

轮播图小结





Title

*{
padding: 0;
margin: 0;
list-style: none;
}
body{
padding: 20px;
}
.container{
width: 600px;
height: 400px;
overflow: hidden;
position: relative;
border: 3px solid #333;
}
.list{
width: 4200px;
height: 400px;
position: absolute;
z-index: 1;
}
.list img{
float: left;
}
.buttons{
position: absolute;
z-index: 2;
width: 100px;
height: 10px;
bottom: 20px;
left: 250px;
}
.buttons span{
width: 10px;
height: 10px;
border-radius: 50%;
cursor: pointer;
float: left;
border: 1px solid #fff;
margin-right: 5px;
background: #333;
}
.buttons .on{background: orangered;}
.arrow{
text-decoration: none;
color: #fff;
cursor: pointer;
width: 40px;
height: 80px;
line-height: 80px;
text-align: center;
font-size: 36px;
position: absolute;
top: 160px;
background: rgba(0,0,0,.3);
z-index: 2;
display: none;
}
.arrow:hover{
background: rgba(0,0,0,.7);
}
.next{
right: 0px;
}
.container:hover .arrow{display: block}























<
>



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/242945.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号