FlexSlider修改樣式

FlexSlider 是一款非常強大的輪播圖工具。
如果你是小白，并且不知道怎么修改它輪播圖下面幾個圓點的外觀。這里給出一個方法。希望幫到你。
經過試驗發(fā)現(xiàn)，決定FlexSlider 外觀的兩個css文件分別是


其中flexslider.css 這個文件修改大圖下面的幾個按鈕的樣式。
其中的這幾個樣式是關鍵樣式
.flex-control-nav {
width: 100%;
position: absolute;
bottom: 10px; /這個參數(shù)決定下面按鈕的位置/
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;
}

總結

以上是生活随笔為你收集整理的FlexSlider修改样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。