css學習筆記之滑動門

學習來源:http://www.cnblogs.com/xiaohuochai/p/5025394.html


三層嵌套  可擴展 適用於nav

爲了使滑動門自適應長度,最外層不固定width,而是用display:inline-block。

把中間放最外層也可以,那就不能用margin值來使透明的圓角不被覆蓋,可以讓左右兩邊用相對定位,移出去,讓透明圓角露出來。

最好把中間部分放最裏面  然後中間部分左右各設置margin值 透明圓角的部分不會被有背景的中間部分遮蓋

html:

<div class="btnL">
<div class="btnR">
    <div class="btn">內容</div>
       </div>
</div>

css:

.btnL{ display: inline-block; margin:0 auto; background:url(img3/btnL.gif) no-repeat;}
.btnR{ background:url(img3/btnR.gif) no-repeat right 0;}
.btn{ height:25px; background:url(img3/btn.gif) repeat-x; margin:0 9px;}


兩層嵌套  擴展性差 適用於按鈕

侷限是文字最多隻能到父級div的寬度 再多 btn和btnR之間會出現斷層

html:

<div class="btn">
<div class="btnR">內容</div>
</div>

css:

.btn{ display: inline-block; background:url(img/btn2.png) no-repeat;}
.btnR{ height:31px; background:url(img/btnR.png) no-repeat right 0; padding: 0 10px;}  
 padding值是爲了讓文字與按鈕左右有空隙








發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章