您的位置：首页 > Web前端 > CSS

CSS-链接基础记录

2016-07-29 01:47 295 查看

1.链接颜色定义

<!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>链接</title>
<style>
a:link{
color:#FF0000} /* 未访问 */
a:visited{
color:#00FF00} /* 已访问 */
a:hover{
color:#FF00FF} /* 鼠标放在链接上时 */
a:active{
color:#0000FF} /* 被点击时 */
</style>
</head>

<body>
<p>链接颜色变化</p>
<p><b><a href="Http://www.baidu.com" target="_blank">点击</a></b></p>

</body>
</html>

2.链接背景颜色变化
<!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>链接背景颜色</title>
<style>
a:link{
background-color:#00CC00} /* 未访问 */
a:visited{
background-color:#CC3300} /* 已访问 */
a:hover{
background-color:#0000CC} /* 鼠标放在链接上时 */
a:active{
background-color:#FFFF00} /* 被点击时 */
</style>
</head>

<body>
<p>链接背景颜色</p>
<p><b><a href="Http://www.baidu.com" target="_blank">百度主页</a></b></p>
</body>
</html>

3.创建链接框
<!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>链接框</title>
<style>
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>

<body>
<a href="/css/" target="_blank">swxctxone</a>
</body>
</html>

4.不同链接样式
<!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>不同样式链接</title>
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}

a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}

a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}

a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}

a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>

<body>
<p>将鼠标移至链接上改变样式.</p>

<p><b><a class="one" href="/css/" target="_blank">changes color</a></b></p>
<p><b><a class="two" href="/css/" target="_blank">changes font-size</a></b></p>
<p><b><a class="three" href="/css/" target="_blank">changes background-color</a></b></p>
<p><b><a class="four" href="/css/" target="_blank">changes font-family</a></b></p>
<p><b><a class="five" href="/css/" target="_blank">changes text-decoration</a></b></p>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航