社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
目錄
css自适应宽度圆角按钮 @5key.net
CSS自适应宽度圆角按钮
首頁 web前端 css教學 div css實現自適應寬度按鈕_經驗交流

div css實現自適應寬度按鈕_經驗交流

PHP中文网
PHP中文网
May 16, 2016 pm 12:06 PM

div css實現自適應寬度按鈕_經驗交流

先來看張圖片：

       原則是透過背景的左對齊和右對齊用a標籤和span標籤組合出一個完整的圓角矩形。再透過hover標籤去滑動圖片。而你只需要一張圖片：


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 id="strong-css自适应宽度圆角按钮-key-net-strong"><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>
登入後複製


 


示範：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSS自适应宽度按钮</title> 
<style> 
*{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(/upload/20071122231110605.gif) left 0;  color:#fff; text-decoration:none; 
height:30px; float:left; cursor:hand; margin:0 5px 0 0;} 
a:hover{background:url(/upload/20071122231110605.gif) left -30px;height:30px;} 
a span{background:url(/upload/20071122231110605.gif) right 0;  padding:7px 8px 7px 0; margin:0 0 0 8px; 
float:left; height:16px;} 
a:hover span{background:url(/upload/20071122231110605.gif) right -30px; color:#000;  padding:7px 8px 7px 0; 
margin:0 0 0 8px; height:16px;  } 
</style> 
</head> 

<body> 
<h1 id="strong-CSS自适应宽度圆角按钮-strong"><strong>CSS自适应宽度圆角按钮</strong></h1> 
<a href="" target="_blank"><span>首页</span></a> 
<a href="" target="_blank"><span>不是首页</span></a> 
<a href="" target="_blank"><span>他也许是首页</span></a> 
<a href="" target="_blank"><span>但他一定不是首页</span></a> 
<a href="" target="_blank"><span>好了，就这样把。别扯了~</span></a> 
</body> 
</html>
登入後複製

以上就是div css實現自適應寬度按鈕_經驗交流的內容，更多相關內容請關注php中文網（www.php.cn）！

本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

顯示更多

熱門文章

R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
刺客信條陰影：貝殼謎語解決方案
2 週前 By DDD
R.E.P.O.如果您聽不到任何人，如何修復音頻
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：如何解鎖Myrise中的所有內容
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
顯示更多

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7469
15
CakePHP 教程
1376
52
steam的賬戶名稱是什麼格式
77
11
win11激活密鑰永久
48
19
NYT連接提示和答案
19
28
顯示更多
Related knowledge
如何修復 Microsoft Teams 白屏 如何修復 Microsoft Teams 白屏 Apr 17, 2023 pm 05:07 PM

重新啟動Microsoft團隊如果您在啟動Teams後出現空白畫面，則一個很好的起點是重新啟動應用程式本身。要關閉並重新啟動MicrosoftTeams，請執行以下操作：右鍵單擊工作列通知區域中的Teams圖標，然後從選單中按一下退出。從「開始」功能表或桌面捷徑重新啟動MicrosoftTeams並查看它是否有效。從工作管理員關閉MicrosoftTeams如果Teams進程的基本重新啟動不起作用，請進入工作管理員並結束任務。若要從工作管理員關閉Teams，請執行下列操作

什麼是 Windows 安全性按鈕？所有你必須知道的 什麼是 Windows 安全性按鈕？所有你必須知道的 Apr 13, 2023 pm 10:22 PM

Windows 安全性按鈕是什麼？顧名思義，Windows 安全性按鈕是一項安全性功能，可讓您安全地存取登入功能表並使用密碼登入您的裝置。在這種情況下，智慧型手機絕對領先。但是 Windows 便攜式裝置（例如平板電腦）已經開始添加一個 Windows 安全性按鈕，它不僅僅是一種將不需要的使用者拒之門外的方式。它還提供額外的登入選單選項。儘管如果您試圖在桌上型 PC 或筆記型電腦上找到 Windows 安全性按鈕，您可能會感到失望。這是為什麼？平板電腦與個人電腦Windows 安全性按鈕是一個實體按鈕，存在於平板

在 Windows 中停用傳遞最佳化服務的 5 種方法 在 Windows 中停用傳遞最佳化服務的 5 種方法 May 17, 2023 am 09:31 AM

