position格式布局
布局大体分为：
位置——position
绝对坐标
absolute
绝对定位的元素
不受其他位置影响
可通过z-index进行层次分级
body来定位自己
相对坐标
设置 top和left之后
relative
同级元素定位
实际占有页面
可通过z-index进行层次分级
锁定（广告）坐标
fixed
不会随滚动条滚动而滚动
全局去下划线
a<text-decoration:none>
指向下划线，用于超链接
a : hover
<texe-decoration:none>
指向隐藏与定位————战！111
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.aa {
width: 100px;
height: 50px;
background-color: #0FF;
position: relative;/*相对坐标*/
overflow: hidden; /*超出部分隐藏掉*/
cursor: pointer; /*指向变小手*/}
.aa:hover { /*当指向aa的时候*/
overflow: visible;/*超出部分显示*/
} .bb {
width: 100px;
height: 50px;
background-color: #C00;
position: relative;
top: 50px;
overflow: hidden;
} .bb:hover {
overflow: visible;
} .cc {
width: 100px;
height: 50px;
background-color: #F69;
position: relative;
margin-left: 100px;
} .ee {
width: 100px;
height: 50px;
background-color: #0F0;
position: relative;
top: 50px;
overflow: hidden;
} .ee:hover {
overflow: visible
} .ff {
width: 100px;
height: 50px;
background-color: #000;
position: relative;
left: 100px;
}
</style>
</head> <body>
<div class="aa">
<div class="bb">
<div class="cc"></div>
</div>
<div class="ee">
<div class="ff"></div>
</div> </div>
</body> </html>
position格式布局的更多相关文章
- CSS样式表与格式布局
样式表 CSS(Cascading Style Sheets 层叠样式表),作用是美化HTML网页. 内联样式表: 例:<p style="font-size:10px;" ...
- 3月23 格式布局及relative
主要是针对格式布局的一些内容: 1:position:fix 锁定位置(相对于浏览器的位置),例如网上弹出的一些广告 <style type="text/css"> # ...
- SWT中的布局之-----FormLayout(表格式布局)
表格式(FormLayout类) 表格式布局管理器,通过创建组件各个边的距离来布局组件,和GridLayout一样强大. 用GridLayout与FormLayout都可以实现相同的界面效果,但有时使 ...
- 一种移动端position:absolute布局：
一种移动端position:absolute布局: 1.他父级不需要加上 position:relative; 如果父级不是不是body,则加position:absolute; 2.红色加量部分 ...
- 有序列表和无序列表、流、格式布局：position
列表方块: 有序列表和无序列表 ol/ul 例如<ol: style:"list-style:"" "> 1.<ol: style:&quo ...
- Java 新手学习 CSS样式列表 排版 格式布局
1,样式表分为 内联样式表 内嵌样式表 外部样式表 三种. 内联样式表是直接写在标签里面的 比如 <p style=“”></p> <div style=& ...
- HTML_css样式表 样式属性 格式布局
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...
- HTML css 格式布局
CSS(cascading style sheets,层叠样式表),作用是美化HTML网页. /*注释*/ 注释语法 2.1 样式表的基本概念 2.1.1样式表的分类 1.内联样式表 和HTML联 ...
- bootstrap内置网格式布局系统：
bootstrap分为12栏,若想要一个元素占用一定的栏数的宽度,可以在这个元素上用一个特定的类,就比如说span1.span2....类. 定义的布局: 定义page-header类,在这个类当中为 ...
随机推荐
- HDU Math Problems
1576 const int mod = 9973; n = a - a / mod * mod; a / b = ans; ans * b = a = a / mod * mod + n; n = ...
- Hibernate-list()与iterate()方法的区别
对于list方法而言,实际上Hibernate是通过一条Select SQL获取所有的记录.并将其读出,填入到POJO中返回.而iterate 方法,则是首先通过一条Select SQL 获取所有符合 ...
- java JFrame修改左上角的图片
直接案例:
- RedHat Enterprise Linux 7关闭防火墙方法
systemctl命令是系统服务管理器指令,它实际上将 service 和 chkconfig 这两个命令组合到一起 在之前的版本中关闭防火墙等服务的命令是 service iptables stop ...
- 算法入门笔记------------Day2
1.开灯问题 有n盏灯,编号为1-n,第一个人把所有灯打开,第二个按下所有编号为2的倍数的开关(这些灯都被关掉),第三个人按下所有编号为3的倍数的开关,依次类推,一共有k个人,问最后有哪些灯开着?输入 ...
- python中协程的使用示例
例子1 把字符串分割为列表 def line_splitter( delimiter = None ): print( 'ready to split' ) result = None while T ...
- python 延迟绑定
def multipliers(n): funcs = [] for i in range(n): def f(x): return x * i funcs.append(f) return func ...
- SQL 常用语句
替换表中某个字段中的某些字符:(将ConfigValue列中的A值替换为B) update SysConfigParams set ConfigValue=replace(ConfigValue,'A ...
- Eclipse 包排版问题
问题描述: 在Eclipse中,项目结构如下所示: 这样的显示方式,查找内容太不方便.使用不习惯. 解决方法: Eclipse中默认包的显示方式为flat,使其改为Hierarchical. 操作步骤 ...
- Python之*args,**kw
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #021ca1; background-color: #8e352 ...