文档详情

DIV与TABLE布局的使用.doc

发布:2017-06-05约2.89千字共5页下载文档
文本预览下载声明
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
显示全部
相似文档