格式布局
2016-03-27 09:12
323 查看
一、position:fixed
锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口。
示例:
二、position:absolute
1.外层没有position:absolute(或relative);那么div相对于浏览器定位,如下图中b(距离浏览器右边框为50像素,距离下边框为20像素)。
2.外层有position:absolute(或relative);那么div相对于外层边框定位,如下图中bb(距离d的右边框50像素,距离d的下边框为20像素)。
示例:
三、position:relative
相对位置。
如下图,相对于把此div包含住的div的某个位置进行固定。如果外层没有包含他的,那就相对于浏览器进行相对位置的固定。
示例:
四、分层(z-index)
在z轴方向分层,可以理解为分成一摞纸,层数越高越靠上。
在上面relative的示例中,我们看到了aa遮住了a,这是因为后写代码的显示级别越靠前,那么在不改变代码顺序的情况下如何让a盖住aa?如下:
示例:
五、float:left、right
Left、right时不用给他规定位置(left、top),直接相对于浏览器。若外部被包裹,相对于外部div的除去一行的位置的左上或右上显示。
overflow:hidden; //超出部分隐藏;scroll,显示出滚动条;
<div style="clear:both"></div> //截断流
设置超链接的样式示例:
附:cursor:pointer 鼠标指到上面时的形状
© 版权符号©
在样式表中的代码为:
.box
{
opacity:0.5; -moz-opacity:0.5 ; filter:alpha(opacity=50)
}
锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口。
示例:
二、position:absolute
1.外层没有position:absolute(或relative);那么div相对于浏览器定位,如下图中b(距离浏览器右边框为50像素,距离下边框为20像素)。
2.外层有position:absolute(或relative);那么div相对于外层边框定位,如下图中bb(距离d的右边框50像素,距离d的下边框为20像素)。
示例:
三、position:relative
相对位置。
如下图,相对于把此div包含住的div的某个位置进行固定。如果外层没有包含他的,那就相对于浏览器进行相对位置的固定。
示例:
四、分层(z-index)
在z轴方向分层,可以理解为分成一摞纸,层数越高越靠上。
在上面relative的示例中,我们看到了aa遮住了a,这是因为后写代码的显示级别越靠前,那么在不改变代码顺序的情况下如何让a盖住aa?如下:
示例:
五、float:left、right
Left、right时不用给他规定位置(left、top),直接相对于浏览器。若外部被包裹,相对于外部div的除去一行的位置的左上或右上显示。
overflow:hidden; //超出部分隐藏;scroll,显示出滚动条;
<div style="clear:both"></div> //截断流
设置超链接的样式示例:
附:cursor:pointer 鼠标指到上面时的形状
© 版权符号©
半透明效果:
<div class="box">透明区域<div>在样式表中的代码为:
.box
{
opacity:0.5; -moz-opacity:0.5 ; filter:alpha(opacity=50)
}
相关文章推荐
- 天声人語 20160327 道産子コーラ
- BZOJ2480Spoj3105 Mod
- 《Linux内核分析》课程第五周学习总结
- BZOJ2995同余方程
- 【VB.net】三层的理论认识
- Linux平台下的内存泄漏检测
- S5PV210加文件头
- jquery 使用方法
- 题目1010:A + B
- 题目1003:A+B
- 求a^b
- Python使用sqlite3操作数据库
- 题目1047:素数判定
- android项目引用library导致引用android-support-v4.jar冲突
- BZOJ_P1452 [JSOI2009]Count(二维树状数组)
- hdu 【1715】大菲波数
- 更新ubuntu15.10内核后,驱动解决
- win7系统安装
- iOS 断言 NSAssert的使用 调试程序错误
- c++设计一个计时器(能够暂停,重新开始,继续)的功能。写的不好,仅供参考!