js+html5+css3实现的滑动下拉刷新效果实例_smile石麦尔_新浪博客
js+html5+css3实现的滑动下拉刷新效果实例
本文我们来实现一个用 js + html5 + css3
实现在移动端滑动下拉就刷新数据的效果，有点类型于淘宝手机站，本文有源代码，感兴趣的朋友可以参考一下。
今天想说的是如何自己操刀做一个js的下拉刷新（js + h5 +
css3）。既然是下拉，那么应用场景当然就是在手持设备上。在JavaScript的世界里，总是跟很多实用又华丽丽的效果接轨，这是一门很有色彩的编程语言。目前网络上也有很多非常优秀的js滑动插件，比如iscroll（最开始我们就是用这款插件，真心很好用，而且解决了很多html的问题）。当然，我要讲的完全没办法和iscroll媲美，仅仅是简简单单的一角而已，主要目的在于对这点小知识的总结和分享。　　之前也有讲过，移动设备上对CSS3和Html5的支持相当的不错，而且使用Css3我们可以轻松的实现滑动效果，不仅不用担心性能问题，而且效果上也是无可挑剔的。那么究竟需要做成什么样的效果呢？效果？嘿嘿，当然是类似淘宝那样的。
​（这里是用chrome模拟iphone5上的效果，关于如何模拟 这里
有讲过的，不再赘述。）&当往下拖动页面的时候出现红色箭头所指向的灰色区域，随着往下拖动的节奏，橘黄色的圈不断的被填满，然后停顿几秒页面刷新（不太明白的话就自己试试吧）。
额额，可是楼上的图片貌似不是很适合做分析。下面以一个极为粗糙的页面做整个思路分析。布局很重要！
整个过程中，布局是决定编码难度及js代码量的重要因素，科学的布局可以带来飞一般的感觉（当然，不同的效果布局上有所不同也是正常的）。
图1 所展示的是整个需要滑动的页面的布局结构。整个布局使用的是一个div（蓝色框部分）里包含
加载数据的提示部分(简称“提示部分”)(红色框部分)
和需要刷新的内容部分(简称“内容部分”)(文字部分)两个div的结构。如果外层div向下移动，那么里面的提示部分和内容部分自然就跟着向下移动了（这样是不是比同时使用js去控制两个元素上下移动简单多了？）。
所展示的是正常的内容页面（滑动完成之后，也是滑动之前的效果），布局上主要是利用css3的transform属性控制提示部分的隐藏和显示。当translateY为负时，整个div向上移动（图2的效果），为0时，整个提示部分就完全展示出来（图1的效果）。
　　 对于上面的描述如果没看懂也别再看了(正在努力突破自我表达极限)。直接上代码：
努力加载中...
&&&&&&&&JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
在1995年时，由Netscape公司的Brendan
Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。[1]
为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。[3]
是一种解释性脚本语言（代码不进行预编译）。[4]
主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。[4]
可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。[4]
跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。
Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。[5]
Html相关代码
　　　　布局上大致就是这样的结构，那么~
　　　　JavaScript该做什么呢？ &
　　　　1、根据滑动轨迹动态调整滑块位置（transfrom=&translate）；
　　　　2、根据滑动的距离判断是否执行刷新（或数据加载）。
&　　　当然，如果滑动结束后使用ajax重新加载页面数据，还将涉及到一个页面向上滑动并隐藏提示部分的效果。
　　　　大致思路：
　　　　(前提条件：当前元素已滑动至顶部)&
　　　　1、当鼠标左键按下（移动设备上的touchstart事件）的时候记录下当前鼠标位置的
　　　　2、当鼠标移动的时候（touchmove事件），记录下鼠标的Y
轴坐标判断滑动轨迹并进行相应的滑块移动；
　　　　3、当鼠标左键松开（touchend事件）的时候，通过对比鼠标开始和结束的Y轴坐标的距离判断是否应该刷新页面（或重新加载数据）。
&亮代码，秀画风：
& & var slide = function
(obj, offset, callback) {
& var start,
& & & isLock =
false,//是否锁定整个操作
& & & isCanDo =
false,//是否移动滑块
& & & isTouchPad
= (/hp-tablet/gi).test(navigator.appVersion),
& & & hasTouch =
'ontouchstart' in window &&
& //将对象转换为jquery的对象
& obj = $(obj);
& var objparent = obj.parent();
& var fn =
& & //移动容器
& & translate: function (diff)
& obj.css({
"-webkit-transform": "translate(0," + diff + "px)",
"transform": "translate(0," + diff + "px)"
& & //设置效果时间
& & setTranslition: function
& obj.css({
"-webkit-transition": "all " + time + "s",
"transition": "all " + time + "s"
& & //返回到初始位置
& & back: function ()
& fn.translate(0 - offset);
& //标识操作完成
& isLock =
& //滑动开始
& obj.bind("touchstart", function (e) {
(objparent.scrollTop() &= 0
&& !isLock) {
& & var even = typeof event ==
"undefined" ? e :
& & //标识操作进行中
& & isLock =
& & isCanDo =
& & //保存当前鼠标Y坐标
& & start = hasTouch ?
even.touches[0].pageY : even.pageY;
& & //消除滑块动画时间
fn.setTranslition(0);
& //滑动中
& obj.bind("touchmove", function (e) {
(objparent.scrollTop() &= 0
&& isCanDo) {
& & var even = typeof event ==
"undefined" ? e :
& & //保存当前鼠标Y坐标
& & end = hasTouch ?
even.touches[0].pageY : even.pageY;
& & if (start &
& even.preventDefault();
& //消除滑块动画时间
& fn.setTranslition(0);
& //移动滑块
& fn.translate(end - start - offset);
& //滑动结束
& obj.bind("touchend", function (e) {
(isCanDo) {
& & isCanDo =
& & //判断滑动距离是否大于等于指定值
& & if (end - start
&= offset) {
& //设置滑块回弹时间
& fn.setTranslition(1);
& //保留提示部分
& fn.translate(0);
& //执行回调函数
& if (typeof callback == "function") {
callback.call(fn, e);
& & } else {
& //返回初始状态
& fn.back();
&代码分析：
&1、参数：obj，要滑动的对象；offset，提示部分的transform的值（代码中是
transform:translate(0px,-61px)
，那么这里就是61）；callback，回调函数，在下拉完成后调用的函数（页面刷新或数据加载）。
&2、为什么是transform不是margin？&
　　因为transform不会引起重绘，相比margin更流畅，性能更好。但是transfrom有个比较好玩的地方，如果translateY的值为负数（当前元素上移xx像素）下方元素不会跟着上移（margin会上移）,在这点上它和margin是有区别的。
注意，这里的-webkit-transform的存在是有必要的，因为有些浏览器识别不了transform，比如微信内置浏览（我的手机上是这样的）。为了兼容性，多扣几个字母是值得的。
&3、关于transition设置为0s。
　　为什么要在touchstart的时候把transition的值设置为0秒呢？transition的作用是为元素属性的变化添加过渡效果，例如一个框变大，我们设置为transition为1s，那么这个框就是在1s内变大到指定大小。第一个参数表示设置过渡效果的
CSS 属性的名称（如：margin，transform；all表示所有），第二个参数表示过渡的时间。
代码中设置transition的目的是在于滑动结束后（手指离开屏幕）为滑块回弹添加过渡效果，这样看上去就不会那么突兀。当然，这个过渡效果同样会应用到数据加载完成后提示部分的隐藏上。设置为0是为了取消在滑动过程中的滑块过渡效果，我们手指往下滑动的时候，滑块会跟这向下移动，这样就有了滑动滑块的效果。如果这个时候不取消transition就会出现滑块抖动的效果（嘿嘿，有兴趣的话可以试试这种感觉。）。整个过程中transition是相当重要的。
&4、关于isLock和isCanDo.
&　　这两个变量的作用在于防止二次滑动，在第一次滑动后数据加载完成之前不允许有第二次的滑动。当滑动开始的时候讲isLock和isCanDo都设置为True，表示允许后面两个事件里的代码可以正常运行，当滑动结束后isCanDo设置为false表示在isLock被设置为True之前（整个操作完成之前）所有的事件代码均不可用（不执行下拉数据加载等相关动作）。
5、如何使用？
这个比较就简单，但也比较重要。
$(function () {
& slide("#container", 61, function (e)
& & & var that =
setTimeout(function () {
& & that.back.call();
代码中的setTimeout是用于模拟ajax加载数据的效果，加载数据这部分就没有再单独写过了。JavaScript的回调函数是用着最顺手的特性之一。这里在数据加载完成后需要调用一个back方法，这个方法目的就是重置slide里的各种状态。关于这种传来传去的方式给人的感觉有点像做地下工作，不太容易被发现，可暂时也没有想到更好的解决方案。
转自www.111cn.net 编辑:edit02_lz
smile石麦尔
博客等级：
博客积分：0
博客访问：7,338
关注人气：0
荣誉徽章：简单的网页布局实战（表格与HTML框架）
学了html一些最常用的标签后，我们需要自己动手实战，首先，我们主要运用表格相关的标记实现网页布局，先来看一张效果图：
大概思路是整个网页被分成三大块，头部，中部（左部和右部），底部。中部又被分成左部和右部，所以我们需要嵌套使用标签，结合前几篇的标签基础知识就能看懂下面的源代码了。
&title&网页布局实战&/title&
&meta charset="utf-8"&
&body topmargin="0"&
&table border="1" width="880" align="center" cellspacing="0" cellpadding="0"&
&tr height="50" bgcolor="red" align="center"&
&td&&font color="white" size="6" &&b&网页的头部&/b&&/font&&/td&
&table bgcolor="yellow"
width="30%" height="500" align="left"&
&tr align="center"&
&td&&font color="white" size="6" &&b&网页的左部&/b&&/font&&/td&
&table bgcolor="green" width="70%" height="500" align="right"&
&tr align="center"&
&td&&font color="white" size="6" &&b&网页的右部&/b&&/font&&/td&
&tr height="50" bgcolor="red" align="center"&
&td&&font color="white" size="6" &&b&网页的底部&/b&&/font&&/td&
接下来是用HTML框架实现，先来看下基础知识部分：
首先，还是先要看效果图：
跟上面的网页布局好像差不多的吧，分三块中部再嵌套，不过这次是使用frameset标签为主体实现的，中部的左半部分还运用了超链接。上面效果的实现并不是用一个html文件实现的，这里我用的实现的是新建一个文件夹，建立wangye.html为主体，再新建四个html文件为分区，还放了两张图片。
结合源代码看：
wangye.html
&title&HTML框架&/title&
&meta charset="utf-8"&
&frameset rows="90,*,90" frameborder="5" border="5" noresize="noresize"&
&frame name="top" src="top.html"/&
&frameset cols="20%,80%"&
&frame name="left" src="left.html"/&
&frame name="right " src="right.html"/&
&/frameset&
&frame name="bottom" src="bottom.html"/&
&/frameset&
&title&HTML框架&/title&
&meta charset="utf-8"&
&center&&h1&走入吉他世界&/h1&&/center&
bottom.html
&title&HTML框架&/title&
&meta charset="utf-8"&
&center&&p&&font color="red"&回忆的夏天博客出版&/font&&/p&&/center&
&title&HTML框架&/title&
&meta charset="utf-8"&
&li&&a href="" target="_blank"&首页&/a&&/li&&br/&
&li&&a href="" target="_blank"&新闻&/a&&/li&&br/&
&li&&a href="" target="_blank"&资讯&/a&&/li&&br/&
&li&&a href="" target="_blank"&图片&/a&&/li&&br/&
&li&&a href="" target="_blank"&联系我们&/a&&/li&&br/&
right.html
&title&HTML框架&/title&
&meta charset="utf-8"&
&img src="guitar.jpg"
width="120"
height="90"/&
&p&吉他（英语：Guitar），又译为结他或六弦琴。属于弹拨乐器，通常有六条弦，形状与提琴相似。
吉他在流行音乐、摇滚音乐、蓝调、民歌、佛朗明哥中，常被视为主要乐器。而在古典音乐的领域里，
吉他常以独奏或二重奏的型式演出；当然，在室内乐和管弦乐中，吉他亦扮演着相当程度的陪衬角色。
作为乐器家族中弦乐器的一员，吉他是一种通过拨动上面一根根的琴弦发出声音的有弦的演奏乐器。
弹奏时用一只手拨动琴弦，另一只手的手指抵在指板上，后者是覆盖在琴颈上的金属小条。弹奏出来
的声音会通过吉他的共鸣箱得到增强。
&img src="guitar1.jpg"
width="120"
height="90"/&
&p&怎样克服吉他初学进阶过程中的难题
第一步：大横按的熟练掌握
第二步：扫弦的熟练掌握 第三
步：调的概念的掌握 第四步：揉弦的掌握
第五步：找音的能力培养
找音的能力就是指你听到一段音
乐，你马上能在吉他上弹出相应的简谱。这是扒带的关键。所以你练琴没事的时候，可以随便哼一些曲
子，然后在吉他上弹出来。不过前提是你能熟练掌握12个调的音阶分布图，以及各种音型的指法。这个
能力一定要培养。这对乐理及创作即兴都是有很大帮助的。平时当你没有吉他的时候，你也可以这样练
耳，听到一段音乐，然后哼出它的简谱。
&img src="guitar.jpg"
width="120"
height="90"/&
&p&吉他（英语：Guitar），又译为结他或六弦琴。属于弹拨乐器，通常有六条弦，形状与提琴相似。
吉他在流行音乐、摇滚音乐、蓝调、民歌、佛朗明哥中，常被视为主要乐器。而在古典音乐的领域里，
吉他常以独奏或二重奏的型式演出；当然，在室内乐和管弦乐中，吉他亦扮演着相当程度的陪衬角色。
作为乐器家族中弦乐器的一员，吉他是一种通过拨动上面一根根的琴弦发出声音的有弦的演奏乐器。
弹奏时用一只手拨动琴弦，另一只手的手指抵在指板上，后者是覆盖在琴颈上的金属小条。弹奏出来
的声音会通过吉他的共鸣箱得到增强。
&img src="guitar1.jpg"
width="120"
height="90"/&
&p&怎样克服吉他初学进阶过程中的难题
第一步：大横按的熟练掌握
第二步：扫弦的熟练掌握 第三
步：调的概念的掌握 第四步：揉弦的掌握
第五步：找音的能力培养
找音的能力就是指你听到一段音
乐，你马上能在吉他上弹出相应的简谱。这是扒带的关键。所以你练琴没事的时候，可以随便哼一些曲
子，然后在吉他上弹出来。不过前提是你能熟练掌握12个调的音阶分布图，以及各种音型的指法。这个
能力一定要培养。这对乐理及创作即兴都是有很大帮助的。平时当你没有吉他的时候，你也可以这样练
耳，听到一段音乐，然后哼出它的简谱。
&img src="guitar.jpg"
width="120"
height="90"/&
&p&吉他（英语：Guitar），又译为结他或六弦琴。属于弹拨乐器，通常有六条弦，形状与提琴相似。
吉他在流行音乐、摇滚音乐、蓝调、民歌、佛朗明哥中，常被视为主要乐器。而在古典音乐的领域里，
吉他常以独奏或二重奏的型式演出；当然，在室内乐和管弦乐中，吉他亦扮演着相当程度的陪衬角色。
作为乐器家族中弦乐器的一员，吉他是一种通过拨动上面一根根的琴弦发出声音的有弦的演奏乐器。
弹奏时用一只手拨动琴弦，另一只手的手指抵在指板上，后者是覆盖在琴颈上的金属小条。弹奏出来
的声音会通过吉他的共鸣箱得到增强。
&img src="guitar1.jpg"
width="120"
height="90"/&
&p&怎样克服吉他初学进阶过程中的难题
第一步：大横按的熟练掌握
第二步：扫弦的熟练掌握 第三
步：调的概念的掌握 第四步：揉弦的掌握
第五步：找音的能力培养
找音的能力就是指你听到一段音
乐，你马上能在吉他上弹出相应的简谱。这是扒带的关键。所以你练琴没事的时候，可以随便哼一些曲
子，然后在吉他上弹出来。不过前提是你能熟练掌握12个调的音阶分布图，以及各种音型的指法。这个
能力一定要培养。这对乐理及创作即兴都是有很大帮助的。平时当你没有吉他的时候，你也可以这样练
耳，听到一段音乐，然后哼出它的简谱。
&img src="guitar.jpg"
width="120"
height="90"/&
&p&吉他（英语：Guitar），又译为结他或六弦琴。属于弹拨乐器，通常有六条弦，形状与提琴相似。
吉他在流行音乐、摇滚音乐、蓝调、民歌、佛朗明哥中，常被视为主要乐器。而在古典音乐的领域里，
吉他常以独奏或二重奏的型式演出；当然，在室内乐和管弦乐中，吉他亦扮演着相当程度的陪衬角色。
作为乐器家族中弦乐器的一员，吉他是一种通过拨动上面一根根的琴弦发出声音的有弦的演奏乐器。
弹奏时用一只手拨动琴弦，另一只手的手指抵在指板上，后者是覆盖在琴颈上的金属小条。弹奏出来
的声音会通过吉他的共鸣箱得到增强。
&img src="guitar1.jpg"
width="120"
height="90"/&
&p&怎样克服吉他初学进阶过程中的难题
第一步：大横按的熟练掌握
第二步：扫弦的熟练掌握 第三
步：调的概念的掌握 第四步：揉弦的掌握
第五步：找音的能力培养
找音的能力就是指你听到一段音
乐，你马上能在吉他上弹出相应的简谱。这是扒带的关键。所以你练琴没事的时候，可以随便哼一些曲
子，然后在吉他上弹出来。不过前提是你能熟练掌握12个调的音阶分布图，以及各种音型的指法。这个
能力一定要培养。这对乐理及创作即兴都是有很大帮助的。平时当你没有吉他的时候，你也可以这样练
耳，听到一段音乐，然后哼出它的简谱。
&img src="guitar.jpg"
width="120"
height="90"/&
&p&吉他（英语：Guitar），又译为结他或六弦琴。属于弹拨乐器，通常有六条弦，形状与提琴相似。
吉他在流行音乐、摇滚音乐、蓝调、民歌、佛朗明哥中，常被视为主要乐器。而在古典音乐的领域里，
吉他常以独奏或二重奏的型式演出；当然，在室内乐和管弦乐中，吉他亦扮演着相当程度的陪衬角色。
作为乐器家族中弦乐器的一员，吉他是一种通过拨动上面一根根的琴弦发出声音的有弦的演奏乐器。
弹奏时用一只手拨动琴弦，另一只手的手指抵在指板上，后者是覆盖在琴颈上的金属小条。弹奏出来
的声音会通过吉他的共鸣箱得到增强。
&img src="guitar1.jpg"
width="120"
height="90"/&
&p&怎样克服吉他初学进阶过程中的难题
第一步：大横按的熟练掌握
第二步：扫弦的熟练掌握 第三
步：调的概念的掌握 第四步：揉弦的掌握
第五步：找音的能力培养
找音的能力就是指你听到一段音
乐，你马上能在吉他上弹出相应的简谱。这是扒带的关键。所以你练琴没事的时候，可以随便哼一些曲
子，然后在吉他上弹出来。不过前提是你能熟练掌握12个调的音阶分布图，以及各种音型的指法。这个
能力一定要培养。这对乐理及创作即兴都是有很大帮助的。平时当你没有吉他的时候，你也可以这样练
耳，听到一段音乐，然后哼出它的简谱。
记住要多实操，先去模仿别人的布局，从最简单的开始做，这样才会掌握。彻底弄懂CSS盒子模式(DIV布局快速入门)――作者：唐国辉 [本页为无表格排版标准网页]
彻底弄懂CSS盒子模式(DIV布局快速入门)
作者：唐国辉　　　天涯社区、经典论坛昵称：webflash
如果你想尝试一下不用表格来排版网页，而是用CSS来排版你的网页，也就是常听的用DIV来编排你的网页结构，又或者说你想学习网页标准设计，再或者说你的上司要你改变传统的表格排版方式，提高企业竞争力，那么你一定要接触到的一个知识点就是CSS的盒子模式，这就是DIV排版的核心所在，传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。因为用这种方式排版的网页代码简洁，更新方便，能兼容更多的浏览器，比如PDA设备也能正常浏览，所以放弃自己之前钟爱的表格排版也是值得的，更重要的是CSS排版网页的优势远远不只这些，本人在这里就不多说，自己可以去查找相关信息。
理解CSS盒子模型
什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。 CSS盒子模式 这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。在现实生活中，假设我们在一个广场上，把不同大小和颜色的盒子，以一定的间隙和顺序摆放好，最后从广场上空往下看，看到的图形和结构就类似我们要做的网页版面设计了，如下图。由“盒子”堆出来的网页版面现在对CSS盒子模式理解多少了，如果还不够透彻，继续往下看，我会在后面举例，并延用盒子的概念来解释它。
转变我们的思路
传统的前台网页设计是这样进行的：根据要求，先考虑好主色调，要用什么类型的图片，用什么字体、颜色等等，然后再用Photoshop这类软件自由的画出来，最后再切成小图，再不自由的通过设计HTML生成页面，改用CSS排版后，我们要转变这个思想，此时我们主要考虑的是页面内容的语义和结构，因为一个强CSS控制的网页，等做好网页后，你还可以轻松的调你想要的网页风格，况且CSS排版的另外一个目的是让代码易读，区块分明，强化代码重用，所以结构很重要。如果你想说我的网页设计的很复杂，到后来能不能实现那样的效果？我要告诉你的是，如果用CSS实现不了的效果，一般用表格也是很难实现的，因为CSS的控制能力实在是太强大了，顺便说一点的是用CSS排版有一个很实用的好处是，如果你是接单做网站的，如果你用了CSS排版网页，做到后来客户有什么不满意，特别是色调的话，那么改起来就相当容易，甚至你还可以定制几种风格的CSS文件供客户选择，又或者写一个程序实现动态调用，让网站具有动态改变风格的功能。
实现结构与表现分离
在真正开始布局实践之前，再来认识一件事――结构和表现相分离，这也用CSS布局的特色所在，结构与表现分离后，代码才简洁，更新才方便，这不正是我们学习CSS的目的所在吗？举个例来说P是结构化标签，有P标签的地方表示这是一个段落区块，margin是表现属性，我要让一个段落右缩进2字高，有些人会想到加空格，然后不断地加空格，但现在可以给P标签指定一个CSS样式：P {text-indent: 2}，这样结果body内容部分就如下，这没有外加任何表现控制的标签：
&p&加进天涯社区有一段时间了，但一直没有时间写点东西，今天写了一篇有关CSS布局的文章，并力求通过一种通俗的语言来说明知识点，还配以实例和图片，相信对初学CSS布局的人会带来一定的帮助。&/p&
如果还要对这个段落加上字体、字号、背景、行距等修饰，直接把对应的CSS加进P样式里就行了，不用像这样来写了：
color=&#FF0000& face=&宋体&&段落内容&/font&&/p&
这个是结构和表现混合一起写的，如果很多段落有统一结构和表现的话，再这样累加写下去代码就繁冗了。
再直接列一段代码加深理解结构和表现相分离：
&style type=&text/css&&
#photoList img{
　　height:80;
　　width:100;
　　margin:5
id=&photoList&&
&img src=&01.jpg&
&img src=&02.jpg&
&img src=&03.jpg&
&img src=&04.jpg&
&img src=&05.jpg&
不用CSS排版
&img src=&01.jpg&
width=&100& height=&80& align=&middle& /&
&img src=&02.jpg&
width=&100& height=&80& align=&middle& /&
&img src=&03.jpg&
width=&100& height=&80& align=&middle& /&
&img src=&04.jpg&
width=&100& height=&80& align=&middle& /&
&img src=&05。jpg&
width=&100& height=&80& align=&middle& /&
第一种方法是结构表现相分离，内容部分代码简单吧，如果还有更多的图片列表的话，那么第一种CSS布局方法就更有优势，我打个比喻你好理解：我在BODY向你介绍一个人，我只对你说他是一个人，至于他是一个什么样的人，有多高，是男是女，你去CSS那里查下就知道。这样我在BODY的工作就简单了，也就是说BODY的代码就简单了。如果BODY有一个团队人在那里，我在CSS记录一项就行了，这有点像Flash软件里的元件和实例的概念，不同的实例共享同一个元件，这样动画文件就不大了，把这种想法移到CSS网页设计中，就是代码不复杂，网页文件体积小能较快被客户端下载了。演示地址：/css1.html用CSS排版减小网页文件体积
像上面我做的那个版面，一共分为四个区块，每个区块的框架是一样的，这个框架就是用CSS写出来的，样式写一次，就可以被无数次调用了(用class调用，而不是ID)，只要改变其中的文字内容就可以生成风格统一的众多板块了，它的样式和结构代码是（请不要直接复制生成网页，把下面代码分别粘贴到网页中它们应在的位置）：
&style type=&text/css&&
* {margin:0 padding:0}
font-size: 12
width: 805
.mainBox {
border: 1px dashed #0099CC;
padding: 0
height: 300
width: 192
.mainBox h3 {
height: 20
width: 179
color: #FFFFFF;
padding: 6px 3px 3px 10
background-color: #0099CC;
font-size: 16
.mainBox p {
line-height: 1.5
text-indent: 2
margin: 35px 5px 5px 5
&div class=&mainBox&&
&h3&前言&/h3&
&p&正文内容&/p&
&div class=&mainBox&&
&h3&CSS盒子模式&/h3&
&p&正文内容 &/p&
&div class=&mainBox&&
&h3&转变思想&/h3&
&p&正文内容 &/p&
&div class=&mainBox&&
&h3&熟悉步骤&/h3&
&p&正文内容 &/p&
熟悉工作流程
在真正开始工作之前我们脑海中要形成这样一种思想：表格是什么我不知道，在内容部分我不能让它再出现表现控制标签，如：font、color、height、width、align等标签不能再出现，（简单说工作前先洗脑，忘掉以前的一惯做法，去接受和使用全新的方法），我不是单纯的用DIV来实现排版的嵌套，DIV是块级元素，而像P也是块级元素，例如要分出几个文字内容块，不是一定要用DIV才叫DIV排版，不是“&div&文字块一&/div&&div&文字块二&/div&&div&文字块三&/div&”，而用“&p&文字块一&/p&&p&文字块二&/p&&p&文字块三&/p&”更合适。
用DIV+CSS设计思路是这样的: 1.用div来定义语义结构；2.然后用CSS来美化网页，如加入背景、线条边框、对齐属性等；3.最后在这个CSS定义的盒子内加上内容，如文字、图片等（没有表现属性的标签），下面大家跟我一起来做一个实例加深对这个步骤的理解。先看结果图：演示地址：/css2.htmlCSS排版结果图
用div来定义语义结构
现在我要给大家演示的是一个典型的版面分栏结构，即页头、导航栏、内容、版权（如下图），典型版面分栏结构其结构代码如下：
&div id=&header&&&/div&
&div id=&nav&&&/div&
&div id=&content&&&/div&
&div id=&footer&&&/div&
上面我们定义了四个盒子，按照我们想要的结果是，我们要让这些盒子等宽，并从下到下整齐排列，然后在整个页面中居中对齐，为了方便控制，我们再把这四个盒子装进一个更大的盒子，这个盒子就是BODY，这样代码就变成:
&div id=&header&&&/div&
&div id=&nav&&&/div&
&div id=&content&&&/div&
&div id=&footer&&&/div&
最外边的大盒子（装着小盒子的大盒子）我们要让它在页面居中，并重定义其宽度为760像素，同时加上边框，那么它的样式是：
font-family: Arial, Helvetica, sans-
font-size: 12
width: 760
border: 1px solid #006633;
页头为了简单起见，我们这里只要让它整个区块应用一幅背景图就行了,并在其下边界设计定一定间隙，目的是让页头的图像不要和下面要做的导航栏连在一起，这样也是为了美观。其样式代码为：
background-image:
url(headPic.gif);
background-repeat:
margin:0px
导航栏我做成像一个个小按钮，鼠标移上去会改变按钮背景色和字体色，那么这些小小的按钮我们又可以理解为小盒子，如此一来这是一个盒子嵌套问题了，样式代码如下：
font-size:
list-style-type:
#nav li a{
color:#000000;
text-decoration:
padding-top:4
text-align:
background-color:
margin-left:2
#nav li a:hover{
background-color:#006633;
color:#FFFFFF;
内容部分主要放入文章内容，有标题和段落，标题加粗，为了规范化，我用H标签，段落要自动实现首行缩进2个字,同时所有内容看起来要和外层大盒子边框有一定距离，这里用填充。内容区块样式代码为：
#content {
line-height:
#content p {
text-indent:
#content h3 {
font-size:
版权栏，给它加个背景，与页头相映，里面文字要自动居中对齐，有多行内容时，行间距合适，这里的链接样式也可以单独指定，我这里就不做了。其样式代码如下：
line-height:
text-align:
background-color:
最后回到样式开头大家会看到这样的样式代码：
这是用了通配符初始化各标签边界和填充，（因为有部分标签默认会有一定的边界，如Form标签）那么接下来就不用对每个标签再加以这样的控制，这可以在一定程度上简化代码。最终完成全部样式代码是这样的：
&style type=&text/css&&
font-family: Arial, Helvetica, sans-
font-size: 12
width: 760
border: 1px solid #006633;
background-image:
url(headPic.gif);
background-repeat:
margin:0px
font-size:
list-style-type:
#nav li a{
color:#000000;
text-decoration:
padding-top:4
text-align:
background-color:
margin-left:2
#nav li a:hover{
background-color:#006633;
color:#FFFFFF;
#content {
line-height:
#content p {
text-indent:
#content h3 {
font-size:
line-height:
text-align:
background-color:
结构代码是这样的：
id=&header&&&/div&
&ul id=&nav&&
&li&&a href=&#&&首 页&/a&&/li&
&li&&a href=&#&&文
章&/a&&/li&
&li&&a href=&#&&相册&/a&&/li&
&li&&a href=&#&&Blog&/a&&/li&
&li&&a href=&#&&论
坛&/a&&/li&
&li&&a href=&#&&帮助&/a&&/li&
&div id=&content&&
&h3&前言&/h3&
&p&第一段内容&/p&
&h3&理解CSS盒子模式&/h3&
&p&第二段内容&/p&
&div id=&footer&&
&p&关于华升 | 广告服务 | 华升招聘 | 客服中心 | Q Q留言 | 网站管理 | 会员登录 | 购物车&/p&&p&Copyright &2006 - 2008 Tang Guohui. All Rights
Reserved&/p&
好了，此文到此结束，更多内容，如：CSS中的盒子宽度计算，浏览器兼容问题，XHTML规范化写法等请大家去参考其它资料。如果觉得此文还可以，看过之后记得跟帖，你的鼓励是我不断出新文章的动力^-^
原创作品，转摘请注明作者，作者：唐国辉。 感谢经典论坛网页标准化专栏斑竹blankzheng指点优化几处}