精通CSS+DIV基礎總結(三)

來源:互聯網
上載者:User

          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開發更加遊刃有餘!

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.