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基础总结（三）的更多相关文章

  1. 精通CSS+DIV基础总结(二)

    上一篇我们已经总结了部分CSS+DIV相关知识,这篇我们接着总结,从下边几个方面学习一下: 一,我们看如何设置网页的背景,顾名思义背景可以通过颜色和图片来设置,下边我们看一下如何设置: 颜色的设置非常 ...

  2. 精通CSS+DIV基础总结(一)

    这段时间学习了玩了DIV+CSS的视频,感觉效率不高.前边的Javascript总结的不好,但是看了后边的JQuery,觉得学习的再多一点,再进行Javascript的总结.DIV+CSS总结,估计会 ...

  3. 精通CSS+DIV网页样式与布局--图片效果

    提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过 ...

  4. 系列文章--精通CSS.DIV网页样式与布局学习

    精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布 ...

  5. 精通CSS+DIV网页样式与布局--初探CSS

    CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法. ...

  6. 精通CSS+DIV网页样式与布局--滤镜的使用

    在上篇博客中,小编主要简单的介绍了使用CSS,如何制作实用菜单,今天我们继续来总结有关CSS的基础知识,今天小编主要简单的来介绍一下CSS中关于滤镜的使用,首先,小编先来简单的介绍一下滤镜,我们这次来 ...

  7. 精通CSS+DIV网页样式与布局--设置表单和表格

    表格和表单是网页中非常重要的两个元素,在上篇博客中,我们简单的介绍了CSS的页面背景设置,今天小编继续来介绍CSS的相关知识,在我们的CSS中如何设置表格和表单,首先,来看一张思维导图,通过图简单的预 ...

  8. 精通CSS+DIV网页样式与布局--制作实用菜单

    在上篇博文中,小编中主要的简单总结了一下CSS中关于如何设置页面和浏览器元素,今天小编继续将来介绍CSS的相关基础知识,这篇博文,小编主要简单的总结一下在CSS中如何制作网页中的菜单,这部分的内容包括 ...

  9. 精通CSS+DIV网页样式与布局--页面和浏览器元素

    在页面和浏览器中,除了文字.图片.表格.表单等,还有很多各种各样的元素,在上篇博文中,小编主要简单的介绍了一下在CSS中如何设置表格和表单,今天小编主要简单介绍一下丰富的超链接特效.鼠标特效.页面滚动 ...

随机推荐

  1. Robotium源码分析之Instrumentation进阶

    在分析Robotium的运行原理之前,我们有必要先搞清楚Instrumentation的一些相关知识点,因为Robotium就是基于Instrumentation而开发出来的一套自动化测试框架.鉴于之 ...

  2. Hybrid

    “榕树下·那年”移动app ( hybrid ) 开发总结   榕树下网站本身的技术人员并不多,所以app开发的任务就到了母公司盛大文学这边.       盛大文学无线业务中心负责这次具体开发任务. ...

  3. 检测浏览器版本类型的JavaScript代码，终极版

    下面的JavaScript代码,不仅可以判断PC端浏览器类型,还可以判断安卓.iOS.其他智能手机.平板电脑或游戏系统. 说废话貌似不是我的风格哈,直接上代码吧: var client = funct ...

  4. 分享UI设计模型

    UI设计模型是可重用的界面设计解决方案,可以让开发人员少走弯路,节约不少开发时间.下面慧都小编跟大家分享6个很有用的UI设计模型资源,希望对你有用: 1.UI Patterns 由一个丹麦人开发的UI ...

  5. Android总结的基本机制监控事件

    研究上午Android底层机制事件监视器,例如下面的摘要: 内核驱动监控硬件状态和行为,由uevent机制将事件发送到用户空间: 通过用户空间UeventObserver从内核监控uevent,处理. ...

  6. BitNami-Redmine安装和VisualSVN-Server配合使用

    原文:BitNami-Redmine安装和VisualSVN-Server配合使用 BitNami-Redmine安装和VisualSVN-Server配合使用 2011-05-04 10:48:22 ...

  7. 整理 W3CSchool 常用的CSS属性列表

    近期教学给学员总结常用的CSS属性,方便学习查询,正好发上来也给大家分享一下,O(∩_∩)O. 摘选自:http://www.w3cschool.com.cn/ 表格最右列的数字标识支持的CSS最低版 ...

  8. VC++注射过程

    2014/10/19 11:12 // stdafx.h : // // // #pragma once #include "targetver.h" #include <s ...

  9. linux下搭建SVN服务器完全手册-很强大！！！！！

    系统环境        RHEL5.4最小化安装(关iptables,关selinux) + ssh + yum 一,安装必须的软件包.        yum install subversion ( ...

  10. 实时预览的在线 Markdown 编辑器 - Markdoc

    实时预览的在线 Markdown 编辑器 - Markdoc 最近组内需要为一些项目和系统写文档,发表在公司内的文档平台上,这个平台并不支持markdown,所以打算做一个在线markdown编辑器, ...