許多原因可能使你想要停用傳遞最佳化服務在你的Windows電腦上。但是，我們的讀者抱怨不知道要遵循的正確步驟。本指南將透過幾個步驟討論停用傳遞最佳化服務的方法。要了解有關服務的更多信息，您可能需要查看我們的如何開啟services.msc指南以獲取更多資訊。傳遞優化服務有什麼作用？傳遞優化服務是具有雲端託管解決方案的HTTP下載程式。它允許Windows設備從備用來源下載Windows更新、升級、應用程式和其他大型套件檔案。此外，它還透過允許部署中的多個裝置下載這些套件來幫助減少頻寬消耗。此外，Windo

如何重新啟動、強制重新啟動和關閉 iPad Mini 6 如何重新啟動、強制重新啟動和關閉 iPad Mini 6 Apr 29, 2023 pm 12:19 PM

如何強制重啟iPadMini6強制重啟iPadMini6是透過一系列按鈕按下來完成的，它的工作原理如下：按下並釋放音量調高按下並釋放降低音量按住電源/鎖定按鈕，直到您在螢幕上看到Apple標誌，表明iPadMini已強制重啟僅此而已，您已經強制重啟了iPadMini6！強制重啟通常用於故障排除原因，例如iPadMini被凍結、應用程式被凍結或發生其他一些一般性不當行為。關於強制重啟第6代iPadMini的程序需要注意的一點是，對於所有其他具有超薄邊框並使用

重寫後： 如何解決 PS5 控制器在 Windows 11 上未被辨識的問題 重寫後： 如何解決 PS5 控制器在 Windows 11 上未被辨識的問題 May 09, 2023 pm 10:16 PM

&lt;h3&gt;關於連接我的PS5控制器，我該知道什麼？ &lt;/h3&gt;&lt;p&gt;與DualSense控制器一樣好，有報告指出控制器未連接或未被偵測到。解決此問題的最簡單方法是使用適當的USB電纜將控制器連接到您的PC。 &lt;/p&gt;&lt;p&gt;有些遊戲本身就支援DualSense。在這些情況下，您只需插入控制器即可。但這引發了其他問題，例如如果您沒有USB電纜或不想使用USB電纜怎麼辦

如何清空 Microsoft Edge 瀏覽器的下載記錄？ 如何清空 Microsoft Edge 瀏覽器的下載記錄？ Apr 21, 2023 am 09:34 AM

&lt;ul&gt;&lt;li&gt;&lt;strong&gt;點選進入：&lt;/strong&gt;ChatGPT工具外掛導覽大全&lt;/li&gt;&lt;/ul&gt;&lt;h2&gt;在Edge中尋找並移除下載紀錄&lt; /h2&gt;&lt;p&gt;與其他瀏覽器一樣，Edge有一個&lt;strong&gt;下載

如何使用Vue實現按鈕倒數特效 如何使用Vue實現按鈕倒數特效 Sep 21, 2023 pm 02:03 PM

如何使用Vue實作按鈕倒數特效隨著Web應用程式的日益普及，我們經常需要在使用者與頁面互動時使用一些動態效果來提升使用者體驗。其中，按鈕的倒數特效是非常常見且實用的效果。本文將介紹如何使用Vue框架來實現按鈕倒數特效，並給出具體的程式碼範例。首先，我們需要建立一個Vue元件，包含一個按鈕和倒數計時的功能。在Vue中，元件是一種可重複使用的Vue實例，視圖會

更改 Windows 11 上的電源按鈕操作 [5 提示] 更改 Windows 11 上的電源按鈕操作 [5 提示] Sep 29, 2023 pm 11:29 PM

電源按鈕可以做的不僅僅是關閉PC，儘管這是桌面用戶的預設操作。如果您想更改Windows11中的電源按鈕操作，它比您想像的要容易！請記住，實體電源按鈕與「開始」功能表中的按鈕不同，以下的變更不會影響後者的操作。此外，您會發現電源選項略有不同，具體取決於它是桌上型電腦還是筆記型電腦。為什麼要在Windows11中更改電源按鈕操作？如果您讓計算機進入睡眠狀態的頻率高於關閉計算機，則更改硬體電源按鈕（即PC上的實體電源按鈕）的行為方式即可。同樣的想法也適用於休眠模式或簡單地關閉顯示器。更改Windows11

See all articles