层、链接式样，css学习小结
日期：2014-05-17 浏览次数：20732 次
效果图
<!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>
<title>层、链接样式</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
body {background-color:yellow;}
a {font-family:楷体;font-weight:bold;font-size:30px;color:blue;text-decoration:none;}
#b1:hover {color:red;background-color:#99ffcc;font-size:45px;}
#b1:active {color:green;}
#b1:visited: {color:black;}
#b2:hover {color:red;text-decoration:underline;font-size:45px;}
#b2:active {color:green;}
#b2:visited: {color:white;}
.div1
{font-size:60px;position:relative;width:300px;height:200px;background-color:green;z-index:1;}
.div2
{font-size:60px;width:300px;height:200px;position:absolute;left:200px;top:15px;background-color:#eeb0b0;z-index:2;}
.div3
{position:absolute;top:100px;left:410px;width:300px;height:300px;z-index:4;list-style-image:url(2.gif);font-size:35px;font-family:楷体;color:red;}
.div4
{position:absolute;top:60px;left:360px;width:420px;height:290px;z-index:3;overflow:scroll;cursor:help;}
h1
{font-family:楷体;color:red;}
.b3
{font-size:35px;color:blue;font-weight:bold;}
#b4:hover {color:green;font-size:35px;}
#b5:hover {color:green;font-size:35px;}
.b6
{color:#ff0000;}
#div5
{list-style-image:url(2.gif);}
</style>
</head>
<body>
<a href="http://www.baidu.com" target="_bland" id="b1">百度</a>
<div class="div1">div1</div>
<div class="div2">div2</div><!--要是定的上边距和下边距一样就没变化，不一样就取大的那个，这是实例-->
<h1>另一问题</h1>
<h2>这又一个样式的超链接<a href="http://www.sina.com.cn" target="_bland" id="b2">新浪</a></h2>
<div class="div4">
<img src="1.jpg">
</div>
<div class="div3">
江雪
<li>千山鸟飞绝，
<li>万径人踪灭。
<li>孤舟蓑笠翁，
<li>独钓寒江雪。
</div>
<table width="550" height="200" bgcolor="#ffdfaa">
<tr>
<td colspan="4" class="b3"><div id="div5"><ul><li>珠宝首饰、手表、眼镜</li></ul></div></td>
</tr>
<tr>
<td><a href="#" id="b4">银饰</a></td>
<td><a href="#" id="b4">流行饰品</a></td>
<td><a href="#" id="b4">仿真饰品</a></td>
<td><a href="#" id="b4">钻饰</a></td>
</tr>
<tr>
<td><a href="#" id="b4">天然水晶</a></td>
<td><a href="#" id="b5" class="b6">翡翠手表</a></td>
<td><a href="#" id="b4">耳饰</a></td>
<td><a href="#" id="b4">戒指</a></td>
</tr>
</table>
</body>
</html>
