css+div网页设计（三）--与多种技术的混合应用
本篇博客将介绍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>
最后，要做出一个漂亮且实用的网站，就必须要用到各种技术的混合应用。只有掌握好这些技术，才能让我们的网页开发更加顺利。
css+div网页设计（三）--与多种技术的混合应用的更多相关文章
- css+div网页设计（二）--布局与定位
在网页设计中,能否控制好各个模块中在页面中的位置是非常关键的,与传统的表格定位不同,css+div定位方式更加的灵活,本篇博客将为大家介绍css+div的布局与定位. 一.盒子模型 由图可以看出 盒子 ...
- css+div网页设计（一）--基础知识
css是网页制作不可缺少的部分,我会用三篇博客为大家展示css的基本用法. 关于css+div的整体结构图总结如下: 本篇博客主要介绍css的基础知识. 一.css概念; css(级联样式表):它是一 ...
- 精通CSS+DIV网页样式与布局--图片效果
提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过 ...
- 精通CSS+DIV网页样式与布局--初探CSS
CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法. ...
- HTML 5+CSS 3网页设计经典范例 (李俊民,黄盛奎) 随书光盘
<html 5+css 3网页设计经典范例(附cd光盘1张)>共分为18章,涵盖了html 5和css3中各方面的技术知识.主要内容包括html 5概述.html 5与html 4的区别. ...
- CSS+DIV网页样式布局实战从入门到精通 中文pdf扫描版
CSS+DIV网页样式布局实战从入门到精通通过精选案例引导读者深入学习,系统地介绍了利用CSS和DIV进行网页样式布局的相关知识和操作方法. 全书共21章.第1-5章主要介绍网页样式布局的基础知识,包 ...
- 系列文章--精通CSS.DIV网页样式与布局学习
精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布 ...
- 精通CSS+DIV网页样式与布局--页面和浏览器元素
在页面和浏览器中,除了文字.图片.表格.表单等,还有很多各种各样的元素,在上篇博文中,小编主要简单的介绍了一下在CSS中如何设置表格和表单,今天小编主要简单介绍一下丰富的超链接特效.鼠标特效.页面滚动 ...
- CSS+DIV网页样式与布局：第二章：CSS的基本语法
第二章:CSS的基本语法 一 CSS选择器(所有的HTML语言中的标记都是通过不同的css选择器进行控制的).用户只需要 通过选择器对不同的HTML标签进行控制,并赋予各种样式声明,即可实现各种效果. ...
随机推荐
- 【Android框架进阶〖0〗】ThinkAndroid注解机制
由于项目需要,开始研究ThinkAndroid. 个人认为该框架的注解机制十分新颖,所以先研究这个,顺便学习下 Java 的annotation. 粗略的看了看,该机制在BaseActivity中初始 ...
- thinkphp过滤html、script
使用tp3.1版本 1.APP/common 自定义函数 function filter_default(&$value){ $value = htmlspecialchars($value) ...
- CCPC总结
[印象·南阳] 10月15日出发,威海—烟台—郑州—南阳,一路上欢声笑语,从谁是卧底到各类纸牌游戏,也是欢乐.在从郑州到南阳的车上,对面的好像是河南当地的学长,感叹道工作不易的样子,说还是学生时代最为 ...
- 后台动态设置前台标签内容和属性(转自http://www.wzsky.net/html/Program/net/26171.html）
和以前的asp不同,在asp.net中为了彻底的代码分离,我们一般不采用<%=%>嵌入标签中来设置一些属性和内容.一般来说有2种情况:(一)设置标签的内容,比如<title>这 ...
- Thread Pool Engine, and Work-Stealing scheduling algorithm
http://pages.videotron.com/aminer/threadpool.htm http://pages.videotron.com/aminer/zip/threadpool.zi ...
- ARM&Linux 下驱动开发第三节
后台驱动代码如下:比较昨天的,添加了读写指针位置移动操作 #include<linux/init.h> #include<linux/module.h> #include< ...
- EasyUI-右键菜单变灰不可用效果
使用过EasyUI的朋友想必都知道疯狂秀才写的后台界面吧,作为一个初学者我不敢妄自评论它的好坏,不过它确实给我们提供了一个很好框架,只要在它的基础上进行修改,基本上都可以满足我们开发的需要. 知道“疯 ...
- C#创建windows服务搭配定时器Timer使用实例（用代码做，截图版）
功能说明:C#创建一个windows服务,服务启动时D:\mcWindowsService.txt写入数据,服务运行期间每隔两秒写入当前时间. 原理这些就不说了,三语两语说不清楚,直接贴一个实例 ...
- JS的注意点
JS的跨域访问问题. http://www.cnblogs.com/rush/archive/2012/05/15/2502264.html JS能操作的范围:HTTP协议的内容.但是不能直接访问re ...
- 死锁相关 变量 与 PURGE 线程停止
http://www.tuicool.com/articles/NzAFZn https://github.com/percona/percona-server/pull/83/commits/091 ...