Div+CSS可是實現簡單的網頁設計，對於需要添加動作，更方便的互動，Javascript給我們提供了方便；資料的儲存可以利用XML使其更加方便；而對於減少頁面與伺服器的互動，可以利用Ajax技術，與Css結合，例如gmail郵箱，在收取郵件時，不重新整理頁面，只增加新來的郵件，這樣減少頁面其它部分佔用的頻寬，將更多的頻寬用到有用的地方！更加的符合使用者的需求.
下邊我就通過三個例子簡單學習一下.由於前邊Javascript和XML已經學習過，而後邊還有一塊專門學習Ajax，所以這裡只是從CSS與其結合，通過例子簡單學習一下！
一，首先看一下Javascript與CSS的結合來滿足我們的需求的一個小例子：
<html><head><title>文字顏色</title><style type="text/css"><!--body{font-family:Arial, Helvetica, sans-serif;font-size:13px;}form{padding:0px;margin:0px;}input{border:1px solid #000000;width:40px;}input.btn{width:60px; height:18px;}span{font-family:黑體;font-size:60px; font-weight:bold;}--></style><script language="javascript">function ChangeColor(){var red = document.colorform.red.value;//獲得各個輸入框的值var green = document.colorform.green.value;var blue = document.colorform.blue.value;var obj = document.getElementById("text");obj.style.color="#"+red+green+blue;//修改文字顏色}</script> </head><body><form name="colorform">R:<input name="red" maxlength="2">G:<input name="green" maxlength="2">B:<input name="blue" maxlength="2"> <input type="button" onClick="ChangeColor()" value="換顏色" class="btn"></form><br><span id="text">CSS層樣式</span></body></html>
：
這個例子，前邊用了CSS控制這個介面的樣式，後邊利用了一個Javascript的函數ChangeColor來通過使用者輸入的三原色的值來改變CSS字型的顏色，很好的達到了與使用者互動的效果！
二，對於CSS與XML的結合，我認為是這樣可以更好的顯示資料，例如我們一般的左側欄就可以這樣設計，我們看個簡單的例子，將一首唐詩很好的用XML變現出來，而CSS使其表現非常好看！這是XML檔案：
<?xml version="1.0" encoding="gb2312"?><?xml-stylesheet type="text/css" href="poem.css"?><poem><title>靜夜思</title><author>唐 李白</author><verse>床前明月光<br/>疑是地上霜<br/>舉頭望明月<br/>低頭思故鄉</verse></poem>
這是對應的CSS檔案:
poem{margin:0px;background:url(poem.jpg) no-repeat;/*添加背景圖片 */width:360px;height:490px;position:absolute;/* 絕對位置 */left:0px; top:0px;}title{font-size:19px;color:#FFFF00;position:absolute;left:62px;top:150px;}author{font-size:12px;color:#4f2b00;position:absolute;left:100px;top:176px;}verse{position:absolute;/* 絕對位置 */color:#FFFFFF;font-size:14px;left:55px;top:200px;line-height:20px;/* 行間距 */}br{display:block;/* 讓詩句分行顯示 */}
顯示的效果：
這樣一首詩的資料很好的表現出來了，XML的優點，在前邊的部落格我中總結過，通過XML我們可以很容易實現一些HTML難於實現的東西。
三，我們看一下CSS與Ajax的結合，Ajax還沒有系統的學習，可以先瞭解一下，後邊會有針對性的學習一下.
首先，Ajax的核心是JavaScript對象XmlHttpRequest。該對象在InternetExplorer5中首次引入，它是一種支援非同步請求的技術。簡而言之，XmlHttpRequest使您可以使用JavaScript向伺服器提出請求並處理響應，而不阻塞使用者。大家熟悉的例子有Google地圖，Google郵箱，主要是非同步請求的技術，僅僅更新使用者需要的部分，而其他部分不重新整理。
看一個例子：
<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>
這個例子前邊用了CSS控制頁面，後邊用了Javascript語言中的Ajax技術，對輸入框的change事件進行編寫，沒有對這個頁面的更新，只是通過對輸入框的變化，來請求伺服器，從而顯示伺服器中對應城市的編號！：
總而言之，B/S中頁面的設計，我們用到了HTML，XML,Javascript,CSS,DIV,Ajax等等語言和技術，這些語言和技術各自有各自的優點，很好的掌握這些知識，可以使我們B/S開發更加遊刃有餘！
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
