繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > css 定位应用实例
- CSS样式表
- 分页显示之超级提速版
- 兼容多浏览器实现半透明(Opera ie firefox)
- 解析IE, FireFox, Opera 浏览器支持Alpha透明的方法
- utf8和unicode编码究竟是什么关系？有何区别?
- XHTML下css+div布局总结 超强推荐
- 在IE下拖动滚动条时border消失的解决方法
- CSS中常用的单位
- 有关表格边框的css语法整理(1)
- 中文排版CSS心得
- 一个针对IE7的CSS Hack
- css也疯狂! 用background 插入flash播放器
- 如何解决下拉菜单被flash覆盖的问题
- 网页中关闭IE的图像工具栏和XP主题
- 解决IE升级后Flash线框问题
- em px的关系
- 在iframe中隐藏横向滚动条的方法大全
- Iframe自适应其加载的内容高度
- 固定右栏宽度, 左栏内容先出现同时自适应宽度的布局
- IE Bug--浮动对象外补丁的双倍距离的解决方法
- 解决IE7以下版本不支持无A状态伪类的几种方法
CSS样式表 中的 css 定位应用实例
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 179 ::
收藏到网摘: n/a
如果你还是不能太明白这句话，我们就做个实例，把我们第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”
实例打包下载
评论 (0) All
