DIVCSS基础教程全攻略.docx

《DIVCSS基础教程全攻略.docx》由会员分享，可在线阅读，更多相关《DIVCSS基础教程全攻略.docx（63页珍藏版）》请在优知文库上搜索。

1、2天驾驭DIVCSS网页制作技术基磁上础】D1VCSS的叫法是不粕确的【总础.】运用Table布脑是不明智的【与础：】XHTM1.YSS及SEO【基整四】CSS如何限11g面【搠8五】CSS选择黝【蛙础六】CSS选择四命名及*;用命名【装础七】自-f模基【基础八】块状元素和内联元素售程【第一课】自桎型，块状元率及内联兀宏、CSS选择遇【其次课】浮动【第：.课】消除泞动【第四课】导航条【第裸】浮动(float)页面布局【第六节】定位【第匕吊】定应用【第八课】CSSHaCk小技巧【取张图片按钮丈例】【首行文学的文字渐进】DIV+CSS网页制作这种叫法不精确2010-01-0115:29:25来源C

2、SS学习网网页制作NebjX文章简介：DIV+CSS的叫法是不精确的.DIV-KSS的叫法是不精确的我想凡是来到“CSS学习网”的同学，很大部分是冲着DIVySS来的，H的就是学习DIY+CSS的，说的再干脆一些就是学习如何用DIVmSS布局页面，如何从一张图片制作成标准的DIV+CSS页面。假如你看完第一段还没有发觉错误的话，那你就很有必要，接着往下看D1V+CSS这种叫法其实是一种很错误的叫法，这是国人一厢情愿的叫法，而标准的叫法是什么呢？呵呵，没错,是xHTM1.+CSS,不理解吧，我来细细给你说，假如卜.面的你能理解，保证面试的时候会有很大的帮助，同时也可以让你后面的学习更轻松。为什么

3、国人将这种页面布局的方法叫做DIV+CSS?因为过去布局页面基本上都是用TabIe布局，也可以说是TabIe+CSS,而现在布局页面呢，用DIV,所以叫DIVCSS,听起来也挺合理，认为这样布局出来的页面也就是标准页面，甚至有些人走/个极端，看到其他网站用到TabI0,就会讪笑页面做的不够标准，好像用不用TabIe成为了页面是否标准的一个标尺。现在我可以告知大家，凡是有着这种行为的，都学得不咋样，很皮毛！用Table页面就不标准了?!纯粹无稽之谈，那什么才是标准页面呢？先看一个专业概念，WEB标准，然后我会问三个问题，你来回答：REB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组

4、成：结构(Structure)表现(Presentation)和行为(Behavior)对应的标准也分三方面:结构化标准语言主要包括XUTM1.和XM1.,表现标准语言主要包括CSS,行为标准主要包括对象模型(如W3CDOM)、ECMASCriPl等。这些标准大部分由W3C起草和发布，也有些是其他标准组织制订的标准，比如ECMA(EuropeanComputerManufacturersAssociation)的ECMASCriPt标准。看明白没有？问题来门先不要看答案，从上面的概念中找出问题一：KEB标准有几部分组成？问题二：结构化标准语言是什么？问题三：表现标准语言是什么？答案一：三部分，

5、结构、表现、行为答案二：XHTM1.和XM1.答案三：CSS看完上面三个问题，哪什么是标准页面呢？呵呵,说白了就是依据WEB标准制作的页面,从其次个问题和第三个问题中,我们又可以说，用XHTM1.和CSS制作的页面就是标准页面，也就是说XHTM1.+CSS制作的页面就是标准页面。怎么样，理解了吧为什么不说XM1.心呢？很简洁，因为W1.过手困难.且当前的大部分阅读器都不完全支持XM1.所以就不用它来布局页面喽！既然XHTN1.+CSS制作页面就是标准页面了，乂因为XHTy1.中不只有DIV标签,还有Span、p、a、ukli,dl.dt.dd.,即使我不用DIV,用其他标签(比如:U1.Ii)

