导航圆角的长短背景做法

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <title>导航圆角的长短背景做法</title>
 6 <style type="text/css">
 7 *{ margin:0; padding:0;}
 8 .wrap{ width:500px; height:300px; padding:50px; border:1px solid #ccc;margin: 100px auto;}
 9 .wrap a{ background:url(http://images.cnblogs.com/cnblogs_com/hxh-hua/478335/o_bg.gif) left top no-repeat; height:28px; overflow:hidden; float:left; margin-right:10px;}
10 .wrap a span{ background:url(http://images.cnblogs.com/cnblogs_com/hxh-hua/478335/o_bg.gif) right top no-repeat; height:28px; padding:0 15px; float:left; margin-left:5px; line-height:28px; cursor:pointer;}
11 
12 .wrap a:hover{background:url(http://images.cnblogs.com/cnblogs_com/hxh-hua/478335/o_bg.gif) left -29px no-repeat;}
13 .wrap a:hover span{background:url(http://images.cnblogs.com/cnblogs_com/hxh-hua/478335/o_bg.gif) right -29px no-repeat;}
14 </style>
15 </head>
16 
17 <body>
18 <div class="wrap">
19   <a href="#"><span>短按钮</span></a>
20   <a href="#"><span>长按钮长按钮sadddddddddd</span></a>
21   </div>
22 </body>
23 </html>

在线预览：http://jsbin.com/ididew/1

posted on 2012-10-17 22:27 仙梦之飘阅读(226) 评论(0) 编辑收藏举报