飞龙博客

妙法莲华经

两栏式纯div+css网页布局标准飞龙示范

feilong.org 修订于2009-09-02 05:48:51

一、根据核心内容需靠前的网页优化原则,两栏式纯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 于广州

加入收藏夹,查看更方便。

所在分类: 网站开发

新作:

旧文: