在制作网页的时候,很流行使用标签的方式进行分类显示,圆角标签具有样式美观、表现方式形象的优点,一般我们都会将圆角标签的背景制作成一张图片,这样做的不足之处是如果标签文字字数变化(如图1),固定的背景图片不能随之进行扩展。这样我们就需要制作很多张不同宽度的背景图片,很不方便。下面介绍两种制作可扩展圆角标签的方法。
以下是引用片段: <style type="text/css"> a.tab{ float:left; margin:10px; padding-right:10px; background:#4B90C6 url(tab_bg.gif) right top no-repeat; font:bold 14px/30px 'Verdana'; color:#FFF;} a.tab span{ padding-left:10px; background:url(tab_bg.gif) no-repeat; display:block;} </style> <body bgcolor="#FFFFFF"> <a href="#" class="tab"><span>首页</span></a> <a href="#" class="tab"><span>个人资料</span></a> <a href="#" class="tab"><span>留言本</span></a> </body> |
|
以下是引用片段: <style type="text/css"> a.tab{ float:left; margin:10px; padding-right:10px; background:#033EA5 url(tab_right.gif) right top no-repeat; font:bold 14px/30px 'Verdana'; color:#FFF;} a.tab span{ padding-left:10px; background:url(tab_left.gif) no-repeat; display:block;} </style> <body bgcolor="#FFFFFF"> <a href="#" class="tab"><span>首页</span></a> <a href="#" class="tab"><span>个人资料</span></a> <a href="#" class="tab"><span>留言本</span></a> </body> |
|