css+div網頁設計（三）--與多種技術的混合應用，cssdiv
本篇部落格將介紹css與多種技術的混合應用，javascript可以為我們的頁面更加方便的互動，xml使資料存放區跟方便，ajax的非同步更新可以加快我們網頁的載入速度。
1、css與javascript由於前面已經講過javascript的基本知識這裡就不多加介紹了http://blog.csdn.net/jinfulin/article/details/38406273
給大家舉個實戰例子，大家去仔細體味一下css與javascript的強大之處。
<span style="font-size:18px;"><html><head><title>for語句</title> </head><body><script language="javascript">for(var i=0;i<256;i++){j = 255-i;//j值遞減document.write("<font style='color:rgb("+i+","+j+","+j+");'><b>*</b> <font>");//調整*號顏色if(i%16==15){document.write("<br>");//每輸出16個則換行}}</script></body></html></span>
xml的基礎講解也在前面有提過了。http://blog.csdn.net/jinfulin/article/details/38355509
xml+div其實比較簡單，和html非常相似，只要添上相應的樣式
看一個最簡單的例子
<span style="font-size:18px;"><?xml version="1.0" encoding="gb2312"?><?xml-stylesheet type="text/css" href="14-5.css"?><!DOCTYPE hello[<!ELEMENT hello (#PCDATA)>]><hello><h1>Hello World!</h1><h2>aaaaaaa<br/>aaaaa</h2></hello></span>
<span style="font-size:18px;"><?xml version="1.0" encoding="gb2312"?><?xml-stylesheet type="text/css" href="14-5.css"?><!DOCTYPE hello[<!ELEMENT hello (#PCDATA)>]><hello><h1>Hello World!</h1></hello></span>
Ajax的核心是JavaScript對象XmlHttpRequest。該對象在InternetExplorer5中首次引入，它是一種支援非同步請求的技術。
關於ajax的知識我還沒有系統的學，這裡僅僅為大家展示一個執行個體。
<span style="font-size:18px;"><html><head><title>Ajax入門</title><style type="text/css"><!--body{font-size:13px;background-color:#e7f3ff;}form{padding:0px; margin:0px;}input{border-bottom:1px solid #007eff;/* 底線 */font-family:Arial, Helvetica, sans-serif;color:#007eff;background:transparent;border-top:none;border-left:none;border-right:none;}p{margin:0px;padding:2px 2px 2px 10px;background:url(icon.gif) no-repeat 0px 10px;/* 加入小icon表徵圖 */}--></style><script language="javascript">var xmlHttp;function createXMLHttpRequest(){if(window.ActiveXObject){xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}else if(window.XMLHttpRequest){xmlHttp = new XMLHttpRequest();}}//建立XMLHttpRequest對象createXMLHttpRequest();function callServer(){//擷取表單中的資料var city = document.getElementById("city").value;var state = document.getElementById("state").value;//如果沒有填寫則返回if ((city == null) || (city == "")) return;if ((state == null) || (state == "")) return;//連結的伺服器，自動獲得代號。本例沒有連結的伺服器，只是樣本var url = "getZipCode.php?city=" + escape(city) + "&state=" + escape(state);//開啟連結xmlHttp.open("GET", url, true);//告訴伺服器在運行完成後（可能要用五分鐘或者五個小時）做什麼，這裡觸發updatePage函數xmlHttp.onreadystatechange = updatePage;//發送請求xmlHttp.send(null);}//處理伺服器響應function updatePage(){if (xmlHttp.readyState == 4) {var response = xmlHttp.responseText;document.getElementById("zipCode").value = response;}}</script> </head><body><form><p>城市: <input type="text" name="city" id="city" size="25" onChange="callServer();"></p><p>國家: <input type="text" name="state" id="state" size="25" onChange="callServer();"></p><p>代號: <input type="text" name="zipCode" id="city" size="5"></p></form></body></html></span>
最後，要做出一個漂亮且實用的網站，就必須要用到各種技術的混合應用。只有掌握好這些技術，才能讓我們的網頁開發更加順利。
52css
上面有很多 DIV+CSS 現成的模板，下載一個，自己填點內容就可以了~
匿了匿了~
參考資料：www.52css.com/
用css+div怎做出一個三行三列固定高度與寬度的頁面？
樓上正解
不過根據我的心得，2列或以下，我用DIV或者dl。再複雜的我會用表格，不要深陷在DIV的心理模式裡，你看這些複雜的div難道比table簡單？
當然你拿這個布局就另論了。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
