DIV+CSS(第一天）
传统页面使用table来布局和显示数据缺点：
1、 显示样式和数据时绑定在一起
2、 布局的时候，灵活度不高
3、 一个页面可以能会有大量的table元素，代码就会
4、 增加带宽
5、 搜索引擎不喜欢这样的布局
优点：
1、 理解简单
2、 不同浏览器看到的效果一般是相同的
3、 显示数据还是比较好的
Div+css 基本思想：数据和样式分离
Div+css是一种目前比较流行的网页布局技术，DIV用来存放需要娴熟的数据（文字，图表）， CSS就是用来指定怎样显示，从而做到数据局和显示相互分离。
DIV是用于存放内容（文字，图片、元素的）容器。
CSS是用于指定放在DIV中的内容如何显示包括这些内容的位置和外观。
n CSS基本语法
选择器{
属性1：属性值；
属性2：属性值；
。。。。。。。
}
入门 代码：
<html>
<head>
<title>CSS入门案例</title>
<!--引入我们的CSS-->
<link rel="stylesheet" type="text/css" href="my.css"/>
</head>
<body>
<div class="stylel">
<img src="C:UsersjshPictures20071204082238746.jpg"/>
</div>
</body>
</html>
.stylel{
width:400px;
height:300px;
background-color:red;
border:3px solid black;
margin-left:40px;
margin-top:25px;
padding-top:20px;
padding-left:40px;
}
span元素使用:存放小块内容：
<html>
<head>
<title>CSS入门案例</title>
<!--引入我们的CSS-->
<link rel="stylesheet" type="text/css" href="demo1.css"/>
<link rel="stylesheet" type="text/css" href="demo2.css"/>
</head>
<body>
<span class="s1">栏目一</span>
<span class="s2">栏目二</span>
<span class="s3">栏目三</span>
<span class="s4">栏目四</span>
<span class="s1">栏目五</span>
</body>
</html>
/*.s1用术语 类选择器*/
.s1{
color:green;
font-size:30px;
text-decoration:underline;
}
.s2{
color:yellow;
font-size:12px;
}
.s3{
color:blue;
font-style:italic;
}
.s4{
color:green;
font-weight:bold;
}
伪元素及滤镜效果
<html>
<head>
<title>滤镜技术</title>
<!--将CSS嵌入到HTML文件中（内联CSS）-->
<style type="text/css">
a:link img{
filter:gray;
}
a:hover img{
filter:"";
}
</style>
</head>
<body>
<a href="3"><img src="1.jpg"/></a>
<a href="demo2.html"><img src="2.jpg"/></a>
<a href="demo2.html"><img src="1.gif"/></a>
</body>
</html>
上面这个没有效果，不知道为什么？知道的麻烦给指出来！
<html>
<head>
<style type="text/css">
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="../index.html" tppabs="http://www.w3school.com.cn/index.html" target="_blank">这个链接改变颜色</a></b></p>
<p><b><a class="two" href="../index.html" tppabs="http://www.w3school.com.cn/index.html" target="_blank">这个链接改变字体大小</a></b></p>
<p><b><a class="three" href="../index.html" tppabs="http://www.w3school.com.cn/index.html" target="_blank">这个链接改变背景颜色</a></b></p>
<p><b><a class="four" href="../index.html" tppabs="http://www.w3school.com.cn/index.html" target="_blank">这个链接改变字体系列</a></b></p>
<p><b><a class="five" href="../index.html" tppabs="http://www.w3school.com.cn/index.html" target="_blank">这个链接改变文本装饰</a></b></p>
</body>
</html>