【CSS】CSS前期回顧（2）

技術小胖子發表於2017-11-18
CSS
（6）搜尋框向右對齊
#searchBox

{

   float:right;

background-color:#CCC;

}
為使按鈕看起來像普通文字，對按鈕進行相應的設定
#searchBox #submit

{

   transparent;

   border:0;

   margin:0px;

   padding:0px;

}

input.textfield, #searchBox button

{

   margin:0px;

   padding:0px;

}
效果如下：

165251763.jpg

（7）為主選單設定圓角

使用畫圖軟體繪製兩個圖，分別如下：

main_menu_top.gif

165302527.jpg

main_menu_bottom.gif

165312171.jpg

#mainMenuWrapper

{

   background-color:#CCC;

   background-image:url(images/main-menu-top.gif);

   background-repeat:no-repeat;

   padding-top:3px;

   margin-top:10px;

}

#mainMenuWrapper2

{

   background-image:url(images/main-menu-bottom.gif);

   background-repeat:no-repeat;

   background-position:bottom;

   padding-bottom:7px;

}

此時的效果為：

165324673.jpg

這是由於在這兩個外層的div中，選單和搜尋框這兩個div都是浮動的盒子，脫離了標準流，因此高度收縮為零了。解決辦法，在HMTL的form下面增加一行

<div class=”clearBoth”></div>

再設定CSS

.clearBoth

{

   clear:both;

}

效果如下：

165340787.jpg

     本文轉自qingkechina 51CTO部落格，原文連結：http://blog.51cto.com/qingkechina/1261769，如需轉載請自行聯絡原作者


相關文章