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标签进行控制,并赋予各种样式声明,即可实现各种效果. ...
随机推荐
- FZU2143Board Game（最小费用流）
题目大意是说有一个B矩阵,现在A是一个空矩阵(每个元素都为0),每次操作可以将A矩阵相邻的两个元素同时+1,但是有个要求就是A矩阵的每个元素都不可以超过K,求 这个的最小值 解题思路是这样的,新建起点 ...
- POJ3345
http://poj.org/problem?id=3345 大意: 大意是说现在有n个城市来给你投票,你需要至少拿到m个城市的赞成票.想要获得第i个城市的赞成需要花费w[i],有个条件就是某些城市是 ...
- 解决sqlserver使用IP无法连接的问题，用localhost或者‘“.”可以连接
今天装了一个mssql发现用ip无法连接但是用localhost和“.”却可以连接,纠结了一天终于找到了问题的解决办法: 打开mssql配置管理器(我点电脑---->右键选择管理--->服 ...
- 开机自动播放音乐的vbs
今天无意间看到了vbs这小玩意,就突发奇想,自学了一下,倒弄出如下的小玩意,大牛勿喷!这个可用做撩妹神技也可以用于提醒自己!使用方法:复制程序到txt文本里面保存,然后改后缀为vbs,丢到C:\Pro ...
- log4net配置的两种方式
----------文件配置:------------------- <?xml version="1.0" encoding="utf-8" ?> ...
- Unity3d:播放物理目录下的MP3文件
u3d里,是支持播放MP3文件的,但要放到资源里,不支持播放物理目录下的MP3文件.由于界面上无需显示,只是当作背景音乐来播放,所以想到调用c#的组件来解决此问题.主要代码都在附件中,根据需要加到自己 ...
- UVA1151
//感觉刘汝佳老师的思维真的太厉害了orz /*摘录书上的一段话: 只需一个小小的优化即可降低时间复杂度:先求一次原图(不购买任何套餐)的最小生 成树,得到n-1条边,然后每次枚举完套餐后只考虑套餐中 ...
- 数据对象ajax学习篇9
题记:写这篇博客要主是加深自己对数据对象的认识和总结实现算法时的一些验经和训教,如果有错误请指出,万分感谢. 对ajax工作道理: 下面这段是来自一个网友的blog: Ajax的道理简单来说通过Xml ...
- Android ListView标题置顶效果实现
一. 有图有真相 二.实现: 1. 基于ListView分类效果 2. TitleView即标题的处理(创建) 3. 处理TitleView的三种状态 三.源码: 例子下载 实现可以看代码,具 ...
- 【JavsScript】JavaScript MVC 框架技术选型
你很喜欢Gmail和Trello之类的单页面应用,但是不太确定该从何开始.也许你的JavaScript代码是如此的杂乱无章,以致于你很想在下一个项目上尝试下JavaScript MVC库和框架,却苦于 ...