divcss标准次化网页布局.pptVIP

SPAN SPAN的用法与DIV一样 div这是DIV标记/div span这是SPAN标记/span DIV与SPAN的区别 DIV是块元素，使用会产生分行 SPAN是一个行内元素，使用不会产生分行 CSS排版-DIV分块 设计DIV块位置 DIV+CSS标准化网页布局 姓 名：马明 电 话Q QMAIL ：alex0018@126.com 概述 业界对DIV+CSS的标准化设计关注 DIV+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准 传统的网页布局是使用网格 DIV DIV 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样。 如果单独使用 DIV 而不加任何 CSS，那么它在网页中的效果和使用 P/P 是一样的。 DIV本身就是容器性质的，你不但可以内嵌table还可以内嵌文本和其它的HTML代码 注意：div标签可以用来组合其它的HTML元素，但不能嵌套在段落元素中，例如，paadivbb/divcc/p的结果是不确定的。 什么是DIV+CSS DIV+CSS布局这个布局中，div承载的是内容，而css承载的是样式。内容和样式的分离对于所见即所得的传统TABLE编辑方式确实是一个很大的冲击，尤其是设计人员很难接受设计一个他们不能立即看到的样式。不过随着学习，会发现div+css的好处实在是太明显了 盒子模型 每个HTML元素都可以看作一个装了东西的盒子，盒子具有宽度（width）和高度（height），盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。 边缘 margin(margin-top、margin-right、margin-bottom、margin-left)：外边距顺序依次是上、右、下、左 例如，{margin:2em 4em}、{margin-left:-200px} padding(padding-top、padding-right、padding-bottom、padding-left)：内边距指文本边框与文本之间的距离，顺序依次是上、右、下、左 float: left; clear: left; width: 600px; height: 400px; padding-top: 1px; padding-right: 2px; padding-bottom: 3px; padding-left: 4px; margin: 5px; 布局 display 设置值：block、inline、list-item、none float 设置值：left、right、none clear 设置值：left、right、none、both visibility 设置值：inherit、visible、hidden clip 设置值：clip:rect(top、right、bottom、left) overflow 设置值：visible、hidden、scroll、auto 位置 位置属性就是指定元素的位置，它是CSS-P（Cascading Style Sheets Positioning）中的内容，CSS-P是CSS的一个扩展，它可用来控制任何网页元素在游览器文档窗口中的位置。 position 设置值：absolute、relative、static left right top bottom z-index 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; 布局中的主要样式 font line-height color margin padding border text-align background width: height float: clear display 布局练习 一列固定宽度 一列宽度自适应 一列固定宽度居中 二列固定宽度 二列宽度自适应 两列右列宽度自适应 两列固定宽度居中 三列浮动中间列宽度自适应 高度自适应 DIV+CSS标准的优点 结构化HTML，提高易用性 结构清晰，表现和内容相分离。 更好的控制页面布局。 结构的重构性强，缩短改版时间。 大大缩减页面代码，提高页面浏览速度，缩减带宽成本 结构清晰，容易被有哪些信誉好的足球投注网站引擎有哪些信誉好的足球投注网站到 这个应用最经典的例子就是各大blo