梦幻屋

梦幻屋 > 学院 >CSS > 正 文
软件搜索:

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

更新时间: 2007-5-24 10:21:00 来源: MSN秀收集  作者: 佚名 Add to ToLib.com...
  •   使用 DIV+CSS 创建固定宽度的布局......

居中样式的变化

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

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

图B

例如,图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 创建居中页面布局)”一文中有详细的解释。

上一页  [1] [2] [3] 

梦幻屋
  • 上一篇文章:

  • 此栏目下没有文章
  • 热点推荐

    女性推荐
    排行榜

    梦幻屋学院
    设为首页 | 加入收藏 | 联系站长 | 友情链接 | 版权申明 | 网站公告 |  
    Copyright© 2005-2006 梦幻工作室版权所有. All rights reserved.
    经营许可证编号:蜀ICP备07002423