两栏式纯div+css网页布局标准飞龙示范
feilong.org 修订于2009-09-02 05:48:51 256 次浏览一、根据核心内容需靠前的网页优化原则，两栏式纯div+css网页的html框架，也就是两栏式网页布局的通用div框架，应该为：
<div class="box">
<div class="main">核心内容</div>
<div class="side">side</div>
</div>
二、div与css之间的纽带是class标签，此标签调用样式表里对应标识符的属性值，从而控制div在浏览器里的显示效果。css样式属性值不同，网页显示效果就不同。
三、若把核心内容显示在左边，则网页head和body区的代码（通用div框架）如下：
<head>
<title>2栏标准布局:核心内容视觉在左边</title>
<style type="text/css">
<!--
.main {
float: left;
background-color: #660033;
color: #FFFFFF;
width: 760px;
}
.side {
float: right;
color: #FFFFFF;
background-color: #999999;
width: 200px;
}
.box {
width: 960px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
-->
</style>
</head>
<body>
<div class="box">
<div class="main">核心内容</div>
<div class="side">side</div>
</div>
</body>
四、若把核心内容显示在右边，则网页head和body区的代码如下：
<head>
<title>2栏标准布局:核心内容视觉在右边</title>
<style type="text/css">
<!--
.main {
float: right;
background-color: #660033;
color: #FFFFFF;
width: 760px;
}
.side {
float: left;
color: #FFFFFF;
background-color: #999999;
width: 200px;
}
.box {
width: 960px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
-->
</style>
</head>
<body>
<div class="box">
<div class="main">核心内容</div>
<div class="side">side</div>
</div>
</body>
五、以上样式部分应该采用外部css文件调用方式，即：
<link href="style.css" rel="stylesheet" type="text/css" />
更新网址：https://feilong.org/two-columns-divcss
最初发布：20090902 05:48:51 feilong.org 于广州
加入收藏夹，查看更方便。
所在分类： 网站开发
