论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

{CSS}CSS教程14、CSS网页布局PageLayout[翻译Htmldog]

文章类别:div+css布局 | 发表日期:2008-9-26 11:33:37

  
  使用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以下的浏览器不支持。

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

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<div id=\"navigation\">
<ul>
<li><a href=\"this.html\">This</a></li>

<li><a href=\"that.html\">That</a></li>
<li><a href=\"theOther.html\">The Other</a></li>
</ul>

</div>
<div id=\"content\">
<h1>Ra ra banjo banjo</h1>
<p>Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.</p>
<p>(Ra ra banjo banjo)</p>

</div>

  上面加上CSS:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
#navigation {
position: absolute;
top: 0;
left: 0;

width: 10em;
}
#content {
margin-left: 10em;
}

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

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

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
#navigation {
position: absolute;
top: 0;
left: 0;
width: 10em;
}
#navigation2 {
position: absolute;
top: 0;
right: 0;
width: 10em;
}
#content {
margin: 0 10em; /* setting top and bottom margin to 0 and right and left margin to 10em */
}

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

Floating 浮动

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

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
#navigation {
float: left;
width: 10em;
}
#navigation2 {
float: right;
width: 10em;
}
#content {
margin: 0 10em;
}

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

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
#footer {
clear: both;
}

  footer将在所有列下面,不管它们的长度如何。
  这篇介绍了定位和浮动的基本情况,强调页面的大块,但记住,上面方法可以运用到块里面的任何元素。通过组合使用position,floating,margins,padding和border,你可以表现出任何网页设计,table布局能做的CSS没有什么不能做。
  使用表格布局的理由就是考虑古老的浏览器。CSS的优势在于拥有很高的可用性,而且体积上只有使用table布局的部分大小。
  
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058