DIVCSS标准化网页布局

会计学1DIVCSS标准化网页布局DIVDIV全称division意为“区分”使用DIV的方法跟使用其他tag的方法一样。如果单独使用DIV而不加任何CSS，那么它在网页中的效果和使用<P></P>是一样的。DIV本身就是容器性质的，你不但可以内嵌table还可以内嵌文本和其它的HTML代码注意：<div>标签可以用来组合其它的HTML元素，但不能嵌套在段落元素中，例如，<p>aa<div>bb</div>cc</p>的结果是不确定的。第1页/共20页什么是DIV+CSSDIV+CSS布局

这个布局中，div承载的是内容，而css承载的是样式。内容和样式的分离对于所见即所得的传统TABLE编辑方式确实是一个很大的冲击，尤其是设计人员很难接受设计一个他们不能立即看到的样式。不过随着学习，会发现div+css的好处实在是太明显了

第2页/共20页SPANSPAN的用法与DIV一样<div>这是DIV标记</div><span>这是SPAN标记</span>DIV与SPAN的区别DIV是块元素，使用会产生分行SPAN是一个行内元素，使用不会产生分行第3页/共20页盒子模型每个HTML元素都可以看作一个装了东西的盒子，盒子具有宽度（width）和高度（height），盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。第4页/共20页

第5页/共20页边缘margin

(margin-top、margin-right、margin-bottom、margin-left)：外边距顺序依次是上、右、下、左例如，{margin:2em4em}、{margin-left:-200px}padding

(padding-top、padding-right、padding-bottom、padding-left)：内边距指文本边框与文本之间的距离，顺序依次是上、右、下、左第6页/共20页float:left;clear:left;width:600px;height:400px;padding-top:1px;padding-right:2px;padding-bottom:3px;padding-left:4px;margin:5px;第7页/共20页第8页/共20页布局display设置值：block、inline、list-item、nonefloat设置值：left、right、noneclear设置值：left、right、none、bothvisibility设置值：inherit、visible、hiddenclip设置值：clip:rect(top、right、bottom、left)overflow设置值：visible、hidden、scroll、auto第9页/共20页位置位置属性就是指定元素的位置，它是CSS-P（CascadingStyleSheetsPositioning）中的内容，CSS-P是CSS的一个扩展，它可用来控制任何网页元素在游览器文档窗口中的位置。position设置值：absolute、relative、staticleftrighttopbottomz-index第10页/共20页position:absolute;visibility:visible;z-index:5;overflow:scroll;clip:rect(1px2px3px4px);left:auto;top:5px;right:5px;bottom:5px;height:400px;width:600px;第11页/共20页布局中的主要样式fontline-heightcolormarginpaddingbordertext-alignbackgroundwidth:heightfloat:cleardisplay第12页/共20页布局练习一列固定宽度一列宽度自适应一列固定宽度居中二列固定宽度二列宽度自适应两列右列宽度自适应两列固定宽度居中三列浮动中间列宽度自适应高度自适应第13页/共20页CSS排版-DIV分块第14页/共20页设计DIV块位置第15页/共20页DIV+CSS标准的优点结构化HTML，提高易用性结构清晰，表现和内容相分离。更好的控制页面布局。结构的重构性强，缩短改版时间。大大缩减页面代码，提高页面浏览速度，缩减带宽成本结构清晰，容易被搜索引擎搜索到第16页/共20页这个应用最经典的例子就是各大blog程序了。都是采用div+css构架。内容和样式的分离导致我们在重构页面布局或者更换皮肤的时候，只用针对每一个div