蝙蝠岛资源网 Design By www.hbtsch.com
如果你还是不能太明白这句话,我们就做个实例,把我们第5节页面的头部blog区域用定位(position)来布局一下
HTML代码和原来的没有区别:
复制代码代码如下:
<div id="Logo">
<a href="#" id="logoLink"></a>
</div>
CSS代码就有变化了,咱先看看原来的CSS代码
复制代码代码如下:
#Logo{
height:80px;
}
#logoLink{
display:block;
width:173px;
height:46px;
background:url(../Images/logo.gif) no-repeat;
float:left;
margin-top:20px;
}
原来是用“浮动+外边距”布局的,将#logoLink定位在距离顶部20像素,左侧0像素的地方;
如果用position的方法,CSS就应该这么写,首先给#logo加上“position:relative;”,给#logoLink加上“position:absolute;”,然后让#logoLink距离上面20像素,左侧0像素,具体代码如下:
复制代码代码如下:
#Logo{
height:80px;
position:relative;/*相对定位*/
}
#logoLink{
display:block;
width:173px;
height:46px;
background:url(../Images/logo.gif) no-repeat;
position:absolute;
top:20px;
left:0;
}
怎么样效果和原来的一样吧,就是这么简单.
什么?CSS代码多了?的确,由原来的两句话,变成现在的四句,但是有没有发现,就靠Position我们就可以将Logo随意的定位于任何一个地方!这就是它的灵活的地方!如果在页面顶部在有一行“加入收藏 | 设为首页 | RSS订阅”如下图,你是不是也可以很方便的将它们定位于右上角呢~
但是定位(position)有一个缺点,不会自适应内部元素的高度,所以平时我们在布局页面的时候,如果某个或者某些模块高度永远不变,就可以用定位,但是KwooJan建议大家布局页面的时候,还是要以Float为主,Position为辅!这样你才能做出高质量的页面。
=========================================================================
最后,请大家记住我这句话:“布局页面,Float为主,Position为辅!”
=========================================================================
好,我们有关页面布局的教程,算是已经完结,到这里来投票,点击投票
如果能悟透每节课内容,你现在就可以拍着胸脯说“我是DIV+CSS高手!”哈哈,不过你要知道,DIV+CSS的叫法是不标准的,应该叫... ...
什么你想不起来了?!
咣当!~~
再说一句,在我们布局页面的时候,难免遇到一些IE BUG,这时候就需要CSS Hack(解决CSSbug的方法叫做CSS Hack),这块也挺简单的,推荐一篇文章《不同浏览器CSS Hack写法》,如果还有不懂多看看论坛的“『CSS浏览器兼容』”板块,或者baidu,google,这些知识我就不再单独来一节课讲了。
谢谢大家对我的支持!Kwoojan在这里说声“谢谢”,希望大家能够继续支持论坛!
如果大家还需要我出什么教程就,告诉我!我会找时间给大家具体讲讲!
2009年6月6日写:因大家强烈要求我写一篇关于浏览器兼容方面的课程,所以“第八课:CSS Hack”,我已将这节课写出来了,大家可以接着学!
看完这节课,可以到“想提高,来练习”板块,做一些练习题,进行巩固加强,推荐练习“【09/06/21】破格页面定位布局 | 困难度:4/10”
实例打包下载
HTML代码和原来的没有区别:
复制代码代码如下:
<div id="Logo">
<a href="#" id="logoLink"></a>
</div>
CSS代码就有变化了,咱先看看原来的CSS代码
复制代码代码如下:
#Logo{
height:80px;
}
#logoLink{
display:block;
width:173px;
height:46px;
background:url(../Images/logo.gif) no-repeat;
float:left;
margin-top:20px;
}
原来是用“浮动+外边距”布局的,将#logoLink定位在距离顶部20像素,左侧0像素的地方;
如果用position的方法,CSS就应该这么写,首先给#logo加上“position:relative;”,给#logoLink加上“position:absolute;”,然后让#logoLink距离上面20像素,左侧0像素,具体代码如下:
复制代码代码如下:
#Logo{
height:80px;
position:relative;/*相对定位*/
}
#logoLink{
display:block;
width:173px;
height:46px;
background:url(../Images/logo.gif) no-repeat;
position:absolute;
top:20px;
left:0;
}
怎么样效果和原来的一样吧,就是这么简单.
什么?CSS代码多了?的确,由原来的两句话,变成现在的四句,但是有没有发现,就靠Position我们就可以将Logo随意的定位于任何一个地方!这就是它的灵活的地方!如果在页面顶部在有一行“加入收藏 | 设为首页 | RSS订阅”如下图,你是不是也可以很方便的将它们定位于右上角呢~
但是定位(position)有一个缺点,不会自适应内部元素的高度,所以平时我们在布局页面的时候,如果某个或者某些模块高度永远不变,就可以用定位,但是KwooJan建议大家布局页面的时候,还是要以Float为主,Position为辅!这样你才能做出高质量的页面。
=========================================================================
最后,请大家记住我这句话:“布局页面,Float为主,Position为辅!”
=========================================================================
好,我们有关页面布局的教程,算是已经完结,到这里来投票,点击投票
如果能悟透每节课内容,你现在就可以拍着胸脯说“我是DIV+CSS高手!”哈哈,不过你要知道,DIV+CSS的叫法是不标准的,应该叫... ...
什么你想不起来了?!
咣当!~~
再说一句,在我们布局页面的时候,难免遇到一些IE BUG,这时候就需要CSS Hack(解决CSSbug的方法叫做CSS Hack),这块也挺简单的,推荐一篇文章《不同浏览器CSS Hack写法》,如果还有不懂多看看论坛的“『CSS浏览器兼容』”板块,或者baidu,google,这些知识我就不再单独来一节课讲了。
谢谢大家对我的支持!Kwoojan在这里说声“谢谢”,希望大家能够继续支持论坛!
如果大家还需要我出什么教程就,告诉我!我会找时间给大家具体讲讲!
2009年6月6日写:因大家强烈要求我写一篇关于浏览器兼容方面的课程,所以“第八课:CSS Hack”,我已将这节课写出来了,大家可以接着学!
看完这节课,可以到“想提高,来练习”板块,做一些练习题,进行巩固加强,推荐练习“【09/06/21】破格页面定位布局 | 困难度:4/10”
实例打包下载
标签:
css,定位应用
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com
暂无css 定位应用实例的评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]