DIV与TABLE布局的使用.docVIP

DIV与TABLE布局的使用 下面的代码表示三行三列的布局模式，没有用css来控制这些DIV。 源代码： html head titleTABLE布局/title /head body !-表格布局-- table border=1 width=100% tr height=100 bgcolor=blue td colspan=3网页头部/td /tr tr height=250 td bgcolor=orange网页体部左边/td td bgcolor=yellow网页体部中间/td td bgcolor=green网页体部右边/td /tr tr height=80 bgcolor=gray td colspan=3网页底部/td /tr /table /body /html 下面用DIV布局显示相同的效果，上面的效果先用HTML标记设置好，然后使用CSS代码控制它，代码是用DIV加上样式属性布局。 源代码: html head titleDIV布局/title /head !-表格布局-- diV style=background:blue;height:100px;头部/div div id=content div style=width:33％; height:250px;float:right;background:green;网页体右边/div div style=width:33％; height:250px;float:left;background:orange;网页体左边/div div style=width:33％; height:250px;float:left;background:yellow;网页体中间/div /div div style=height:80px;background:gray;网页底部/div /body /html 在代码中用DIV表示，有的DIV被样式属性修饰，如高度、背景等，上面的方式占用代码比较多，有一种更好的方法，可把重复的样式表示成样式文件，再链接进来，本节中所提出的样式链接(以后会学到)在下面章节会具体讲解，代码中演示了提出样式到一个样式文件中的设置。 在代码 中，从 div中提取了style的内容，用style／style标记表示样式文件，对应的div中被一个ID取代，代码中的DIV中的style内容被放入到对应的ID里面，然后在div id=//／div链接即可，代码body／body上的内容减少如下所示。 div id=header头部/div 如何用DIV布局 DIV布局先利用层把内框架打好，再利用样式表控制。 1、设置DIV选择符 首先在body／body中定好网站的DIV。对页面的头部、导航条、内容等各个模块用DIV列出并对选择符命名，并在样式表中列出。 源代码\第12章\如何用DIV布局．html html head title如何用DIV布局/title style type=text/css /*设置css选择符*/ #header{} #logo{} .ad468{} #banner{} #content{} #newsad{} #news{} #bottom{} /style /head body div id=header div id=logologo__网站图标/divdiv class=ad468486像素广告/div /div div id=banner导航条/div div id=content div id=newsad 新闻右边的广告/div div id=news 新闻内容/div /div div id=bottom网页底部/div /body /html 2、设置CSS修饰DIV效果 用样式表修饰内容，样式表就是用CSS来控制HTML标记，使标记达到预定的效果。在CSS代码中，添加css样式来控制选择符关系的DIV标记，层表现出的效果即为CSS的功能。 html head title如何用DIV布局/title style type=text/css html,body{margin:0px;padding:0px;} #header { width:778px; margin:auto; background:red; border:1px solid #bbbbbb; } #logo { width:180px; height:100px; float:left; border:1px solid #ccc; } .ad468 { width:468px; he