DIV+CSS(第一天） · 走进PHP的缤纷世界

**传统页面使用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>  <link rel="stylesheet" type="text/css" href="my.css"/> </head> <body> <div class="stylel"> <img src="C:\Users\jsh\Pictures\20071204082238746.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>  <link rel="stylesheet" type="text/css" href="demo1.css"/> <link rel="stylesheet" type="text/css" href="demo2.css"/> </head> <body> 栏目一 栏目二 栏目三 栏目四 栏目五 </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>  <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> 请把鼠标移动到这些链接上，以查看效果： <a class="one" href="../index.html" tppabs="http://www.w3school.com.cn/index.html" target="_blank">这个链接改变颜色</a> <a class="two" href="../index.html" tppabs="http://www.w3school.com.cn/index.html" target="_blank">这个链接改变字体大小</a> <a class="three" href="../index.html" tppabs="http://www.w3school.com.cn/index.html" target="_blank">这个链接改变背景颜色</a> <a class="four" href="../index.html" tppabs="http://www.w3school.com.cn/index.html" target="_blank">这个链接改变字体系列</a> <a class="five" href="../index.html" tppabs="http://www.w3school.com.cn/index.html" target="_blank">这个链接改变文本装饰</a> </body> </html> ~~~