正点CSS实例--简单链接按钮

最新推荐文章于 2022-05-25 17:42:31 发布

code2017

最新推荐文章于 2022-05-25 17:42:31 发布

阅读量501

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css 生活工作 c

本文链接：https://blog.youkuaiyun.com/zxc22436/article/details/6788917

CSS 专栏收录该内容

25 篇文章

订阅专栏

本文提供了一套详细的HTML与CSS样式设置方案，旨在帮助读者快速掌握如何为博客内容设置统一且美观的样式。通过本文，你可以了解到如何对不同状态的超链接进行个性化定制，包括正常状态、悬停状态以及访问过后的样式调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>