（6）搜索框向右對齊#searchBox
{
? ?float:right;
background-color:#CCC;
}為使按鈕看起來像普通文字，對按鈕進行相應的設置#searchBox #submit
{
? ?transparent;
? ?border:0;
? ?margin:0px;
? ?padding:0px;
}
input.textfield, #searchBox button
{
? ?margin:0px;
? ?padding:0px;
}效果如下：

（7）為主菜單設置圓角

使用畫圖軟件繪制兩個圖，分別如下：

main_menu_top.gif

main_menu_bottom.gif

#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;
}

此時的效果為：

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

<div class="clearBoth"></div>

再設置CSS

.clearBoth
{
? ?clear:both;
}

效果如下：

總結

以上是生活随笔為你收集整理的【CSS】CSS前期回顾（2）的全部內容，希望文章能夠幫你解決所遇到的問題。

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