div+css實現(xiàn)自適應(yīng)寬度按鈕
更新時間：2007年11月22日 23:11:12 作者：
先來看張圖片： 
ok，看看代碼吧。
CSS:
復(fù)制代碼 代碼如下:
*{margin:0; padding:0;}
body{padding:10px; font-size:12px;}
h1{margin:0; padding:10px 0; font-size:14px; font-weight:bold;}
a{background:url(1.gif) left 0; color:#fff; text-decoration:none; height:30px; float:left; cursor:hand; margin:0 5px 0 0;}
a:hover{background:url(1.gif) left -30px;height:30px;}
a span{background:url(1.gif) right 0; padding:7px 8px 7px 0; margin:0 0 0 8px; float:left; height:16px;}
a:hover span{background:url(1.gif) right -30px; color:#000; padding:7px 8px 7px 0; margin:0 0 0 8px; height:16px; }
HTML:
復(fù)制代碼 代碼如下:
<body>
<h1><strong>CSS自適應(yīng)寬度圓角按鈕 @5key.net</strong></h1>
<a href="#"><span>首頁</span></a>
<a href="#"><span>不是首頁</span></a>
<a href="#"><span>他也許是首頁</span></a>
<a href="#"><span>但他一定不是首頁</span></a>
<a href="#"><span>好了，就這樣把。別扯了~</span></a>
</body>
演示：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關(guān)文章
[綠色]解讀absolute與relative...2006-11-11
大部分是由注釋造成文字溢出，屬于IE6的BUG，溢出文字的字?jǐn)?shù)=注釋的條數(shù)*2-1，這里的字?jǐn)?shù)在中 文或英文數(shù)字時都成立。注釋坐在位置與溢出位置、區(qū)塊的浮動以及文字區(qū)塊的固定寬度有必然聯(lián)系。2008-12-12
網(wǎng)頁設(shè)計者需要了解的_網(wǎng)頁字體大小數(shù)據(jù)參考
對于頁面來說，字體的大小設(shè)置是比較重要的，網(wǎng)上搜集了一些關(guān)于網(wǎng)頁中字體大小的數(shù)據(jù)對比，在這共享出來給大家一起看看，希望對大家在頁面制作過程中有所幫助！2008-10-10
前段時間做一個小項目碰到了一個導(dǎo)航制作的方式然后突然想到曾經(jīng)很久以前看到的梯形狀的不規(guī)則導(dǎo)航，就嘗試做了一下。結(jié)果碰到了幾個問題，后來在同事的提醒下總算完成了，記錄一下也跟大家分享分享。2008-04-04
學(xué)習(xí)樣式表CSS參考-常用的CSS知識...2007-09-09
HTML5實戰(zhàn)與剖析之觸摸事件(touchstart、touchmove和touchend)
本文主要介紹HTML5實戰(zhàn)與剖析之觸摸事件，介紹的比較詳細(xì)，需要的朋友可以參考下。2016-06-06
IE6，IE7和firefox對DIV的支持區(qū)別...2007-09-09
前端項目的性能優(yōu)化是一個綜合性的問題,需要從多個方面入手,以下是幾大類的優(yōu)化方案：移動端、圖片、JavaScript、css、html、頁面內(nèi)容、服務(wù)器、cookie2023-11-11
兼容Compatible and tested with IE6, IE7, Safari 2, Safari 3, Firefox 2, Opera 9.21的圖片垂直居中效果代碼2008-05-05
IE 5.x/Win 和模型bug...2007-02-02