DIV与T ABLE布局的使用
下面的代码表示三行三列的布局模式，没有用css来控制这些DIV。
•源代码：
•<html>
•<head>
•<title>T ABLE布局</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>
•<title>DIV布局</title>
•<!-表格布局-->
•<diV >头部</div>
•<div id="content">
•<div >网页体右边</div>
•<div >网页体左边</div>
•<div >网页体中间</div>
•</div>
•<div >网页底部</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>
•<body>
•<div id="header">
•<div id="logo">logo__网站图标</div><div class="ad468">486像素广告</div>
•</div>
•<div id="banner">导航条</div>
•<div id="content">
•<div id="newsad"> 新闻右边的广告</div>
•<div id="news"> 新闻内容</div>
•</div>
•<div id="bottom">网页底部</div>
•</body>
•</html>
css实现三列布局
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;
•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; •}
•</style>
•</head>
•<body>
•<div id="header">
•<div id="logo">logo--网站图标</div><div class="ad468">468像素广告</div> •</div>
•<div id="banner">导航条</div>
•<div id="content">
•<div id="newsad">新闻右边的广告</div>
•<div id="news">新闻内容</div>
•</div>
•<div id="bottom">网页底部</div>
•</body>
•</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。