精通CSS+DIV基础总结（三）
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向服务器提出请求并处理响应，而不阻塞用户。大家熟悉的例子有谷歌地图，谷歌邮箱，主要是异步请求的技术，仅仅更新用户需要的部分，而其他部分不刷新。
看一个例子：
<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开发更加游刃有余！
精通CSS+DIV基础总结（三）相关推荐
- 精通CSS.DIV网页样式与布局（五） ——设置表格与表单样式
原文地址为: 精通CSS.DIV网页样式与布局(五) --设置表格与表单样式 表格和表单是网页中非常重要的两个元素,我们这次来说说CSS如何设置表格和表单样式.我们先来看看CSS如何控制表格. 首先表 ...
- html+css+布局从入门到精通,CSS+DIV网页样式布局实战从入门到精通 中文pdf扫描版[48MB]...
CSS+DIV网页样式布局实战从入门到精通通过精选案例引导读者深入学习,系统地介绍了利用CSS和DIV进行网页样式布局的相关知识和操作方法. 全书共21章.第1-5章主要介绍网页样式布局的基础知识,包 ...
- 精通CSS.DIV网页样式与布局（四） ——页面背景
咱们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个网页的重要组成部分,他直接决定了整个网页的风格和色调.我们这回主要来学习如何用CSS来设置背景颜色.背景图片. 背景颜色:CSS设置背景颜 ...
- 精通CSS+DIV网页样式与布局--页面背景
上篇博客,我们主要简单的总结了CSS的图片效果,我们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个网页的重要组成部分,她直接决定了整个网页的风格和色调.这篇博客简单的总结一下如何用CSS来 ...
- 精通 CSS+DIV 网页样式与布局 62
式并允许将样式信息与网页内容分离的一种标记性语言.CSS 是 1996 年由 W3C 审核通过,并且推荐使用的.简单的说 CSS 的引入就是为了使得 HTML 能够更 好的适应页面的美工设计.它以 H ...
- 精通CSS.DIV网页样式与布局（二）—— 段落
我们在上一个文章中详细的阐述了CSS是如何控制文字的显示效果的,接下来,为了需要,我们继续来完善CSS对段落的控制的显示效果. 我们看看段落的水平对齐方式: 看一段代码: <html> & ...
- 精通 CSS+DIV 网页样式与布局 55
老者传授锺离权"长真决",及金丹火候和青龙剑法.锺离汉后来遇见华阳真人, 又遇上仙王玄甫,学得"长生决".最后在崆峒山紫金四皓峰居住,得到"玉匣 秘诀 ...
- 精通 CSS+DIV 网页样式与布局 54
margin:0px; } img{ border:1px solid #664a2c; /* 图片边框 */ } img.pic1{ float:left; /* 左侧图片混排 */ margin- ...
- 精通CSS+DIV网页样式与布局--CSS段落效果
在上一篇博文中,小编主要详细的介绍了CSS是如何控制文字的显示效果,随着需求的不断变更,那么我们如何对段落进行相关操作,以达到我们想要的效果呢,接下来,为了需要,小编继续来完善CSS对段落的控制的显示 ...
最新文章
- matlab fft simulink,在Simulink中复制MATLAB的FFT？
- Mysql Explain 结果字段解释
- matlab 多元多项式回归_Python机器学习之?线性回归入门（二）
- 计算机专业 美国 硕士,【美国计算机硕士排名】美国计算机硕士专业怎么样
- Python 计算机视觉（一） —— 数字图像处理基础
- 重磅！第三届「星斗奖」榜单正式发布！
- C++class类(I)
- Linux第一条指令地址,arm-linux 启动代码分析——stage1 （1）
- 逾845.5万枚XRP从币安交易所转入未知钱包，价值超过496万美元
- webstorm+nodejs环境中安装淘宝镜像
- 服务器搭建成虚拟空间,服务器搭建虚拟空间
- JavaScript 模拟重载
- 群晖通过Cloud Sync套件进行文件同步
- 电子双缝干涉，可以在穿过缝前进行探测
- 【错误信息】Maximum call stack size exceeded
- 高中信息技术html语言,高中信息技术Frontpage试题
- 蒙版操作—快速蒙版扣图
- python 构建和解析邮件
- html多重阴影效果,如何使用css3实现文字的单阴影效果和多重阴影效果（附完整代码）...
- dp和px，那些不得不吐槽的故事——Android平台图片文字元素单位浅析