1、DIV 与 TABLE 布局的使用下面的代码表示三行三列的布局模式，没有用 css 来控制这些 DIV。 源代码： TABLE 布局 网页头部 网页体部左边 网页体部中间 网页体部右边 网页底部 下面用 DIV 布局显示相同的效果，上面的效果先用 HTML 标记设置好，然后使用CSS 代码控制它，代码是用 DIV 加上样式属性布局。 源代码: DIV 布局 头部 网页体右边 网页体左边 网页体中间 网页底部 在代码中用 DIV 表示，有的 DIV 被样式属性修饰，如高度、背景等，上面的方式占用代码比较多，有一种更好的方法，可把重复的样式表示成样式文件，再链接进来，本节中所提出的样式链接(以后会
2、学到 )在下面章节会具体讲解，代码中演示了提出样式到一个样式文件中的设置。 在代码 中，从 中提取了 style 的内容，用 标记表示样式文件，对应的中被一个 ID 取代，代码中的 DIV 中的 style 内容被放入到对应的 ID里面，然后在链接即可，代码上的内容减少如下所示。 头部如何用 DIV 布局DIV 布局先利用层把内框架打好，再利用样式表控制。1、设置 DIV 选择符 首先在中定好网站的 DIV。对页面的头部、导航条、内容等各个模块用 DIV 列出并对选择符命名，并在样式表中列出。 源代码第 12 章如何用 DIV 布局html 如何用 DIV 布局 /*设置 css 选择符*/
3、#header #logo .ad468 #banner #content #newsad #news #bottom logo_网站图标486 像素广告 导航条 新闻右边的广告 新闻内容 网页底部 2、设置 CSS 修饰 DIV 效果用样式表修饰内容，样式表就是用 CSS 来控制 HTML 标记，使标记达到预定的效果。在 CSS 代码中，添加 css 样式来控制选择符关系的 DIV 标记，层表现出的效果即为CSS 的功能。 如何用 DIV 布局 html,bodymargin:0px;padding:0px; #header width:778px; margin:auto; backgro
4、und:red; border:1px solid #bbbbbb; #logo width:180px; height:100px; float:left; border:1px solid #ccc; .ad468 width:468px; height:60px; float:left; margin:20px 0px 0px 100px; border:1px solid #ccc; #banner width:778px; height:30px; margin:5px 0px; background:#0a0afe; text-align:center; border:1px solid #ccc; #content width:778px; margin:auot; background:#a1a1a1; border:1px solid #ccc; #bottom width:778px; margin:auto; background:#ff0; height:80px; margin-top:10px; border:1px solid #cccccc; logo-网站图标468 像素广告 导航条 新闻右边的广告 新闻内容 网页底部
