下拉及多级弹出菜单-Web标准(div+css)教程

敖游

2016-03-06

来源：遨游建站

　　预览显示效果如下所示，因背景图片比较长，所以右侧显示不太友好，下一步就需要把a的宽度给去掉，设置span的背景，使右侧显示正常，另外把三个按钮横向排列

　　在a上增加如下代码：

　　float:left; margin:5px;

　　横向排列，并增加5px的外边距，现在看下效果吧。为了美观，下一步需要a的左侧增加填充，使文字不死贴左侧，同理span右侧需要增加一个同样的填充。

　　a { display: block; float:left; margin:5px; height: 37px;line-height: 37px; text-align: center; background: url(btn_bg.gif) no-repeat 0px 0px; color: #d84700; font-size: 14px; font-weight: bold; text-decoration: none; padding-left:18px; }

　　a span { display:block; background: url(btn_bg.gif) no-repeat right 0px; padding-right:20px;}

　　a:hover { background: url(btn_bg.gif) no-repeat 0px -37px;}

　　a:hover span{ background: url(btn_bg.gif) no-repeat right -37px;}

　　对比以上代码，可能你已经发现，原来a顶部的3px给去掉了，把高度改为37px了，行高也改为37px了，为什么这么做，大家动手试下就明白了。然后设置a下span的背景图片，span默认是内联元素，所以需先转换为块级元素；另外需增加鼠标经过时span的样式。显示效果如下，对比一下实例图，是不是实现了这样的效果。

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

　　a { display: block; float:left; margin:5px; height: 37px;line-height: 37px; text-align: center; background: url(/upload/2010-08/17/091722_btn_bg.gif) no-repeat 0px 0px; color: #d84700; font-size: 14px; font-weight: bold; text-decoration: none; padding-left:18px; }

　　a span { display:block; background: url(/upload/2010-08/17/091722_btn_bg.gif) no-repeat right 0px; padding-right:20px;}

　　a:hover { background: url(/upload/2010-08/17/091722_btn_bg.gif) no-repeat 0px -37px;}

　　a:hover span{ background: url(/upload/2010-08/17/091722_btn_bg.gif) no-repeat right -37px;}

　　</style>

　　</head>

　　<body>

　　<p><a href="#"><span>免费注册</span></a><a href="#"><span>登录</span></a><a href="#"><span>在淘宝网上开店</span></a></p>

　　</body>

　　</html>

　　提示：可以先修改部分代码后再运行

　　文章出处：标准之路编辑：杨雨晨思

3 / 3

企业网站建设

阅读原文

阅读245

下一篇：CSS表单设计-Web标准(div+css)教程

上一篇：横向导航菜单-Web标准(div+css)教程

写评论...