css学习1----css超链接效果

最新推荐文章于 2022-07-14 21:13:11 发布

weixin_30265103

最新推荐文章于 2022-07-14 21:13:11 发布

阅读量99

点赞数

原文链接：http://www.cnblogs.com/alaricblog/p/3278322.html

版权

css超链接标签<a>伪类别：

a:link 超链接的普通样式，正常浏览状态的风格

a:visited 被单击过的超链接的风格

a:hover 鼠标指针经过超链接上的样式风格

a:active 在超链接上单击时，即当前激活时，超链接的样式风格

css通过以上4个伪类别，再配合各种属性风格制作出千变万化的动态超链接。

html文件如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>test3_css.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

css 文件如下：

a{
   font-family: Arial;
   font-size: 2em;
   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 soild #717171;
   border-right: 1px soild #717171;

}

a:hover{
   color: #821818;
   padding: 5px 8px 3px 12px;
   background-color: #e2c4c9;
   border-top: 1px soild #717171;
   border-left: 1px soild #717171;
   border-bottom: 1px soild #EEEEEE;
   border-right: 1px soild #EEEEEE;
}

转载于:https://www.cnblogs.com/alaricblog/p/3278322.html

weixin_30265103

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css学习1----css超链接效果

css超链接标签<a>伪类别：a:link 超链接的普通样式，正常浏览状态的风格a:visited 被单击过的超链接的风格a:hover 鼠标指针经过超链接上的样式风格a:active 在超链接上单击时，即当前激活时，超链接的样式风格css通过以上4个伪类别，再配合各种属性风格制作出千变万化的动态超链接。html文件如下:<!DOCTYP...
复制链接

扫一扫