css案例学习之按钮超链接
生活随笔
收集整理的這篇文章主要介紹了
css案例学习之按钮超链接
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
效果
?
css實現
<html> <head> <title>按鈕超鏈接</title> <style>a{ /* 統一設置所有樣式 */font-family: Arial;font-size: .8em;text-align:center;margin:3px; } a:link, a:visited{ /* 超鏈接正常狀態、被訪問過的樣式 */color: #A62020;padding:4px 10px 4px 10px;background-color: #ecd8db;text-decoration: none;border-top: 1px solid #EEEEEE; /* 邊框實現陰影效果 */border-left: 1px solid #EEEEEE;border-bottom: 1px solid #717171;border-right: 1px solid #717171; } a:hover{ /* 鼠標經過時的超鏈接 */color:#821818; /* 改變文字顏色 */padding:5px 8px 3px 12px; /* 改變文字位置 */background-color:#e2c4c9; /* 改變背景色 */border-top: 1px solid #717171; /* 邊框變換，實現“按下去”的效果 */border-left: 1px solid #717171;border-bottom: 1px solid #EEEEEE;border-right: 1px solid #EEEEEE; } </style> </head> <body><a href="#"> Home </a> <a href="#"> Contact Us</a><a href="#"> Web Dev</a> <a href="#"> Web Design</a> <a href="#"> Map </a> </body> </html>創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎
總結
以上是生活随笔為你收集整理的css案例学习之按钮超链接的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python的高级特性：切片，迭代，列表
- 下一篇： iOS 仿支付宝刮刮乐效果