HTML--4格式布局
一、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 鼠标指到上面时的形状
© 版权符号©
半透明效果:
<div class="box">透明区域<div>
在样式表中的代码为:
.box
{
opacity:0.5; -moz-opacity:0.5 ; filter:alpha(opacity=50)
}
HTML--4格式布局的更多相关文章
- 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联 ...
随机推荐
- xcode6 AsynchronousTesting 异步任务测试
xcode集成了非常方便的测试框架,XCTest 在xcode6之后,提供了 <XCTest/XCTestCase+AsynchronousTesting.h> 利用此我们可以直接在XCT ...
- 苹果审核Metadata Rejected
最近提交了 公司的一个 app,收到了appStore拒绝的信息及邮件 拒绝后的状态改为了:metadata rejected 邮件里面有这样一句话 意思大致就是: 你的app先被显示为 Metada ...
- Linux远程管理
若想要远程管理服务器,对于Windows系统,应该比较容易理解,通过window系统自带的远程桌面客户端即可登录远程服务器,从而实现在本地对远程服务器的管理.然而对于linux服务器来说这种方法就不行 ...
- js的预编译机制
1.var定义的是“当前作用域下的一个变量”,当在函数内部不使用var声明时,会被当做全局变量而不是函数内的局部变量(严格模式下还会报错) 2.js的预编辑:[对定义式函数]直接创建为作用域上的函数变 ...
- 【C#】获取当前系统桌面、我的照片、我的文档等路径
获取当前系统桌面.我的照片.我的文档等路径 using System; using System.Collections.Generic; using System.ComponentModel; ...
- android浮动搜索框
android浮动搜索框的配置比较繁琐,需要配置好xml文件才能实现onSearchRequest()方法. 1.配置搜索的XML配置文件,新建文件searchable.xml,保存在res/xml ...
- python 练习 6
#!/usr/bin/python # -*- coding: utf-8 -*- from collections import deque from math import log10 def p ...
- nodeschool.io 5
~~ FILTERED LS ~~ Create a program that prints a list of files in a given directory,filtered by the ...
- Qt之资源系统
简述 Qt 的资源系统用于存储应用程序的可执行二进制文件,它采用平台无关的机制.当你的程序总需要这样的一系列文件(图标.翻译文件等)并且不想冒丢失某些文件的风险时,这就显得十分有用. 资源系统基于 q ...
- App开发
设置App图标 在Assets.xcassets的AppIcon中添加图片. 设置App名称 工程 -> Info -> 添加Key:“Bundle Display Name“ 和 Val ...