4 回答

TA貢獻8條經驗 獲得超0個贊
格式:
.banner {
width: 100%;
overflow: hidden;
margin-bottom: 15px;
}
.banner_bar {
float: right;
position: relative;
overflow: hidden;
}
.imgBox {
position: absolute;
left: 0;
top: 0;
}
/*絕對定位必須設置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;
}

TA貢獻8條經驗 獲得超0個贊
框架代碼:
<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>
- 4 回答
- 0 關注
- 2009 瀏覽
相關問題推薦
添加回答
舉報