FlexSlider修改样式
FlexSlider 是一款非常强大的轮播图工具。
如果你是小白，并且不知道怎么修改它轮播图下面几个圆点的外观。这里给出一个方法。希望帮到你。
经过试验发现，决定FlexSlider 外观的两个css文件分别是
其中flexslider.css 这个文件修改大图下面的几个按钮的样式。
其中的这几个样式是关键样式
.flex-control-nav {
width: 100%;
position: absolute;
bottom: 10px; / 这个参数决定下面按钮的位置/
text-align: center;
}
.flex-control-nav li {
margin: 0 6px;
display: inline-block;
zoom: 1;
*display: inline;
}
.flex-control-paging li a {
width: 40px;
height: 4px;
display: block;
background: #ff0000; / 这个决定背景颜色/
background: rgba(0.9,0, 0, 1);/ 这个前三个是RGB色最后一个是透明度/
cursor: pointer;
text-indent: -9999px;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 3px rgba(0.9, 0, 0, 1);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.flex-control-paging li a:hover {
background: #fff; / 这个鼠标移动上来的颜色/
background: rgba(0.5, 0, 0, 0.7);
}
.flex-control-paging li a.flex-active {
background: #000;
background: rgba(0, 0, 0, 0);
cursor: default;
}
1330
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
