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标签进行控制,并赋予各种样式声明,即可实现各种效果. ...
随机推荐
- 编译安装－Apache
一.配置选项说明 二.安装apache 1.环境准备 2.安装apr 3.安装apr-util 4.安装pcre 5.安装httpd 6.修改配置文件 7.开机自启动 8.注册为服务 9.测试 一.配 ...
- ELF学习--重定位文件
add.c int data = 1;int bss;const int rodata = 1;int add(int num1, int num2){ int sum = 0; sum = num1 ...
- mysql 字段操作
1.添加字段 ALTER TABLE lucky_user ADD COLUMN id_type TINYINT NOT NULL DEFAULT '0' COMMENT "0: 普通用户, ...
- 使用Canvas把照片转换成素描画
原文:http://www.alloyteam.com/2012/07/convert-picture-to-sketch-by-canvas/ 腾讯的alloy team写的一个素描效果,挺不错的. ...
- javaScript 获取主机地址，项目名等
//获取当前网址 var curWwwPath=window.document.location.href; alert(curWwwPath); //http://localhost:8080/ ...
- Ext的Panel总结（好文章）
我刚才禁不住诱惑去看了一下Ext.Window的API文档,发现只是比Panel多了点什么最大化.最小化.关闭.置前.置后.动画引发目标设置.可调整大小这些功能.像什么标题栏.工具栏之类的东西在Ext ...
- wpa_supplicant 中的wpa_supplicant.conf
主要记录下wep加密相关的配置文件的写法. network={ ssid="static-wep-test2" key_mgmt=NONE wep_key0= //密钥索引为2, ...
- JavaScript中伪协议 javascript:研究
将javascript代码添加到客户端的方法是把它放置在伪协议说明符javascript:后的URL中.这个特殊的协议类型声明了URL的主体是任意的javascript代码,它由javascript的 ...
- Codeforces Round #260 (Div. 1) D. Serega and Fun 分块
D. Serega and Fun Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/455/pro ...
- printf打印
printf 打印变量(整型,浮点型,双精度型,字符型,字符串类型) 整型: printf("%d",a); 打印出整形变量a 浮点型:printf("%f", ...