精通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+DIV基础总结(一)
这段时间学习了玩了DIV+CSS的视频,感觉效率不高.前边的Javascript总结的不好,但是看了后边的JQuery,觉得学习的再多一点,再进行Javascript的总结.DIV+CSS总结,估计会 ...
- 精通CSS+DIV网页样式与布局--图片效果
提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过 ...
- 系列文章--精通CSS.DIV网页样式与布局学习
精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布 ...
- 精通CSS+DIV网页样式与布局--初探CSS
CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法. ...
- 精通CSS+DIV网页样式与布局--滤镜的使用
在上篇博客中,小编主要简单的介绍了使用CSS,如何制作实用菜单,今天我们继续来总结有关CSS的基础知识,今天小编主要简单的来介绍一下CSS中关于滤镜的使用,首先,小编先来简单的介绍一下滤镜,我们这次来 ...
- 精通CSS+DIV网页样式与布局--设置表单和表格
表格和表单是网页中非常重要的两个元素,在上篇博客中,我们简单的介绍了CSS的页面背景设置,今天小编继续来介绍CSS的相关知识,在我们的CSS中如何设置表格和表单,首先,来看一张思维导图,通过图简单的预 ...
- 精通CSS+DIV网页样式与布局--制作实用菜单
在上篇博文中,小编中主要的简单总结了一下CSS中关于如何设置页面和浏览器元素,今天小编继续将来介绍CSS的相关基础知识,这篇博文,小编主要简单的总结一下在CSS中如何制作网页中的菜单,这部分的内容包括 ...
- 精通CSS+DIV网页样式与布局--页面和浏览器元素
在页面和浏览器中,除了文字.图片.表格.表单等,还有很多各种各样的元素,在上篇博文中,小编主要简单的介绍了一下在CSS中如何设置表格和表单,今天小编主要简单介绍一下丰富的超链接特效.鼠标特效.页面滚动 ...
随机推荐
- 日积月累系列之国籍控件（js源码）
一直苦于没有好的国籍控件可以用,于是抽空写了一个国籍控件,现分享给大家. 主要功能和界面介绍 国籍控件主要支持中文.英文过滤以及键盘上下事件. 源码介绍 国籍控件核心是两个文件,navtionalit ...
- s2sh三大框架整合过程（仅供参考）
三大框架顾名思义就是非常有名的Struts2 ,Hibernate,Spring, 框架整合的方法很多,现在我写一个非常简单的整合过程,相信大家一看就会! 这里使用的struts-2.2.1.1.hi ...
- POJ 2114 Boatherds 划分树
标题效果:鉴于一棵树,问有两点之间没有距离是k的. 数据的多组 思维:和IOI2011的Race喜欢.不是这么简单.阅读恶心,我是在主要功能的别人的在线副本. CODE: #include <c ...
- hdu1005 Number Sequence
f(n-1)和f(n-2)所有组合都49种子,这期可达49,但f(n-1)=f(n-2)=0如果是,列的总数目0.话题条件f(1)=f(2)=1.因此排除这样的情况.的最长期限48. #include ...
- selenium2入门 定位 窗体切换等等 （二）
定位用的html素材有两个 demo.html <html> <head> <title>UI Automation Testing</title> & ...
- 使用SoapUI 测试Web Service
原文:使用SoapUI 测试Web Service 如何测试写好的Webservice?你当然可以写代码来测试,但还是太麻烦,你得花时间去学习各语言的关于Webservice调用的相关API.这里推荐 ...
- Spring IOC之依赖
一个标准的企业级应用不只有一个对象组成.即使是最简单的引用也会有个相互作用的对象以使最终呈现 在用户面前的是个连贯一致的引用. 1依赖注入 依赖注入(DI)是一个对象定义他们依赖的过程,也就是说他们一 ...
- 负载均衡DNS和反向代理优缺点
负载均衡 (Load Balancing) 建立在现有网络结构之上,它提供了一种廉价有效透明的方法扩展网络设备和服务器的带宽.增加吞吐量.加强网络数据处理能力.提高网络的灵活性和可用性. 负载均衡(又 ...
- php中的$_GET怎样获取带有井号“#”的參数
<?php echo $_GET['key']; ?> 当url为http://test.com/c.php?key=999时,正常输出:999 当url为http://test.com/ ...
- INNO SETUP卸载程序中加入自定义窗体
原文:INNO SETUP卸载程序中加入自定义窗体 [Setup] AppName=My Program AppVerName=My Program v.1.2 DefaultDirName={pf} ...