层、链接样式，css学习小结
来源：互联网 发布：碧粳米 知乎 编辑：程序博客网 时间：2024/05/18 09:21
效果图
<!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>
- 层、链接样式，css学习小结
- css 样式小结
- CSS 样式表小结
- css一些样式小结
- CSS常用样式小结
- css不同链接样式
- CSS链接样式
- 精通CSS-链接样式
- CSS之链接样式
- CSS 定义链接样式
- CSS链接样式设置
- CSS样式-链接
- CSS 4.4 样式-链接
- css样式中的链接
- CSS链接样式
- 《TCP/IP详解卷1》学习小结(一)------链接层
- 对链接应用样式--Css学习笔记（四）
- CSS样式（链接、列表、表格、轮廓）学习笔记
- socket 服务器端编程常见问题
- 类型的概述
- 随笔
- 持久化对象---hibernate学习笔记
- 念，心随君浅舞天涯
- 层、链接样式，css学习小结
- 图像不变矩
- hdu 1561 The more, The Better (树形DP)
- Linux设备驱动程序第三版学习（1）-字符设备驱动程序源码分析
- 离职的这些天
- 大牛感悟
- 念，心随君浅舞天涯
- HTML学习总结
- 正则表达式之判断用户注册信息是否为汉字、字母和数字
