利用WEB标准创建两栏页面布局

| 网站首页 | 模板 | 资料 | 源码 | 工具 | 开发 | 设计 | 安全 | 项目 | 网络 | 图片 | 系统 | 数据库 | 博客 | 会员中心 | 小说 |

网络学院

学习资料

源码模版

您现在的位置：精品下载 >> 开发 >> 网站开发 >> CSS技术 >> 文章正文

用户登录

新用户注册

利用WEB标准创建两栏页面布局

【字体：小大】

利用WEB标准创建两栏页面布局

作者：佚名文章来源：不详点击数：更新时间：2007-12-18

使用 Web 标准进行页面设计，有一种信仰就是不使用表格兰进行基本的页面排版。

网页常见的两栏布局，我们往往就是通过一个 1 行 2 列的表格来实现。例如：
<table border="0" width="760">
    <tr>
        <td style="width: 30%;">左侧栏</td>
        <td style="width: 70%;">右侧栏</td>
    </tr>
</table>
使用 div 对象的 float 属性，完全也可以实现，页面代码如下：
<div id="Container">
    <div id="SideColumn">左侧栏</div>
    <div id="MainColumn">右侧栏</div>
</div>
配套的 CSS 代码是：
#Container {
    width: 760px;
}
#SideColumn {
    width: 200px;
    float: left;
    border: 1px solid #00F;
}
#MainColumn {
    width: 550px;
    float: right;
    border: 1px solid #000;
}

文章录入：chqnet 责任编辑：chqnet

上一篇文章： CSS巧用expression来区分只读文本框

下一篇文章： Internet Explorer 6 中的css增强之我见

【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

最新热点		最新推荐		相关文章
				Dreamweaver CS3 Beta界面功利用CSS创造多彩文字 WEB标准教程：Div+CSS布局入 Web开发中的Drag&Drop完全手利用CSS改善网站可访问性利用条件注释制作下拉菜单 CSS样式表一席谈之利用CSS改 WEB标准：Div布局与Table布局 Web开发中对CSS类及id的规范 WEB开发框架JACKER探讨(一)

　网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）