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网页设计(三)--与多种技术的混合应用

时间: 2024-10-05 05:32:17

css+div网页设计(三)--与多种技术的混合应用的相关文章

css+div网页设计

css是网页制作不可缺少的部分,我会用两篇博客为大家展示css的基本用法. 关于css+div的整体结构图总结如下: 本篇博客主要介绍css的基础知识. 一.css概念; css(级联样式表):它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 二.使用css控制页面方法 css控制页面的方法共有四种,行内样式.内嵌式.链接式.导入式. a.行内样式 ps:行内样式

css+div网页设计(二)--布局与定位

在网页设计中,能否控制好各个模块中在页面中的位置是非常关键的,与传统的表格定位不同,css+div定位方式更加的灵活,本篇博客将为大家介绍css+div的布局与定位. 一.盒子模型 由图可以看出 盒子模型的范围包括 margin.border.padding.content. 需要指出的一点是,在ie中与firefox中盒子模型表示略有不同: IE 盒子模型的 content 部分包含了 border 和 pading. 而firefox中的盒子模型的content部分不包含border和pad

精通CSS+DIV网页样式与布局--图片效果

提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过照片处理软件轻松实现自己想要的照片效果.这篇博客,小编将继续来总结CSS+DIV的其她效果来进行分析,有兴趣的小伙伴可以点击以下链接,了解小编之前讲解过的关于CSS的一些基础知识:     精通CSS+DIV网页样式与布局--初探CSS 精通CSS+DIV网页样式与布局--CSS文字效果 精通CSS

精通CSS+DIV网页样式与布局--初探CSS

CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法.与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离.提起DIV+CSS组合,还要从XHTML说起.XHTML是一种在HTML(标准通用标记语言的子集)基础上优化和改进的新语言,目的是基于XML应用与强大的数据转换能力,适应未来网络应用更多的需求."DIV+CSS&q

css+div网页布局常见错误总汇

CSS+DIV是网站标准(或称“WEB标准”)中常用的术语之一,体感音波通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用css div的方式实现各种定位.应用应用DIV+CSS编码时很轻易犯一些错误.本文列举了一些常见的错误: 1. 检查HTML元素标签是否有拼写错误.是否忘记结束标记 即使是老手也经常会弄错div的嵌套关系.可以用dreamweaver的验证功能检查一下有无错误. 2. 检查CSS是否正确 检查

HTML 5+CSS 3网页设计经典范例 (李俊民,黄盛奎) 随书光盘?

<html 5+css 3网页设计经典范例(附cd光盘1张)>共分为18章,涵盖了html 5和css3中各方面的技术知识.主要内容包括html 5概述.html 5与html 4的区别.html 5的结构.canvas绘图功能.网络上的视频和音频应用.表单应用.全新的文件应用.地理位置信息处理.web本地存储应用.离线web应用.web workers api的应用.应用websockets api通信.css样式入门.使用css控制文字样式.使用css设置图片和背景.使用css控制列表.c

精通CSS.DIV网页样式与布局系列学习

精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布局(五) ——设置表格与表单样式 精通CSS.DIV网页样式与布局(四) ——页面背景 精通CSS.DIV网页样式与布局(三)——中秋效果图 精通CSS.DIV网页样式与布局(二)—— 段落 精通CSS.DIV网页样式与布局(二) 精通CSS.DIV网页样式与布局(一) 神奇的验证码,我们一起来探究

CSS+DIV网页样式与布局——文字样式&amp;段落(一)

一个网页要说最多的还是文字,上篇博客说CSS样式是一个网页的精髓,那网页中最直接表现出来的就是文字和图片,还有一些所谓的表单,首先先说最为熟悉和常用的文字.让CSS控制网页中的文字,使它不再那么枯燥平淡,从此网页文字变得绚丽多彩. 一.文字样式 文字样式主要包括文字的大小.颜色.字体等,具体包括如下 写一个小例子,综合运用上述所有的文字效果样式: 代码: <html> <head> <title>文字字体</title> <style> body

精通CSS+DIV网页样式与布局--页面和浏览器元素

在页面和浏览器中,除了文字.图片.表格.表单等,还有很多各种各样的元素,在上篇博文中,小编主要简单的介绍了一下在CSS中如何设置表格和表单,今天小编主要简单介绍一下丰富的超链接特效.鼠标特效.页面滚动条.首先我们来看一张思维导图: 接着,小编会跟随上述思维导图的足迹,慢慢探寻,丰富的超链接特效中,我们首先来介绍动态超链接,我们来看一下例子的代码和运行的效果:  动态超链接 <span style="font-size:18px;"><span style="