布局大体分为:

位置——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格式布局的更多相关文章

  1. CSS样式表与格式布局

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

  2. 3月23 格式布局及relative

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

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

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

  4. 一种移动端position:absolute布局:

    一种移动端position:absolute布局:   1.他父级不需要加上 position:relative; 如果父级不是不是body,则加position:absolute; 2.红色加量部分 ...

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

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

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

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

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

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

  8. HTML css 格式布局

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

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

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

随机推荐

  1. liunx 字符编码问题

    查询当前服务器的编码:echo $LANG 设置服务器的编码:LANG=en_US.UTF-8

  2. ubuntu下python 2.7与python 3.X的转换

    ubuntu下python 2.7与python 3.X的转换 由于ubuntu本身自带python 2.7,而python 3.X与2.7有很多不同,所以在使用python 3.X时会带来诸多不便. ...

  3. Red Hat Enterprise Server 5.8+oracle10g(中文界面)安装

    Red Hat Enterprise Server 5.8+oracle10g(中文界面)安装 VMware workstation10(虚拟机)下面安装红帽企业版5.8 创建虚拟机 新建虚拟机,选择 ...

  4. 工具fiddler学习

    1:Fiddler 是以代理web服务器的形式工作的,它使用代理地址:127.0.0.1, 端口:8888. 当Fiddler会自动设置代理.能支持HTTP代理的任意程序的数据包都能被Fiddler嗅 ...

  5. 谈FME批量自动化数据转换方法

    FME作为转换神器,支持几百种格式的互转,实现互操作化.从fme.exe执行方式入手,讨论Command命令式执行模板(.fmw/.fmwt)和脚本(.tcl/.py)实现自动化批量转换. 1.fme ...

  6. To Use FTP Command in Linux

    Yesterday I was asked to upload a file in Linux to the corresponding server. I said "oops" ...

  7. vijos1909寻找道路

      描述 在有向图 G 中,每条边的长度均为 1,现给定起点和终点,请你在图中找一条从起点到 终点的路径,该路径满足以下条件: 路径上的所有点的出边所指向的点都直接或间接与终点连通. 在满足条件 1 ...

  8. "巴卡斯杯" 中国大学生程序设计竞赛 - 女生专场

    Combine String #include<cstdio> #include<cstring> #include<iostream> #include<a ...

  9. 详细!交叉编译时 note: the mangling of 'va_list' has changed in GCC 4.4解决办法

    为什么要在标题前面加了详细两个字,就是为了吸引看文章的你还有写文章的我这种小白,我是从坑里面爬出来了. 废话少说.... 问题就是这样子了,至于解决办法,在网上搜索了很久,大多数以一段英文作为解决办法 ...

  10. [XAF] How to hide individual navigation items and groups for certain users

    https://www.devexpress.com/Support/Center/Example/Details/E380