CSS设置按钮式超链接
生活随笔
收集整理的這篇文章主要介紹了
CSS设置按钮式超链接
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
CSS設置按鈕式超鏈接
? ? ? ? ? 網頁上有很多超鏈接都是按鈕的形式，這些都使用了各種圖片，這里通過CSS普通的屬性實現按鈕的效果。
? ? ? ? ??首先，建立最簡單的HTML頁面，代碼如下：
<table width="600px"cellpadding="2" class="chara1" align="center"><tr><td><ahref="#">首頁</a></td><td><ahref="#">心情日記</a></td><td><ahref="#">學習心得</a></td><td><ahref="#">工作筆記</a></td><td><ahref="#">生活瑣碎</a></td><td><ahref="#">其他</a></td></tr> </table> ? ? ? ? ??然后，CSS對<a>標記整體控制，加入CSS的3個偽屬性，對于普通超鏈接和點擊過的超鏈接采用同樣的樣式，并且，利用邊框的樣式模擬按鈕的效果。? ? ? ? ??鼠標經過時，改變文字的顏色，背景色、位置和邊框等等，從而，模擬按鈕按下去的效果。
<html><head><title></title><style><!--a{font-family:Arial;font-size:.8em;text-align:center;margin:3px;}a:link,a:visited{color:#a62020;padding:4px10px 4px 10px;background-color:#ecd8db;text-decoration:none;border-top:1pxsolid #eeeeee;border-left:1pxsolid #eeeeee;border-bottom:1pxsolid #717171;border-right:1pxsolid #717171;}a:hover{color:#821818;padding:5px8px 3px 12px;background-color:#e2c4c9;border-top:1pxsolid #717171;border-left:1pxsolid #717171;border-bottom:1pxsolid #eeeeee;border-right:1pxsolid #eeeeee;}--></style></head><body><tablewidth="600px" cellpadding="2" class="chara1"align="center"><tr><td><ahref="#">首頁</a></td><td><ahref="#">心情日記</a></td><td><ahref="#">學習心得</a></td><td><ahref="#">工作筆記</a></td><td><ahref="#">生活瑣碎</a></td><td><ahref="#">其他</a></td></tr> </table></body> </html> ? ? ? ? ??通過對3個偽屬性的顏色、背景色和邊框的修改，模擬了按鈕的效果。
總結
以上是生活随笔為你收集整理的CSS设置按钮式超链接的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSS设置动态超链接
- 下一篇： CSS设置滚动条