一、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格式布局的更多相关文章

  1. CSS样式表与格式布局

    样式表 CSS(Cascading Style Sheets  层叠样式表),作用是美化HTML网页. 内联样式表: 例:<p style="font-size:10px;" ...

  2. SWT中的布局之-----FormLayout(表格式布局)

    表格式(FormLayout类) 表格式布局管理器,通过创建组件各个边的距离来布局组件,和GridLayout一样强大. 用GridLayout与FormLayout都可以实现相同的界面效果,但有时使 ...

  3. 3月23 格式布局及relative

    主要是针对格式布局的一些内容: 1:position:fix 锁定位置(相对于浏览器的位置),例如网上弹出的一些广告 <style type="text/css"> # ...

  4. Java 新手学习 CSS样式列表 排版 格式布局

    1,样式表分为  内联样式表   内嵌样式表  外部样式表  三种. 内联样式表是直接写在标签里面的  比如 <p style=“”></p>  <div style=& ...

  5. 有序列表和无序列表、流、格式布局:position

    列表方块: 有序列表和无序列表 ol/ul 例如<ol: style:"list-style:""  "> 1.<ol: style:&quo ...

  6. HTML_css样式表 样式属性 格式布局

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...

  7. bootstrap内置网格式布局系统:

    bootstrap分为12栏,若想要一个元素占用一定的栏数的宽度,可以在这个元素上用一个特定的类,就比如说span1.span2....类. 定义的布局: 定义page-header类,在这个类当中为 ...

  8. position格式布局

    布局大体分为: 位置--position 绝对坐标 absolute 绝对定位的元素 不受其他位置影响 可通过z-index进行层次分级 body来定位自己 相对坐标 设置  top和left之后 r ...

  9. 中文版Windows 7下设置日语格式布局的键盘

    那么在一台使用日文键盘的PC上安装了中文版Windows 7后,该如何设置键盘布局呢? Windows 7的安装界面有一个很容易让人疑惑的选项.在第一个界面,安装程序就可以让你选择“键盘和输入方法”. ...

  10. HTML css 格式布局

    CSS(cascading style sheets,层叠样式表),作用是美化HTML网页. /*注释*/   注释语法 2.1 样式表的基本概念 2.1.1样式表的分类 1.内联样式表 和HTML联 ...

随机推荐

  1. ArcGIS 要素合并

    1.选择工具 2.选择输入要素.输出要素.按照什么字段进行合并 3.查看融合结果 4.GP工具-创建GP模型 拖入“融合”工具,设置融合的参数,如下图: 右击左边椭圆,勾选 模型参数 右击右边椭圆,勾 ...

  2. 说说GPIO.H(NUC131)

    /**************************************************************************//** * @file GPIO.h * @ve ...

  3. SuperSlide——再次接触

    原来自己很早之前就接触过SuperSlider这个神奇的插件,原谅自己又得了“健忘症”,因此昨天就把自己“坑”了一把: 前言: 交易一期的项目即将上线,在解决测试同事们提出的bug的时候,无意间看到页 ...

  4. linux文件类型详解

    *nix 有各种的文件类型 当#ls -la后,会发现在权限位前有个 - 有些是 b 有些是 d 这个位置就是文件类型的标示   普通文件regular file,  用 - (破折号)标示, 比如 ...

  5. Swift-'!','?'用法

    ///'!','?','as'的用法 ///'!'与'?'用法与可选类型(Optional) ///首先要了解Optional类型包括什么, ///Optional类型的值包括: 1.nil 2.值 ...

  6. Computer Science Theory for the Information Age-5: 学习理论——VC维的定义以及一些例子

    学习理论——VC维的定义以及一些例子 本文主要介绍一些学习理论上的东西.首先,我们得明确,从训练集上学习出来的分类器的最终目标是用于预测未知的样本,那么我们在训练的时候该用多少的样本才能使产生的分类器 ...

  7. Splay模板 1.0

    struct Splay{ int rt,sz; ///根节点,树节点总数 ],fa[N];///值,左右儿子,父亲 void spin(int t){ ///旋转操作 ]==t; son[x][y] ...

  8. Intel产品AMT本地及远程提权漏洞(CVE-2017-5689)复现 【转载自freebuf.com】

    零.绪论: 1.鸣谢freebuf的文章,主要是学习这个漏洞,文章地址: Intel产品AMT本地及远程提权漏洞(CVE-2017-5689)复现 2.在shadon上找了多个该漏洞尝试复现失败(评论 ...

  9. ZoomIt v4.5

    https://technet.microsoft.com/en-us/sysinternals/bb897434.aspx zoomIt: 演示必备辅助软件 ZoomIt(主页|介绍)是一款非常实用 ...

  10. 详解Go语言中的屏蔽现象

    在刚开始学习Go语言的过程中,难免会遇到一些问题,尤其是从其他语言转向Go开发的人员,面对语法及其内部实现的差异,在使用Go开发时也避免不了会踩"坑".本文主要针对Go设计中的屏蔽 ...