网页设计(div css).ppt

DIV+CSS 布局 Div+Css 特点? DIV+CSS 是网站标准(或称“ WEB 标准”) 中常用的术语之一,通常为了说明与 HTML 网页设计语言中的表格( table )定位方式的区别,因为 XHTML 网站设计标准中,不再使用表格定位技术,而是采用 DIV+CSS 的方式实现各种定位 Div+CSS 布局的优势?代码精简?表格的嵌套问题?速度问题?方便搜索引擎的搜录?重构页面的方便性盒状编程模型? DIV+CSS 通过由 CSS 定义的大小不一的盒子和盒子嵌套来编排网页?内容(content) 、填充(padding) 、边框(border) 、边界(margin) , CSS 盒子模式都具备这些属性?一共分为四个区块,每个区块的框架是一样的,这个框架就是用 CSS 写出来的,样式写一次,就可以被无数次调用了(用 class 调用,而不是 ID) ,只要改变其中的文字内容就可以生成风格统一的众多板块了, 演示的相关文件<div class="mainBox"> <h3> 前言</h3> <p> 正文内容</p> </div> <div class="mainBox"> <h3>CSS 盒子模式</h3> <p> 正文内容 </p> </div> <div class="mainBox"> <h3> 转变思想</h3> <p> 正文内容 </p> </div> <div class="mainBox"> <h3> 熟悉步骤</h3> <p> 正文内容 </p> </div> 演示文件 DIV+CSS 设计思路 div 来定义语义结构; CSS 来美化网页,如加入背景、线条边框、对齐属性等; CSS 定义的盒子内加上内容, 如文字、图片等设计效果图分析页面布局形式设置主要 4个盒子<div id="header"></div> <div id="nav"></div> <div id="content"></div> <div id="footer"></div>