banner_ class 本來(lái)設(shè)置好了的，后來(lái)怎么自己錯(cuò)位了？
qq_噓____________0
2016-04-10 20:46:42
4 回答
qq_噓____________0
TA貢獻(xiàn)8條經(jīng)驗(yàn) 獲得超0個(gè)贊
格式：
.banner {
width: 100%;
overflow: hidden;
margin-bottom: 15px;
}
.banner_bar {
float: right;
position: relative;
overflow: hidden;
}
.imgBox {
position: absolute;
left: 0;
top: 0;
}
/*絕對(duì)定位必須設(shè)置X軸和Y軸*/
.imgBox li {
float: left;
}
.imgBox img {
display: block;
}
.imgNum {
position: absolute;
left: 0;
bottom: 12px;
width: 100%;
text-align: center;
}
.imgNum a {
width: 20px;
height: 5px;
display: inline-block;
background-color: #FFF;
overflow: hidden;
margin: 5px;
}
.imgNum .active {
background-color: #FF7100;
}
.banner_big,
.banner_big img {
width: 810px;
height: 347px;
}
.banner_big .imgBox {
width: 1620px;
height: 347px;
}
.banner_sm,
.banner_sm img {
width: 190px;
height: 400px;
}
.banner_sm .imgBox {
width: 380px;
height: 400px;
}
qq_噓____________0
TA貢獻(xiàn)8條經(jīng)驗(yàn) 獲得超0個(gè)贊
框架代碼：
<div class="banner comWidth ?">
<div class="banner_bar banner_big">
<ul class="imgBox">
<li>
<a href="#"><img src="img/banner/example1.gif" alt="banner"></a>
</li>
<li>
<a href="#"><img src="img/banner/example2.gif" alt="banner"></a>
</li>
</ul>
<div class="imgNum">
<a href="#" class="active"></a>
<a href="#"></a>
<a href="#"></a>
</div>
</div>
添加回答
舉報(bào)
0/150
提交
取消