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标签进行控制,并赋予各种样式声明,即可实现各种效果. ...
随机推荐
- POJ 3298 Antimonotonicity (思维)
题目链接:http://poj.org/problem?id=3298 找一个最长不要求连续的子序列,如a1 > a3 < a6 > a7 ... 举个例子模拟一下差不多明白了,a[ ...
- C# 实现无标题栏窗体点击任务栏图标正常最小化或还原的解决方法
/// <summary> /// 实现窗体的最小化 /// </summary> protected override CreateParams CreateParams { ...
- sqlserver 自增字段修改为普通主键字段
--增加备份字段alter Table tableName add columnNameBak bigint ; --将主键自增字段 赋值到备份字段update tableNameset column ...
- 关于C#中文本模板(.tt)的简单应用
这两天做项目突遇 .tt文件,之前没有接触过,so查询学习做笔记,帮助记忆和后来者. 在项目添加中点击选择文本模板 下面贴出代码,做了简单的注释 <#@ template debug=" ...
- How to log in to Amazon EC2 using PEM format from SecureCRT
SecureCRT requires both a private and a public key. Use the supplied key.pem file from EC2 here as y ...
- HRESULT 0x80131515 解决方法
http://254698001.blog.51cto.com/2521548/1339696 很多朋友在加载DLL是发生这样的错误:HRESULT: 0x80131515. 解决方法是,在DLL文件 ...
- 动态链接库 仅有.dll文件时候的使用方法
在没有.h和.lib文件时,需要函数指针和WIN32 API函数 LoadLibrary, GetProcAddress 和FreeLibrary 只需要.dll文件即可(将.dll文件置入工程目录中 ...
- NuMicro Coretex™-M0家族中哪种芯片支持UID (Unique ID)? 用户该怎么做才能对其芯片进行加密功能？
http://www.nuvoton.com/hq/chs/productfaqs/Pages/00000001.aspx 是的,使用者可利用UID来对以下系列芯片进行加密, Mini51 Serie ...
- [Express] Level 2: Middleware -- 1
Mounting Middleware Given an application instance is set to the app variable, which of the following ...
- linux下的十六进制编辑器---wxHexEdit
....其实wxHexEdit是一个跨平台的十六进制编辑器,支持windows,linux,mac. 之所以标题用linux...是因为windows下多数都用winhex,UE之类的编辑器,而lin ...