飞龙博客

feilong.org 前端开发教程

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

飞龙修订于 20090902 05:48 36 次浏览

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

想学前端?长按二维码加我微信

想学前端?点击飞龙QQ

分类: 网站开发

新作:

旧文:

关闭

长按二维码 -> 识别图中二维码

打开微信,发现,扫一扫

支付完成后,点击下一步

感谢大力支持

然后你手机号:

最后点这,稍等即可