6、制作出来的页面也是标准页面！所以说用D1V+CSS来制作标准页面这句话就很狭隘喽!假如满屏全部都是DIV那也鸵不上标准页面，曾经由一个挚友告知我，说他的页面全部用的DIV,每个模块，每个功能区域，就连条线都是纯DIV实现，并JI相当骄傲的告知我，没有人比他做的页面更标准的广，他不但对WEB标准页面的理解有差错还犯/一个很大的错误，XHTM1.中的每一个标签都有其作用,各司其职,各守其责,要用的恰到好处，这才算是标准页面，DlV不是万能的哟！说到这里大家应当明白，这种ITebNO时代的布局页面的方法，叫DIVgS是不精确的，应当叫XHni1.Kss凡是看到这节的同学们，以后尽可能说XHTmySS

7、,不要再说DN+CSS喽，假如非要说，也要加上一句说明哟，比如面试官：你对D1V+CSS了解么？应聘者:D1V+CSS精说的说应当叫XHTM1.CSS,我对这种页面布局方法特别了解！假如你是面试官,你对这个应聘者，感觉如何呢？呵呵呵运用table布局网页不明智2010-01-0115:31:19来源:CSS学习网网页制作呢bjx文章简介：运用Table布局页面为什么是不明智的？运用Table布局页面为什么是不明智的？大家看到标题，不要误会认为在页面中不能运用Table,而是可以运用Table,但是尽量不要用TabIe去布局页面，为什么这么说呢.因为运用Table布局页面会使页面失去敬捷性，怎么

8、个敏疣法呢，比如今日你好不简洁做出来的页面，其次大老板说我不喜爱登录模块放到右边，还是放到左边，通知板块放到右侧去，页面风格最好一个月换一种，假如遇到这种老板，提出这种要求，并且你的页面是用TabIe布局的，那么你会崩溃的，工作量那是大大滴！，假如不信任的话，你们自己可以找个页面,用TabIe布局出来，然后变换板块和风格，你就会体会到TabI。布局的不敏捷性，这是为什么呢，因为Table的诞生是为存储数据用的,功能和EXeCel差不多，不是用来布局用的,只不过后来大家发觉用Table可以把想放的页面元素，比如图片，放到任何自己想放的地方，口做出来的页面可以兼容多种阅读器，于是Table就担当起

9、了布局页面的重担，这一做就是好几年直到Web2.0时代的到来，Table才从布局页面的工作中渐渐解脱，用心的去存储数据二”既然TabIe是为存储数据诞生的，那谁的诞生是为了页面布局嗯？答案就是:DIV.DIY就是为布局页面而诞生的，只不过始终不被人认同,绥由就是DlV去布局页面须要CSS的协作，运用比较繁琐，还不如TUbIe拖拖拽拽页面就布局OK了，感觉还不如TabIe便利，从而DlV被人们放置在一个无人问津的昏暗角落里，暗暗的等待若伯乐的出现,直到2003年美国加州SCOttDesign公司参与了在旧金山举办的有关网页排版和设计的一个研讨会上的演讲，使DIY看到了阳光，走出了阴箱说了那么多，

10、我们对比一下Table布局页面和DIV布局页面的优缺点运用表格进行页面布局会带来很多问题：* 把格式数据混入你的内容中.这使得文件的大小无谓地变大,而用户访问每个页面时都必需卜.栽一次这样的格式信息,带宽并非免费。* 这使得重新设计现有的站点和内容极为消耗劳力（且品货几* 这还使我们保持整个站点的视觉的一样性极难，花费也极高.* 基于表格的页面还大大降低了它对残疾人和用手机或PDA阅读者的亲和力，而运用CSS进行网页布局，它会：* 使你的页面我入得更快* 降低你的流信费用* 让你在修改设计时更有效率而代价更低* 梢助你的整个站点保持视觉的一样性* 让你的站点可以更好地被搜寻引擎找到* 使你的站

11、点对阅读者和阅读器更具亲和力* 在世界上越来越多人采纳Web标准时，它还能提高你的职场竞争实力(事实上也就是降低失业的风险)。网上有篇文章，转过来，文章着重介绍DIY三点优势,或许看完文章后，就像社区元老hefIyaway说的感觉作者比较痴迷TabIC,每篇文章都不行避开的带有个人色调，而转出来的目的，其实就是想给大家降降DlWCSS的温度，免得“走火入魔”，视D1V+CSS是为万能的，假如想学好CSS布局页面，就要从多个方面看它，好了，不多说了，下面是作者对CSS布局页面的三点优势及理解：1、内容和形式分别，网页前台只须要显示内容就行，形式上的美工交给CSS来处理。生成的HTM1.文件代码精

