信氏宗亲网:http://www.xinhome.com.cn/
游客,
免费注册
用户登陆
帮助中心
收藏本站
网站首页
宗亲动态
信氏文化
信氏闻人
信氏源流
宗支世系
史料研究
信氏艺文
宗亲风采
家族影视
宗亲问答
新牒旧谱
宗亲博客
宗亲论坛
首页
→
宗亲动态
→
网站动态
→ 动态浏览:CSS教程 14、CSS网页布局Page Layout [翻译Htmldog]
今天是:
动态导航
图片动态
焦点动态
推荐动态
热门动态
网站动态
姓氏动态
信氏商务
姓氏趣谈
台海局势
热门动态
周易
洪洞大槐树寻根简介
中华民族姓氏起源
亲爱的汶川地震中遇难..
秦皇岛信氏实业有限公..
关于北京奥运会服饰礼..
灾民:子弟兵冒着生命..
信氏鱼村
河南嵩山少林寺武僧团..
四川地震局:汶川地震..
推荐动态
亲爱的汶川地震中遇难..
央行:地震灾区现金供..
保监会:救灾一线人员..
中粮集团:成都地区食..
河南嵩山少林寺武僧团..
重灾区北川县已向外转..
四川副省长:正在修通..
三千海军陆战队官兵抵..
都江堰到虹口公路上三..
广东侨界纷纷捐款捐物
CSS教程 14、CSS网页布局Page Layout [翻译Htmldog]
CSS教程 14、CSS网页布局Page Layout [翻译Htmldog]
作者:佚名 来源:不详 点击数: 更新时间:2008-02-28【字体:
小
大
】
收藏到
使用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以下的浏览器不支持。
使用绝对定位布局
可以使用绝对定位创建传统的两列布局,如下:
Example Source Code
[www.52css.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:
Example Source Code
[www.52css.com]
#navigation {
position: absolute;
top: 0;
left: 0;
width: 10em;
}
#content {
margin-left: 10em;
}
上面导航条设定在左边,宽度是10em。因为导航条是绝对定位,所以流动的页面上什么也不动,需要设定内容的左边margin等于导航条的宽度。
真是简单。你没有限制这两列的距离,使用聪明的布局,你可以随心所欲安排许多块。如果你想添加第三列,比如:
Example Source Code
[www.52css.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:
Example Source Code
[www.52css.com]
#navigation {
float: left;
width: 10em;
}
#navigation2 {
float: right;
width: 10em;
}
#content {
margin: 0 10em;
}
如果你不希望接下来的元素包围浮动对象,可以使用clear属性。clear:left清除浮动在左边的元素,clear:right清除浮动在右边的元素,clear:both清除所有。如果你想添加底部footer,可以像下面:
Example Source Code
[www.52css.com]
#footer {
clear: both;
}
footer将在所有列下面,不管它们的长度如何。
这篇介绍了定位和浮动的基本情况,强调页面的大块,但记住,上面方法可以运用到块里面的任何元素。通过组合使用position,floating,margins,padding和border,你可以表现出任何网页设计,table布局能做的CSS没有什么不能做。
使用表格布局的理由就是考虑古老的浏览器。CSS的优势在于拥有很高的可用性,而且体积上只有使用table布局的部分大小。
发布人:
信氏宗亲网
● 上一篇动态:
CSS教程 15、CSS的At-Rules@规则 [翻译Htmldog]
● 下一篇动态:
CSS教程 13、CSS的display属性 [翻译Htmldog]
【
告诉好友
】【
打印本页
】【
关闭窗口
】
相关动态
动态评论
关于我们
网站留言
友情链接
与我在线
管理中心
信氏宗亲网
http://www.xinhome.com.cn/
站长:信杰
粤ICP备06072291号
Copyright © 2007-2008 XinHome.com.cn All Rights Reserved.