HTML格式布局
一、position:fixed
锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口。
#top
{
border:1px solid #;
height:100px;
width:966px;
top:10px;
left:200px;
right:200px;
background-color:#FFF;
position:fixed;
z-index:; }
二、position:absolute
1.外层没有position:absolute(或relative);那么div相对于浏览器定位。如图1
2.外层有position:absolute(或relative);那么div相对于外层边框定位。如图2
图1:
图2:
三、position:relative
相对位置。
如下图,相对于把此div包含住的div的某个位置进行固定。如果外层没有包含他的,那就相对于浏览器进行相对位置的固定。
四、分层(z-index)
在z轴方向分层,可以理解为分成一摞纸,层数越高越靠上。
五、float:left、right
Left、right时不用给他规定位置(left、top),直接相对于浏览器。若外部被包裹,相对于外部div的除去一行的位置的左上或右上显示。
overflow:hidden; //超出部分隐藏;scroll,显示出滚动条;
<div style="clear:both"></div> //截断流
半透明效果:
<div class="box">透明区域<div>
在样式表中的代码为:
.box
{
opacity:0.5; -moz-opacity:0.5 ; filter:alpha(opacity=50)
}
HTML格式布局的更多相关文章
- CSS样式表与格式布局
样式表 CSS(Cascading Style Sheets 层叠样式表),作用是美化HTML网页. 内联样式表: 例:<p style="font-size:10px;" ...
- SWT中的布局之-----FormLayout(表格式布局)
表格式(FormLayout类) 表格式布局管理器,通过创建组件各个边的距离来布局组件,和GridLayout一样强大. 用GridLayout与FormLayout都可以实现相同的界面效果,但有时使 ...
- 3月23 格式布局及relative
主要是针对格式布局的一些内容: 1:position:fix 锁定位置(相对于浏览器的位置),例如网上弹出的一些广告 <style type="text/css"> # ...
- Java 新手学习 CSS样式列表 排版 格式布局
1,样式表分为 内联样式表 内嵌样式表 外部样式表 三种. 内联样式表是直接写在标签里面的 比如 <p style=“”></p> <div style=& ...
- 有序列表和无序列表、流、格式布局:position
列表方块: 有序列表和无序列表 ol/ul 例如<ol: style:"list-style:"" "> 1.<ol: style:&quo ...
- HTML_css样式表 样式属性 格式布局
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...
- bootstrap内置网格式布局系统:
bootstrap分为12栏,若想要一个元素占用一定的栏数的宽度,可以在这个元素上用一个特定的类,就比如说span1.span2....类. 定义的布局: 定义page-header类,在这个类当中为 ...
- position格式布局
布局大体分为: 位置--position 绝对坐标 absolute 绝对定位的元素 不受其他位置影响 可通过z-index进行层次分级 body来定位自己 相对坐标 设置 top和left之后 r ...
- 中文版Windows 7下设置日语格式布局的键盘
那么在一台使用日文键盘的PC上安装了中文版Windows 7后,该如何设置键盘布局呢? Windows 7的安装界面有一个很容易让人疑惑的选项.在第一个界面,安装程序就可以让你选择“键盘和输入方法”. ...
- HTML css 格式布局
CSS(cascading style sheets,层叠样式表),作用是美化HTML网页. /*注释*/ 注释语法 2.1 样式表的基本概念 2.1.1样式表的分类 1.内联样式表 和HTML联 ...
随机推荐
- X-code 描述文件的位置
不管是真机测试还是打包的过程中,都需要描述文件.在桌面上,按快捷键“commd+Shift+G”,就会显示一个要填的文件路径,如下图: 找到描述文件的路径: ~/Library/MobileDevic ...
- list中的比较
一说到list的的确不知道写些什么.....我觉得别人总结的比我写的还要好很多. 我擅长记录自己的误区. |--List:元素是有序的(怎么存的就怎么取出来,顺序不会乱),元素可以重复(角标1上有个3 ...
- 基于Cocos2d-x学习OpenGL ES 2.0系列——使用VBO索引(4)
在上一篇文章中,我们介绍了uniform和模型-视图-投影变换,相信大家对于OpenGL ES 2.0应该有一点感觉了.在这篇文章中,我们不再画三角形了,改为画四边形.下篇教程,我们就可以画立方体了, ...
- c++ 引用底层实现
红色是我添加的,其他地方是原作者的. 主要是看了上面的这篇“从底层汇编理解 c++ 引用实现机制“的文章之后,觉得不错.就转了过来,同时,对文中的程序都在自己的机器上验证了一下. 使用的G++版本:g ...
- with操作符损耗性能的原因
当函数运行是,创建一个[[scope]]指向的被称为作用域链的可变对象集合,作用域链的最前端是一个包含所有的局部变量.参数.this等的被称为“激活对象”的对象. 在标示符查找的过程中,从作用域的最前 ...
- Android 简单案例:onSaveInstanceState 和 onRestoreInstanceState
import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widg ...
- centos7上开启单用户模式
author: headsen chen date : 2018-08-02 11:23:16 1,在出现centos7的页面的时候,按 e进入到编译内核的界面 2,找到下面的这一段,将ro 该车 ...
- onethink文章详情如何做上一篇和下一篇!
其实很简单,如果要做上一篇和下一篇,只要知道当前文章ID的前一个ID和后一个ID即可: //上一篇文章 $prewhere = array(); $prewhere['id'] = array('LT ...
- 树链剖分+线段树+离线(广州网选赛第八题hdu5029)
http://acm.hdu.edu.cn/showproblem.php?pid=5029 Relief grain Time Limit: 10000/5000 MS (Java/Others) ...
- Eclipse中将Java项目转换成Web项目的方法(转)
前言: 用Eclipse开发项目的时候,把一个Web项目导入到Eclipse里会变成了一个java工程,将无法在Tomcat中进行部署运行. 方法: 1.找到.project文件,找到里面的<n ...