一、position:fixed
锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口。
123#a
{
border:5px soild blue;...........边线为5像素
width:100px; 宽度与高度为5像素
height:100px;
margin:10px;
background-color:#0F3;
left:30px;
bottom:20px; 距离左边30像素,距离下边20像素
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,显示出滚动条;
设置超链接的样式示例:
附:cursor:pointer 鼠标指到上面时的形状
© 版权符号©
半透明效果:
在样式表中的代码为:
.box
{
opacity:0.5; -moz-opacity:0.5 ; filter:alpha(opacity=50)
}
absolute:当使用时,表示在文档流中没有实际存在位置(浮动),在不设置任何方位值时,只能按兵不动,当设置了方位值之后,会紧接着去寻找距离最近的能够将它包含住的父级元素,然后进行定位。
relative:当使用时,表示在文档中确实占有一定的空间,在不设置任何方位值时,会出现在应该出现的位置(空间),当设置了方位值之后,会在应该出现的位置上进行上、下、左、右的形状位移,而实际上还是占有应该占有的位置(空间)
9月11日上午HTML有序列表、无序列表、网页的格式和布局
样式表 六.列表方块 1.有序列表变无序列表
- 张店
- 桓台
- 淄川
一起学HTML基础-格式与布局fixed/absolute/relative/z-index/float
很多网页都存在一个悬浮的操作条或者广告区,无论如何上下滚动网页,操作条或广告区都不会动,这个就是div制作,位置锁定在屏幕指定位置,现在我们就学习下网页的格式与布局. position 位置,来给di ...
css样式表 格式与布局
1 样式表 内联样式表 内嵌样式表 外部样式表 2 选择器 标签选择器
样式表分类: 1.内联样式表, 和html联合显示,例:
内联样式表
2.内嵌样式表 作为一个独 ...css样式,边界和边框,格式和布局
1.大小:width:宽:heigh:高 2.背景:1)background-color:背景颜色 2)background-image:背景图片url路径 3)background-repeat:图 ...
关于CSS格式与布局中的基础知识的简单操作
90; /*背景色(以样式表为主,样式表优先.)*/ background-image:url ...
HTML基础(五)——-css样式表——样式属性——格式与布局
一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 示例: 二.position:absolute 绝对位置: 1.外层没有position:a ...
从图片中提取html格式的布局
制作界面的自动化 意义:对于程序设计人员来说,比较痛苦的是制作界面.从设计人员发送的稿件(通常为jpg格式),到完成html的布局,需要将图像转化为div标记,自动化这一过程十分有意义 1.设计一个工 ...
HTML--CSS样式表--格式与布局
一:position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角弹窗 例如:
网页标题随机推荐
[python]爬虫学习(二)
---恢复内容开始--- #python2 import urllib2 #python3 import urllib.request html=urllib.request.urlopen('htt ...
获取Windows下某进程监听的TCP/UDP端口
1.在Windows下用CMD netstat命令可以获得当前进程监听端口号的信息,如netstat -ano可以看到IP.port.状态和监听的PID. 那么可以执行CMD这个进程得到监听的端口号信 ...
BizTalk动手实验(十五)AS2消息安全传输
1 课程简介 本课程将配置AS2相关的安全传输配置,学员可以通过本课程熟悉相关的安全配置. 2 准备工作 为了模拟实际的B2B交互过程,本实验需要2台BizTalk Server 2010虚拟机(两两 ...
iOS逆向分析app
适合有一定的逆向编程基础的人看. 背景:自动抢红包的脚本工具:cyscript,reveal,class-dump,越狱的pod等. 这里先上一张reveal的分析图: 小结:获取到了真个软件的整体结 ...
页面头部title、description、keywords标签的优化
页面头部优化
中间的区域中间的区域,我们称为网页的头部.在网页的头部中,通常存放一些介绍页面内容的信息,例如页面标题.描述及关键字等等.在头部优化中,除 ...js/bat批处理调用谷歌浏览器chrome批量打开网页测试web性能
批处理批量打开网页 其实用java就可以搞定,但是这么一个轻巧的测试,js或者bat批处理去一次性打开几百个网页测试一下页面没必要上java 两者的区别,js的话,只能打开多个浏览器实例,不方便查看效 ...
git简单使用教程
git 的基本使用指令 我们先来简单熟悉一下 git 的简单使用的指令, 作为最基本的 git 指令一定要熟悉 12345678910111213141516171819202122232425262 ...
DAY14(PYTHONS)生成器进阶
def average(): sum = 0 count = 0 avg = 0 while True: #循环 num = yield avg #遇到yield就停止,防止一开始除数为0导致崩溃 s ...
listView从底部回到顶部代码实现
可用如下方法: 1.平滑的回到顶部,但是会划过中间的每一页 mListView.getRefreshableView().smoothScrollToPosition(0); 2.直接跳到顶部 if ...