首页产品库评测行情新闻|手机数码笔记本台式机DIY硬件数字家庭数码相机办公外设|软件下载游戏开发|社区

更多

数码相机
MP4
LCD
机箱
音箱

软件资讯设计 工具 系统 开发 安全 办公 陶吧 IT教育 Windows 7 | 下载中心天极下载中心诚征下载通路合作伙伴
天极网 > 软件频道 > 网页陶吧>使用 CSS 创建固定宽度的布局

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

2006-05-20 17:50作者:龙犊出处:天极网责任编辑:龙犊

居中样式的变化

在固定宽度页面布局中最常见且主要的变化可能是固定宽度的内容块漂在浏览器窗口的中间,而不是粘附于浏览器窗口的左边。你可以很容易地实现这一效果,方法是在其余标记周围(也就是 body 标签内)添加一个包装器(wrapper)div,并创建一个 CSS 样式来居中那个 div。

例如,图 B 是在图 A 的基础上添加了一个标签(<div id="wrapper">)和一个相应的 CSS 样式后的结果。下面是新添加的 CSS 样式的代码:

以下是引用片段:
div#wrapper {
    position:relative;
    margin-left:auto;
    margin-right:auto;
    top: 20px;
    width:750px;
    background-color: #CCCCCC;
}

这种方法之所以能用,是因为所有的布局 div 都是相对于它们的父元素相对定位的。在图 A 中,标题、内容列和页脚所在 div 的父元素是 body 标签,但是在图 B 中,它们的父元素是 wrapper div。这种居中方法在“Creating a centered page layout with CSS(使用 CSS 创建居中页面布局)”一文中有详细的解释。

本文作者:Michael Meadhra 在Web 发展的最初阶段就在这一领域从事开发。他参与编著的书已累积几十本,包括由Osborne/McGraw-Hill出版的《How to Do Everything with Dreamweaver MX 2004》。

热卖推荐: 手机 诺基亚 MP5 电脑包 双卡双待 手机链 U盘 笔记本电脑

关注此文的读者还看过:

返回网页陶吧首页

共5页。 上一页12345

软件频道最新更新

热点推荐

IT嘉年华

编辑推荐

软件下载

热门
推荐

网友关注

软件
资料
游戏

装机推荐

文章排行

本周
本月
最新更新
天极服务|关于我们|About us|网站律师|RSS订阅|友情合作|加入我们|天极动态|网站地图|意见反馈|MSN/QQ上看天极
Copyright (C) 1999-2012 Yesky.com, All Rights Reserved 版权所有 天极网络