CSS+DIV培训,CSS培训,CSS网页制作培训,CSS+DIV特效与布局培训班-北京珠峰培训
您当前的位置： &&&&CSS+DIV核心课程专业讲座　　　　　　　招生电话：010-
珠峰培训的CSS经典课程的视频已经开始发放了，没有时间来我教室实地学习的朋友，可以向我们索取视频：请加QQ：
教学内容及课程版本(目前只有脱产班，学费从元，内容可选，请详见课程大纲）
★珠峰培训的CSS+DIV课程是真正的前端开发课程，不仅讲CSS的知识点，更重要的是溶入了网站运营优化（SEO，SEM）和客户体验的知识。课程最后达到熟练运用CSS+DIV技术制作标准的有良好用户体验的网页的目地。
珠峰培训为了适应不同的学员的学习要求，课程分为以下两种：
★课程版本3.0： 现在课程大纲已升级为3.0，内容可选，学费从不等。
★课程版本3.0：课程内容：除了全面包括A课程知识点外，尤其加入了基本知识及用JS控制CSS特效、SPRY框架应用，网页栅格化设计及模块化设计应用
招生对象：零基础或有一定网站制作或开发基础的美工设计人员
收费标准及诚信承诺
★ 珠峰培训郑重承诺：CSS+DIV前端开发课程试听满意后再交学费，不满意不收学费。
★ 珠峰培训郑重承诺：本课程永久免费重听，无论是您没有学好还是长时间不用技术点忘了，终身可以免费重听。
★课程版本3.0：面向零基础学员，收学费1200元，学习优秀的同学可以返学费。
★课程版本3.0：收学费1400元。
★在线班：课程内容同课程版本A,面向零基础学员（目前暂停）。（珠峰培训有国内最先进的互动交互式在线教学平台，此教学方式不是单一的让学生看视频，欢迎体验）
学员就业情况
就业待遇情况是衡量教学质量的硬指标。珠峰培训的毕业学员工资大多在四千以上，低于四千的不多。很多同学经我们培训后工资长了一倍，详细的情况请点击链接：
开课时间及学习周期
★ 周末班每月开课一次，每次四周。
★ 脱产班每月一到两次，根据学员情况不同学习时间有所区别。★准确的开班时间，请在线或QQ咨询：或电话咨询：
★ 课程都是小班教学，手把手辅导。
★在线咨询、试听或学习，请登陆在线课堂网址：（点击进入“在线咨询课堂 ”帐号随便写，没有密码，但需要下载一下客户端）
最新开班信息
周末班：暂时未开
脱产班：随时报名，每周都有新课开始。
所有课程支持试听，支持旁听。
北京珠峰培训免费课程
如果您立志从事网站设计或开发并以此为起点谋求更快、更好的发展，那您一定要精通CSS+DIV,您的CSS水平，决定了您的钱途和前途！单纯靠平面设计找工作或不懂CSS而从事网页制作，那您永远是个三流的网站开发或设计人员。精通CSS是适应现代IT飞速发展形势的不二选择。
先原理再实践，先走再跑，循序渐进，不然则是在浪费自己的时间。
标准流、盒子模型、浮动、定位、z-index：这5个是CSS核心，了解得越详细、越深入，你实际做起来就越轻松。
很多人学习CSS很吃力，原因就在于没有把握住CSS的核心，学习没有章法，搞的自己焦头烂额。那你很有必要到这里来听一下这个讲座。
此课程通俗易懂，用大量的实例帮你快速认识CSS的魅力所在，让你快速的掌握CSS核心的东西，让你再学习CSS能达到事半功倍的效果。
本讲座2小时 免费 地址：北京珠峰培训西苑教室 电话：010-， QQ联系：
CSS+DIV高级核心课程(收费）
通过丰富的实例和长达一个月的强化培训，达到CSS高手的水平
　　面向群体：网站美工、设计或开发人员或有志于学习W3C标准化网页设计的人。
如果你从事美工已经有一段时间，现在却失业在家，面试屡屡碰壁，或月薪还不到四千，那你应该到这里来，系统全面深刻的学一下CSS+DIV的知识；
　　学费：
1400元到1800元（可选内容）（3.0版）
本课程是深入学习和应用CSS原理和设计技术的课程。在透彻地讲解CSS原理的基础上，以实际的经典网站为案例，充分向学员讲解如何使用CSS的技术实现的灵活网页布局和特效。如果您自学ＣＳＳ一段时间，仍感觉无所适从，或对CSS自学找不着头绪，总是一头雾水，那您应该到这里来，系统全面深刻的学一下CSS+DIV的知识。
通过本课程你可以学到的内容彻底理解CSS的布局原理 并积累一定的实战经验
设计灵活的多列布局
创建纯CSS实现的导航菜单
设计最新的网页元素样式
打破死板的布局方式
探寻浏览器的兼容方案
CSS的魅力您可以看到CSS能够给网页设计带来的眩目效果，并且充分了解(X)HTML和CSS相关的核心基础知识。
核心基石您将会深入了解CSS的核心机制——盒子模型，它也是CSS布局的最核心的基础；学习CSS布局的重点和难点——浮动和定位；通过对文字和图像的排版，看到很多有趣的应用。
链接与菜单针对超连接，进行深入的讲解，可以看到很多非常神奇的链接和菜单效果。
神奇的表格HTML中的表格非常呆板，而使用CSS对他进行修饰以后，效果就完全不同了，通过制作复杂的多模式日历，您会看到这里面的奥秘。
多彩的圆角设计圆角框看起来简单，实际上区有着很丰富多彩的变化，本书深入讲解了制作圆角框的多种方法，深入分析了不同方法的特点和使用范围。
溶合SPRY框架，让你不用写一句JS脚本，就能自动生成魅力超凡的网页特效来！
高级网页元素读近年出现的很多全新的网页元素，例如Tab面板、折叠面板、伸缩面板等等，这些元素大大改善了用户的体验，本书将介绍设计这些元素的方法。
网页布局深入揭秘网页的布局形式千变万化，本书对布局的规律进行了全面地归纳和总结，从而形成了不同形式布局的设计模式，并给出全面的案例。
禅意花园以CSS禅意花园的作品为例，在研究成功作品的基础上，制作了自己的CSS禅意花园作品，从而演示了对整体页面的布局方法。
北京珠峰培训详细课程
课程已升级，情况如下
课程最新版本：网站前端开发工程师培训2.0版 发布日期：日
课程内容：CSS2.0知识点、CSS布局与特效、javascript基本知识及用JS控制CSS特效、SPRY框架应用，网页栅格化设计及模块化设计应用
比上一版本增强的内容：javascript基本知识及用JS控制CSS特效、SPRY框架应用，网页栅格化设计及模块化设计应用
使用的教材增加了我们编印的javascript教程和spry教程
课程安排：全日制脱产班&&&&&（三周）
我们的课程安排是综合了很多国内外经典教材，再通过珠峰的老师们的工作经验和大量实例，最终达到学生对CSS原理彻底理解，并能实现各种网页布局和特效的目地。更重要的是，补充了用javascript控制CSS的方法和重点介绍了当前流行的AJAX技术--SPRY框架。
课程安排大致如下：
我们先详细讲解css核心基础、盒子模型等知识，力求把道理和方法讲清楚，采用了“探索式”的讲解方法，对于一个问题，例如标准流、浮动、定位等规律，均通过一系列动手实验，使学生自己就能够非常自然地得出结论，使读者不但知其然，而且还知其所以然。
课程中对设计中常用的网页元素和布局方式都给出详细的分类和归纳，并讲解了完整的解决方法，主要包括各种导航菜单(水平的、竖直的、固定宽度的、自适应宽度的、下拉的等)，Tab面板、伸缩面板和折叠面板，以及各种形式的分列布局(固定宽度的、变化宽度的、固定宽度与变化宽度结合的)，等等。这样读者在理解了方法的基础上，可以直接将案例用在自己的设计中的，只需要按照所需进行修改即可。
报名此课程，需要具备一定的HTML和网页设计制作基础。
珠峰培训CSS网页前端开发课程（2.0 版）大纲（目前已经升级为3.0）
比原来的课程有那些改进和提高，这些改进的依据主要来自毕业学员在实际工作中的反馈，另外一方面是教学过程的完善和提高。
1、加强了技术原理性的讲解，更突出了应用，把面向用户体验的网页设计引入到课程中。
2、加强了对课程的组织体系，在学习过程方面做了大量的改进。引入了志愿者模式和团队学习方式，使学习过程更人性化，更生动，提高了互动性。
3、加强了对学生进行考试化评估。在四周的学习中有不少于四次的考核作业。
课前准备：
统计报班学员人数，学员分组，组织志愿者，准备教材和奖品
课程知识分为三类：一为原理性知识，二为应用性知识，三为扩展性知识技能。其中扩展性知识技能不要求一定掌握，但仍旧是讲课的重点和难点
第一周第一天（第一周两天的课程为原理性知识）
HTML血统论
真正理解HTML的血统，才能正确使用HTML标签，用好HTML标签是做好网页的基础。
万物皆盒子。能做布局的不只是DIV，所有的标签都可以做布局。用DIV，是因为它一穷二白，没什么默认值。
一、盒子原理：
边距，填充，边框，默认宽度，填充对背景的影响
二、标准流，浮动(float)和定位(position)
浮动的开始位置、浮动元素对兄弟元素的影响，清除浮动。
浮动会对弟弟产生影响，弟弟元素会视此元素为不见，但弟弟元素内的内容不会与浮动元素内的内容
三、行内元素和块级元素。
块级元素和行内元素 了解那些是块级元素，那些是行内元素。两种元素的转化方法（display)
四、初步了解background的复杂用法
五、了解溢出（overflow)，理解clear和overflow的重要性
六、布置作业，分析作业
今天的实践练习作业：用CSS+DIV的方式完成复杂的表格效果，目地在于强化盒子原理和用CSS+DIV做网页的整体布局。
第一周第二天的知识点
一、定位position的全面了解
例子：不用图片的三角菜单，带说明信息的菜单。
二、应用背景属性的复杂用法：九宫格 CSS SPRITE
三、Z-index原理
四、深入理解ID选择器、类选择器其不同的样式的作用强度
实例：三角菜单，圆角菜单，折角菜单，会跳动的多彩菜单等。
五、CSS调试工具，CSS浏览器兼容性测试工具使用。
实践练习：仿做有道桌面词典首页
第二周（第三天）
上午：学员讲练习，讨论课分析课。（准备好奖品）
下午讲滑动门 伪类，CSS发展趋
做出两层滑动门做的玻璃导航菜单
第二周（第四天）:CSS菜单应用
有实际意思的CSS菜单（综述了定位和z-index特性的菜单），在此讲中着重讲解了伪类和在将来的CSS发展趋势中的伪类的重要性
布置作业：通过网络了解面向客户体验的网站设计、栅格化设计、UED、UCD
第三周：课程重点是CSS的综合技能、CSS框架和JS基础知识
第五天上午讲面向用户体验的网页设计、栅格化设计
开放性课程，讨论课
面向用户体验的网页设计、栅格化设计原理及应用
第五天下午讲SPRY框架，tab面板和折叠面板（其中tab面板是重点）
在讲解SPRY框架时要求学生理解什么是CSS、JS框架，要求了解SPRY所能实现的网页特效。
对SPRY框架的JS部分不做讲解，对SPRY的CSS要求学生熟练掌握如何做出自定义的几种特效。
对学生说明为什么要选择SPRY来讲解：SPRY和DW无缝集成，不需要写任何的JS代码就可以图形化的设计特效，这是其它框架所不具备的。
在更高级的课程中（中），我们会讲解功能更强大，更通用列流行的JQuery框架。
练习，有tab面板的综合网页练习
布置作业：用spry完成综合的网站首页功能
JS入门，JS语法，方法定义，基本的语句：条件，循环，用JS控制CSS
用JS做的下拉菜单
第四周：以综合练习和扩展技能为主，重点是CSS的高级应用和JS
第七天，变宽布局 和圆角（上午）
第八天，JS进阶
注意：SPRY框架和JS是扩展知识，尤其是JS。最后一个作业只要求做出CSS效果来，满分七十分，如果把JS效果能独立做出来，是140分
最后评出本期优秀学员，合影留念。
北京珠峰培训讲师介绍
姓&&名：朱峰
讲授课程：css网页特效与布局核心课程
朱峰老师是一线的网站开发人员，ASP.NET程序员，精通CSS，JS，ASP.NET，开发过多个农业方面的大型网站，最大的优势在于教学和网站开发没有脱离，能把最实用最前沿最有用的网站网页应用技术在教学中体现出来。朱峰老师曾在北大大学下属的一家计算机培训机构任讲师，有丰富的教学经验，教学特点是深刻，生动，细致，耐心！
网站制作开发经验：7年
姓&&名：胡伟
讲授课程：css+div网页制作，网页中的js特效。
个人简介：北京理工大学硕士，一线网站开发人员，有着丰富的网站设计经验，精通css，javascript，photoshop，fireworks等，开发过多个学院网站。讲课特点是生动风趣，深入浅出，善于联想，让学生在不知不觉中抓住课程的核心部分，实实在在做到“授之以渔”而非仅仅“授之以鱼”。同时不简简单单的对课本知识死缠烂打，而是结合一个一个实际的例子，让学生直观的领悟一个一个的知识点。同时结合课程、循序渐进的一个一个联系又让学生在试手的同时体会到网页工程师的快乐。
北京珠峰培训学生作品
学生作品————箭头菜单
原理剖析：此作品运用盒子原理，margin padding span float 等属性，同时是对css中border属性的灵活应用！
学生作品————上弹菜单
原理剖析：此作品运用盒子原理有机复习！
学生作品————利用css技术制作表格
作品说明：重在强化对盒子原理的理解与实践！
学生作品————模仿雅虎邮箱的页面
原理剖析：此作品是对盒子原理的近一步深化，同时对css中&background&属性近一步的深化，重点是“background-position”的用法！同时对比一下用table与css+div的区别
学生作品————整站练习
作品说明：此作品是在学员在学习一周之后的作品，基本上可以说是网站的成品！在按钮的处理上，主要的是运用了滑动门的技术——书中说的比较复杂，简单的说就可以自动适应长度和宽度的按钮，形象的比喻就像日式风格门的效果！
北京珠峰培训免费课程
我们的课都支持试听，您可以自行选择时间，和老师约好后来试听或旁听！(也可以选择随时随地的在线试听)
珠峰培训的CSS经典课程的视频已经开始免费发放了，没有时间来我教室实地学习的朋友，可以向我们索取视频：请加QQ：
劝君莫惜金缕衣，劝君惜取少年时。 花开堪折直须折，莫待无花空折枝。电脑技术，重在普及，重在应用。珠峰电脑培训学校掀电脑技术普及风暴！！
北京珠峰培课是都可是免费试听或旁听的，您可以周六日来，我们全天都有CSS的课程。如果您立志从事网站设计或开发并以此为起点谋求更快、更好的发展，那您一定要精通CSS+DIV,您的CSS水平，决定了您的钱途和前途！单纯靠平面设计找工作或不懂CSS而从事网页制作，那您永远是个三流的网站开发或设计人员。精通CSS是适应现代IT飞速发展形势的不二选择。
先原理再实践，先走再跑，循序渐进，不然则是在浪费自己的时间。
标准流、盒子模型、浮动、定位：这4个是CSS核心，了解得越详细、越深入，你实际做起来就越轻松。很多人学习CSS很吃力，原因就在于没有把握住CSS的核心，学习没有章法，搞的自己焦头烂额。那你很有必要到这里来听一下这个讲座。
此课程通俗易懂，用大量的实例帮你快速认识CSS的魅力所在，让你快速的掌握CSS核心的东西，让你再学习CSS能达到事半功倍的效果。
主讲人：朱峰老师 七年网站开发经验。通过大量的实例生动具体的阐述CSS原理及其应用。
具体的例子有：CSS导航菜单，CSS二级菜单，CSS完成网页布局，用CSS制作圆角菜单，纯CSS的菜单特效，滑动门，九宫格，变宽布局等特效。
每次课程的的详尽情况，请来之前致电或咨询
地址：北京市海淀区西苑操场108号217-219
周边交通： 特十，特五，664，996，968，671， 634，384，534，482，运通108等公交车西苑医院下车既到 或乘车到西苑步行十分钟，详细乘车路线，请参考：/jing/contactus.html
北京珠峰培经典案例
案例剖析：
案例剖析：
案例剖析：
案例剖析：
案例剖析：
案例剖析：
案例剖析：
案例剖析：
北京珠峰培收费标准
CSS前端开发脱产班招生中
标准收费：1400元/1800元（3.0版课程体系） 招生对象：有一定工作经验的美工为合适，要求熟HTML基本标签
周末班不是零基础班，没有网页制作相关经验的不招
支持听课满意后交学费，也就是说支持先听课后收费
招生对象：有一定HTML基础的人。
都是小班授课，基本上是手把手的教，课程随便听，试听满意后交学费，可免费试听一天。
北京珠峰培训在线培训
★我们是国内最专业的网页前端开发培训机构，教学方式采用面授、视频资料和在线课堂答疑三种方式。
★在线班：课程内容同课程版本A,面向零基础学员。（珠峰培训有国内最先进的互动交互式在线教学平台，此教学方式不是单一的让学生看视频，欢迎体验。)
★在线班采用晚上(每周三次）通过网络互动教室上课，平时看视频，下午在线答疑的方式。
在线课堂网址：（点击进入“在线咨询课堂
”帐号随便写，没有密码，但需要下载一下客户端）
　　为了方便外地学员和距离我们学校比较远的学员，我们特别开设了网络在线课堂，教学质量和学习内容不变，一般在晚上开课 ，周六安排线下的辅导课。
　　注：因为学习的内容量太大，如果一周只上一两次课，中间间隔时间太长，容易使教学不
连贯，不能很好的达到学习效果。为了弥补这种情况，我们也采取这样周一到周五在 线培训，周六来我们学校当面辅导的形式。
更多...&&&&彻底弄懂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指点优化几处