div+css實現(xiàn)自適應寬度按鈕
更新時間：2007年11月22日 23:11:12 作者：
先來看張圖片： 
ok，看看代碼吧。
CSS:
復制代碼 代碼如下:
*{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:
復制代碼 代碼如下:
<body>
<h1><strong>CSS自適應寬度圓角按鈕 @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)文章
很多CSSer是從以前的網(wǎng)頁制作中開始學習CSS網(wǎng)頁布局的，或許還存在著一定的DW習慣。希望此文能幫助大家理解和糾正一些不好的習慣。2008-11-11
寫CSS_關(guān)于Border你可能需要注意的地方...2007-12-12
css div布局總會遇到很多瀏覽器兼容的問題。2008-04-04
IE8 Beta1已出，其中我們能看到很多的新特性，如layout引擎將“完全”支持CSS2.1和HTML 5，所以和之前IE瀏覽器所使用的Layout引擎并不相同，之前的IE瀏覽器并不完全符合互聯(lián)網(wǎng)標準。2008-06-06
overflow用在div上時很好用，但直接用在td上，好像沒有任何效果。 td中的文本過長時依然自動換了一行 像下面這要設(shè)定一下就行了2008-08-08
Css利用js的expression實現(xiàn)的效果...2007-02-02
更多的關(guān)于css強制換行 css強制不換行的css方法可以參考本站的內(nèi)容頁的文章控制.2007-12-12
為了兼容和區(qū)分多瀏覽器我們需要用一些css hack來解決這些問題，但不建議用，能不用則不用2008-08-08
從Table向Css過渡的優(yōu)缺點比較...2007-02-02
頁面水平居中一般會令人很頭疼，尤其新手。瀏覽器之間的不兼容也會帶來很大問題。本篇文章主要介紹了css布局網(wǎng)頁水平居中常用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2007-12-12