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> ~~~