css+div网页设计（三）--与多种技术的混合应用

来源：互联网发布：php 的加密方式编辑：程序博客网时间：2024/05/06 01:25

本篇博客将介绍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>

输出结果：

2、css与xml

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>

输出结果：

3、css与ajax

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>

最后，要做出一个漂亮且实用的网站，就必须要用到各种技术的混合应用。只有掌握好这些技术，才能让我们的网页开发更加顺利。

0 0