网页标准学习---详细讲解CSS网页页面布局

时间:2008-10-06 10:48:37  来源:第二电脑网上收集  作者:

  第二电脑网导读:>定位定位属性position用于定义一个元素是否absolute(绝对),relative(相对),static(静态),或者fixed(固定)。static值是元素的默认值,它会按照普通顺序生成,就如它们在HTML的出现一般。relative很像static,但可用top、right、bottom和left属性来偏移原始位置。absolute使元素从HTML普通流中分离出来,并把它送到一个完全...
  正文:

Css 来布局很容易。如果你已经习惯用表格布局的话,起先会感觉比较困难。其实不难,只不过动机不同,并且在实践中更有意义。

你可以把这一页面的各个部分当作独立的版块来看待,无论你选择哪一块。你可以绝对或相对地用彼块取代此块。

定位

定位属性position用于定义一个元素是否absolute(绝对),relative(相对),static(静态),或者fixed(固定)。

static值是元素的默认值,它会按照普通顺序生成,就如它们在HTML的出现一般。

relative很像static,但可用top、right、bottom和left属性来偏移原始位置。

absolute使元素从HTML普通流中分离出来,并把它送到一个完全属于自己的定位世界。在这个稍微疯狂的世界,这个绝对的元素可以放置到任何地方,只要设置了top、right、bottom和left的值。

fixed的行为也很像absolute,但参考于浏览器窗口相对于页面而放置绝对的元素,所以,理论上,当页面滚动的时候,固定元素完全保持在浏览器视区中。为什么说理论上的?不为别的,在Mozilla和Opera中工作得很好,但IE不会。

用绝对定位布局

你可以用绝对定位来创建一个传统两列布局,只要在HTML中使用如下面的类似规则:

<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. Ra ra banjo banjo.</p> 
<p>(Ra ra banjo banjo)</p> 
</div>
 
并且应用如下的CSS:

#navigation { 
position: absolute; top: 0; left: 0; width: 10em; 

#content { 
margin-left: 10em; 


"网页标准学习---详细讲解CSS网页页面布局"由第二电脑网原创提供,转载请注明:http://www.002pc.com/master/College/Page/css/2008-10-06/2023.html


关键字:

关于《网页标准学习---详细讲解CSS网页页面布局》文章的评论

站内搜索: 高级搜索

热门搜索: Windows style 系统 tr IP QQ CPU 安装 function 注册 if td