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类,在这个类当中为 ...
随机推荐
- 想在Images.xcassets 只能用 imageNamed 加载里边的素材 其他方法 你就别费老劲了
1.Images.xcassets中的素材 (1)只支持png格式的图片 (2) 图片只支持[UIImage imageNamed]的方式实例化,但是不能从Bundle中加载 (3) 在编译时,Im ...
- Oracle学习指南
Oracle学习指南 你走的那天,我决定不落泪,迎着风撑着眼帘用力不眨眼 创建数据库.创建用户.创建表空间.创建表.插入数据..... 1.用系统用户登录,任选系统用户 代码: >>sql ...
- The Factory pattern
public class Factory { public static void main(String[] args) {//Client IFruit fruit=Factorytemp.get ...
- python+eclipse环境搭建
一.Eclipse 的安装 Eclipse的安装是很容易的.Eclipse是基于java的一个应用程序,因此需要一个java的运行环境(JRE)才行.(我这里主要介绍windows下的安装) JRE的 ...
- 【13-Annotation】
Annotation 5个基本的Annotation •@Override •@Deprecated •@SuppressWarnings •@SafeVarargs •@FunctionalInte ...
- PHP-递归扫描目录和删除目录
(1) 通过递归扫描目录并打印 // php递归扫描目录 function scanMyDir($path){ // 打开目录 $dh = opendir($path); echo '<ul&g ...
- 黑马程序员_Java基础：网络编程总结
------- android培训.java培训.期待与您交流! ---------- Java语言是在网络环境下诞生的,它是第一个完全融入网络的语言,虽然不能说它是对支持网络编程做得最好的语言,但是 ...
- 移动Web开发中遇见的问题以及解决方法（不断更新中）
20160524 问题:在使用des加密数据后,作为url参数传递发现,系统会把+自动变为空格,以至于解密的时候出现问题. 例如:uKsRUwdU6+83+J9WfgfflA== 传到服务端后 变为u ...
- IOS绘制渐变背景色折线图的一种尝试
1.绘制折线图 上次在群里看到一个折线图划的很漂亮,自己想实现一个这样的 ,但是一直没什么头绪,不知道怎么做,就开始在网上查找划线,绘 制渐变色这一块的内容,用最笨的方式,自己尝试的写了一些,也没 有 ...
- NY 325 zb的生日
假设所有西瓜重 Asum,所求的是用 Asum / 2 的背包装,最多装下多少. 刚开始用贪心作的,WA.后来用01背包,结果TLE,数据太大.原来用的是深搜! dfs(int sum, int i) ...