(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;}
效果如下: