(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-p_w_picpath:url(p_w_picpaths/main-menu-top.gif);
   background-repeat:no-repeat;
   padding-top:3px;
   margin-top:10px;
}
#mainMenuWrapper2
{
   background-p_w_picpath:url(p_w_picpaths/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;
}

效果如下: