更新时间:2022-09-13 12:24:39
(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,如需转载请自行联系原作者