【CSS】CSS前期回顾（2）

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

效果如下：

     本文转自qingkechina 51CTO博客，原文链接：http://blog.51cto.com/qingkechina/1261769，如需转载请自行联系原作者