这段内容详细描述了如何创建一个基础的轮播图结构，包括设置外层容器的宽度和居中，定义背景颜色，以及设置绝对定位的asideul元素。此外，还涉及到导航点的样式和箭头按钮的实现，以及当前选中状态的高亮效果。通过CSS代码，可以实现一个具有左侧固定侧边栏、前后导航箭头以及底部指示点的轮播图组件。
轮播图初级部分
基础结构部分
需要达到的效果
css参考代码
注释网页结构中的默认样式需自行清除
.warpper {
margin: 0 auto;
width: 1240px;
}
.lunbo {
height: 500px;
background-color: #f5f5f5;
}
.lunbo .warpper {
position: relative;
}
.lunbo .aside ul {
position: absolute;
top: 0;
left: 0;
width: 251px;
height: 500px;
background-color: rgba(0, 0, 0, .8);
}
.lunbo .aside li {
height: 50px;
line-height: 50px;
}
.lunbo .aside li a {
display: block;
margin-left: 36px;
font-size: 16px;
color: white;
}
.lunbo .aside li span {
margin-left: 15px;
font-size: 14px;
}
.lunbo .aside li:hover {
background-color: #27ba9b;
}
.lunbo .aside li a::after {
content: '';
width: 6px;
height: 11px;
float: right;
margin: 19px 19px 0 0;
background: url(../images/sprites.png) -80px -110px;
}
.lunbo .prev,
.lunbo .next {
position: absolute;
top: 228px;
width: 45px;
height: 45px;
border-radius: 50%;
}
.lunbo .prev {
left: 260px;
background: rgba(0, 0, 0, .2) url(../images/sprites.png) 12px -60px;
}
.lunbo .next {
right: 10px;
background: rgba(0, 0, 0, .2) url(../images/sprites.png) -22px -60px;
}
.lunbo ol {
position: absolute;
width: 110px;
height: 10px;
left: 680px;
bottom: 31px;
}
.lunbo ol li {
float: left;
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 15px;
background-color: rgba(255, 255, 255, .43);
}
.lunbo ol li:last-child {
margin-right: 0;
}
.lunbo ol li:nth-child(3) {
background-color: #fff;
}
扫一扫
759
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
