使用 CSS 创建固定宽度的布局 << 变态下载

变态下载新版：http://down.biantai.net [admin 2008年1月16日]

	加入收藏
	设为首页
	联系站长

站长学院	网页制作	网络编程	图形图象	数据库类	服务器类	操作系统
站长供求	网站交易	域名交易	程序交易	服务器空间	下载反馈	软件报错
网站运营	搜索优化	建站心得	业界新闻	网站推广	下载反馈	普通留言
精品源码	ASP源码	PHP源码	.NET源码	JSP源码	建站素材	建站书籍
软件下载	站长软件	常用软件	系统辅助	电影游戏	站长工具	QQ素材站
字体下载	中文字体	英文字体	图形字体	其他字体	变态论坛	变态下载07版
桌面壁纸	系统壁纸	动植物类	游戏卡通	女性主题	高清壁纸	其他壁纸

您现在的位置：变态下载 >> 站长学院 >> 网页制作 >> 正文

使用 CSS 创建固定宽度的布局

【字体：小大】

使用 CSS 创建固定宽度的布局

作者：佚名文章来源：不详点击数：更新时间：2008-1-16

我最近的几篇专栏文章讨论了使用 XHTML 和 CSS 实现两列或三列页面布局的各个方面。到目前为止，所有例子都使用流式布局（也就是布局会自动扩展和适应浏览器窗口的宽度）。现在是时候考虑另外一种主要的页面布局方法了，这种布局方法是固定宽度布局。

很多 Web 构建人员倾向于使用固定宽度的布局进行页面设计，因为它们能生成精确且可预知的结果。这种方法与打印布局非常接近，对于设计人员和访问者来说都是一个很重要的舒适因素；另外，对于包含很多大图片和其它元素的内容，由于它们在流式布局中不能很好地表现，因此固定宽度布局也是处理这种内容的最好方法。

从table 到 div

近年来，设计人员都使用表（table）来创建固定宽度的布局。表的列和行是对设计人员的布局表格（grid）的一种可行的模拟，所以一点也不奇怪设计人员为什么采用 HTML 表来完成页面布局。

然而，基于表的布局有一个明显的问题。除了语义上不适合用表来进行布局之外，产生的代码也很混乱，难于阅读，甚至难于维护——尤其是在包含合并的表单元格（cell）和嵌套表时。

使用 div 进行页面布局效果要好得多。除了这是推荐使用的最佳方法之外，代码的装载速度会更快，也更易于处理。

表及其单元格的格式（formatting）属性被借用到固定宽度布局中，因为指定这些元素的尺寸相当简单。其实通过 div 可以做到同样的事情，只要确定 div 精确的维数并使用绝对和相对定位将这些 div 定位到页面上即可。

一个固定宽度的例子

图 A 展示了一个典型的固定宽度的布局，该布局由顶部的一个标题，一个三列内容的区域（主内容列，每侧有一个工具条），和页面底部的一个页脚所组成。所有元素的宽度都是固定的；在浏览器窗口发布变化时它们的尺寸都不会变化。

下面的 XHTML 标记生成图 A 所示的页面。（出于简单考虑，内容被截短。）

<body>
<div id="head">
    <h1>header</h1>
</div>
<div id="columns">
    <div id="side1">
        <h3>side1</h3>
        <ul>
            <li>Let me not to the marriage of true minds</li>
            <li>Admit impediments; love is not love</li>
            <li>Which alters when it alteration finds</li>
            <li>Or bends with the remover to remove</li>
            <li>Oh, no, it is an ever fixed mark</li>
        </ul>
    </div>
    <div id="content">
        <h2>main content</h2>
        <p>That looks on tempests ... his height be taken.</p>
        <p>But bears it out ... alteration finds.</p>
        <p>Whose worth's unknown, ... the remover to remove.</p>
    </div>
    <div id="side2">
        <h3>side2</h3>
        <ul>
            <li>Let me not to the marriage of true minds</li>
            <li>Admit impediments; love is not love</li>
            <li>Which alters when it alteration finds</li>
        </ul>
    </div>
</div>
<div id="foot">
    <h3>footer</h3>
    <p>Or bends with ... height be taken. </p>
</div>
</body>

下面是将页面设计为固定宽度布局的 CSS 代码。

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

上一篇文章：无延迟翻滚的图形/CSS混合风格的按钮

下一篇文章： HTML向XHTML转化

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

最新热点		最新推荐		相关文章
				Photoshop cs3合成教程：打造… Photoshop CS3合成教程：落日… Photoshop CS3调色教程：小凡… Adobe CS3精彩实例教程：PS结… Adobe Photoshop CS3新功能体… Adobe CS3安装实录… Photoshop CS3做美容：为美女… PhotoshopCS3做美容：教你修… Photoshop CS3给美女美容快速… Photoshop CS3新功能：黑白转…

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

变态下载 2006－2008 保留网站解释权利。感谢网友对本站的支持，我们一直在努力！

鲁ICP备06027999号站长：韩江波