12、简，更小打开更快。2、改版网站更简洁简洁了，不用重新设计排版网页，甚至于不用动原网站的任何HTM1.和程序页面,只须要改动CSS文件就完成了全部改版。对于门户网站来说改版就像换件衣服一样简洁简洁.3、搜寻引擎更友好，排名更简洁靠前。第一点、内容和形式分别网页前台只须要显示内容就行，形式上的美工交给CSS来处理。生成的HTM1.文件代码精简,更小打开更快“这个是I)IV+CSS技术最显著的特点，也是CSS存在的根源。完全的演粮现在传统(table)网页设计的技术。全部现在用table制作的内容，都可以用CSS来解决掉,而且解决的更完备，更强大。不须要大家再表格套表格，让生成的网页文件大小更精简，

13、更小。Iable时代,一个页面表格达到10个以上是特别普遍的事情,但是现在用DIYKSS,一个table都可以不用，就完全达到之前的效果，这就干脆导致网页文件大小比运用table时削减50%-80更节约各位站长的馍盘空间，访问者打开网页时更快，而且用div+CSS时,不像以往运用table时，必需把全部table读取完了才显示页面内容,现在是可以读一个di，就显示一个效果,大家打开网页不用等.好处真是明显而强大。这个优点的确是显著的，凡是运用传统IUbIe建的网页，内容多的话，有时候达到30K左右都有可能,文件打了打开时，确定就有0.0几杪的延迟。运用DIV+CSS,你前台打开看到的全是干脆内

14、容，CSS文件都是导入链接的，是另一个文件，根本和HTM1.文件大小没关系，这种生成的HTM1.文件,一个也就IOK左右大小。其次点，改版网站更倚洁筒洁了不用重新设计排版网页，甚至丁不用动原网站的任何HTM1.和程序如面，只须要改动CSS文件就完成了全部改版。DIV+CSS对于门户网站来说改版就像换件衣服一样简洁简洁，改版时，不用改动全站HPl1.页面,只须要重新写CSS,再用新CSS圈盖以前的CSS就可以实现改版了。便利吧.第三点，搜寻引擎更友好，的确能够对SEO起到确定的帮助.通过DIVCSS对网页的布局，可以让些重要的链接、文字信息，优先让搜寻引擎蜘蛛爬取“这对T-SEO也有帮助.综上所

15、述，个人感觉D1V+CSS不能太迷信它的很好很强大，它作为制作网页，美化网页的个重要协助是很强大便利的。可以弥补table制作框架和表格时的很多不足和美工上的缺点，但是完全只用它来做，太费时贽劲，对于全国中小型网站长来说，真的不太适合。我个人觉得用Iable+D1V+CSS是最好的组合，也是最省时省力的方法。还须要再说明一下，本节拼得是Table布局页面和CSS布局页面的问题，探讨的是“布局页面”上用燧更好，并不是说在CsS布局的页面内不能用TabIe,真正厉害的人物是DIV.Table,CSS用得恰到好处，他们三个各做各的事情，DlV布局页面，Table存储数据，CsS给页面穿衣IUxHTM1.+CSS网页制作和搜寻引擎优化SEO的关系2010-01-0115:32:31来源CSS学习网网页制作WebjX文章简介:xHW1.+CSS及SEO的内容,后面章节会具体给大家介绍，这里就先说一些，让大家对XHTM1.+CSS及SEo有确定的相识，为后面制作页面打基础，终归我们做出来的页面还是要给搜寻引箓看的，所以不能不提提XHTM1.+CSS及SEO的关系。XHTmySS及SEO的内容，后面章节会具体给大家介绍，这里就先说些，让大家对xHTM1.+CSS及SEO有确定的相识，为后面制作页面打基础，终归我们做出来的页面还是要给搜寻弓I擎看的，所以不能不提提xliTM1.CS