5.4DIV+CSS标准化网页布局.ppt

《5.4DIV+CSS标准化网页布局.ppt》由会员分享，可在线阅读，更多相关《5.4DIV+CSS标准化网页布局.ppt（19页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、DIV+CSS标准化网页布局概述n业界对DIV+CSS的标准化设计关注nDIV+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准 n传统的网页布局是使用网格DIVnDIV 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样。n如果单独使用 DIV 而不加任何 CSS，那么它在网页中的效果和使用 是一样的。nDIV本身就是容器性质容器性质的，你不但可以内嵌table还可以内嵌文本和其它的HTML代码n注意：注意：标签可以用来组合其它的HTML元素，但不能嵌套在段落元素中，例如，aabbcc的结果是不确定的。什么是DIV+CSSnDIV+CSS布局q

2、这个布局中，div承载的是内容承载的是内容，而css承载的是样承载的是样式式。q内容和样式的分离对于所见即所得的传统TABLE编辑方式确实是一个很大的冲击，尤其是设计人员很难接受设计一个他们不能立即看到的样式。不过随着学习，会发现div+css的好处实在是太明显了SPANnSPAN的用法与DIV一样q这是DIV标记q这是SPAN标记nDIV与SPAN的区别qDIV是块元素，使用会产生分行qSPAN是一个行内元素，使用不会产生分行盒子模型n每个HTML元素都可以看作一个装了东西的盒子，盒子具有宽度（width）和高度（height），盒子里面的内容到盒子的边框之间的距离即填充（padding），

3、盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。边缘nmargin(margin-top、margin-right、margin-bottom、margin-left)：外边距顺序依次是上、右、下、左q例如，margin:2em 4em、margin-left:200pxnpadding(padding-top、padding-right、padding-bottom、padding-left)：内边距指文本边框与文本之间的距离，顺序依次是上、右、下、左float:left;clear:left;width:600px;height:400px;paddi

4、ng-top:1px;padding-right:2px;padding-bottom:3px;padding-left:4px;margin:5px;布局ndisplayq设置值：block、inline、list-item、nonenfloatq设置值：left、right、nonenclearq设置值：left、right、none、bothnvisibilityq设置值：inherit、visible、hiddennclipq设置值：clip:rect(top、right、bottom、left)noverflowq设置值：visible、hidden、scroll、auto位置n位置

5、属性就是指定元素的位置，它是CSS-P（Cascading Style Sheets Positioning）中的内容，CSS-P是CSS的一个扩展，它可用来控制任何网页元素在游览器文档窗口中的位置。qpositionn设置值：absolute（绝对）、relative（对象不可层叠）、static（无特殊定位，对象遵循HTML定位规则）qleft rightqtop bottomqz-index位置ndiv position:relative;top:-3px;left:6px;ndiv position:absolute;bottom:1in;left:1in;right:1in;top:

6、1in;position:absolute;visibility:visible;z-index:5;overflow:scroll;clip:rect(1px 2px 3px 4px);left:auto;top:5px;right:5px;bottom:5px;height:400px;width:600px;布局中的主要样式nfontnline-heightncolornmarginnpaddingnborderntext-alignnbackgroundwidth:heightfloat:cleardisplay设计DIV块位置DIV+CSS标准的优点n结构化HTML，提高易用性n结构清晰，表现和内容相分离。n更好的控制页面布局。n结构的重构性强，缩短改版时间。n大大缩减页面代码，提高页面浏览速度，缩减带宽成本n结构清晰，容易被搜索引擎搜索到n这个应用最经典的例子就是各大blog程序了。都是采用div+css构架。内容和样式的分离导致我们在重构页面布局或者更换皮肤的时候，只用针对每一个div元素重新定义其具体位置、样式就行了。n而在原来的table基础上进行改版，几乎必须改变所有的内容注入渠道，实在是太过于麻烦.DIV+CSS应用