专注优质Wordpress企业网站搭建与优化

Htmldog权威CSS入门指点十八章（十四）- CSS网页布局



Htmldog权威CSS入门指点十八章（十四）- CSS网页布局- 西米CC(http://ximicc.com)使用CSS布局非常简单，假如你习惯使用tables布局，可能开始时有点困难，但其实很轻易，事实上只是观念的不同。你需要把网页的每个部分看成独立的块，你可以绝对或相对定位块。

Positioning 定位

positon属性可以指定元素为absolute,relative,static或是fixed。static是元素默认属性，按 HTML出现的先后顺序。relative比较像static，但元素可以使用top,right,bottom和left设定初始属性。absolute把元素从HTML里面拉出，一切由它自己决定，在这里，绝对定位元素可以使用top,right,bottom,left定位在任何地方。

fixed行为像absolute，但它绝对定位的元素参照浏览器窗口与网页没有关系。所以，理论上，fixed元素可以固定在屏幕上当页面滚动时。为什么说是理论上的？因为IE7以下的浏览器不支持。

使用绝对定位布局

可以使用绝对定位创建传统的两列布局，如下：

  1. <div id="navigation">
  2.   <ul>
  3.     <li><a href="this.html">This</a></li>
  4.     <li><a href="that.html">That</a></li>
  5.     <li><a href="theOther.html">The Other</a></li>
  6.   </ul>
  7. </div>
  8.  
  9. <div id="content">
  10.   <h1>Ra ra banjo banjo</h1>
  11.   <p>Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.</p>
  12.   <p>(Ra ra banjo banjo)</p>
  13. </div>

上面加上CSS：

  1. #navigation {
  2. position: absolute;
  3. top: 0;
  4. left: 0;
  5.  
  6. width: 10em;
  7. }
  8. #content {
  9. margin-left: 10em;
  10. }

上面导航条设定在左边，宽度是10em。因为导航条是绝对定位，所以流动的页面上什么也不动，需要设定内容的左边margin等于导航条的宽度。

真是简单。你没有限制这两列的距离，使用聪明的布局，你可以随心所欲安排许多块。假如你想添加第三列，比如：

  1. #navigation {
  2. position: absolute;
  3. top: 0;
  4. left: 0;
  5. width: 10em;
  6. }
  7. #navigation2 {
  8. position: absolute;
  9. top: 0;
  10. right: 0;
  11. width: 10em;
  12. }
  13. #content {
  14. margin: 0 10em; /* setting top and bottom margin to 0 and right and left margin to 10em */
  15. }

最后阶段去绝对定位元素，因为它们独立存在，无法正确了解它们哪里结束。假如你使用上面的例子，所有的页面有小的导航条和大的内容区域到可以，但是，非凡是宽度和大小使用相对值，你必须经常放弃定位的希望，比如位于元素最下面的底部布局。假如你想定位底部，采用浮动模式比绝对定位好。

Floating 浮动

浮动元素可以在一条线上移动。浮动一般使用在定位页面里的小型元素，但也可使用在大块里，比如导航。上面的HTML例子使用下面CSS：

  1. #navigation {
  2. float: left;
  3. width: 10em;
  4. }
  5. #navigation2 {
  6. float: right;
  7. width: 10em;
  8. }
  9. #content {
  10. margin: 0 10em;
  11. }

假如你不希望接下来的元素包围浮动对象，可以使用 clear属性。clear:left清除浮动在左边的元素，clear:right清除浮动在右边的元素，clear:both清除所有。假如你想添加底部footer，可以像下面：

  1. #footer {
  2. clear: both;
  3. }

footer将在所有列下面，不管它们的长度如何。

这篇介绍了定位和浮动的基本情况，强调页面的大块，但记住，上面方法可以运用到块里面的任何元素。通过组合使用position,floating,margins,padding和border，你可以表现出任何网页设计，table布局能做的CSS没有什么不能做。

使用表格布局的理由就是考虑古老的浏览器。CSS的优势在于拥有很高的可用性，而且体积上只有使用table布局的部分大小。

[ 以下内容您也可能感兴趣 ]

Categories: DIV+CSS重构标准

Tags: ,

Discussion

  1. 麦宝  八月 29, 2010

    您好，我用了为ZBlog做的Maxthon_Final主题，这个主题是左侧栏，我想改成右侧栏，请问该如何做?谢谢了

    (reply)
Subscribe to Comments

Add a Comment