布局大体分为：

位置——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. STM32之PWM波形输出配置总结

    一.   TIMER分类: STM32中一共有11个定时器,其中TIM6.TIM7是基本定时器:TIM2.TIM3.TIM4.TIM5是通用定时器:TIM1和TIM8是高级定时器,以及2个看门狗定时器 ...

  2. Oracle数据库备份 expdp/impdp导出导入命令

    使用EXPDP和IMPDP时应该注意的事项: EXP和IMP是客户端工具程序,它们既可以在客户端使用,也可以在服务端使用. EXPDP和IMPDP是服务端的工具程序,他们只能在ORACLE服务端使用, ...

  3. 数学工具之mathgv

    做科研时,数学必不可少,有时要看一个方程的很多特性,当然,自己了解的当然好,可要是碰到复杂的,一下子是看不出来,这个时候借助数学工具可以很好地画出来,这里介绍mathgv这个软件. 此软件是开源的,使 ...

  4. CDATA为何物？

    CDATA的解释 1. 术语 CDATA 指的是不应由 XML 解析器进行解析的文本数据(Unparsed Character Data),XHTML也是如此. CDATA 部分中的所有内容都会被解析 ...

  5. 个人网页的留言板实现与sae的数据库账户配置

    个人网页(github)的留言板终于搞定了.总之后端的东西不会写,只有修改以前教程里面的文件.记录一下重要的过程. 使用了留言保存的send()函数,模版有注册登录功能.根据需求修改了一下,去掉了登录 ...

  6. JTA 深度历险 - 原理与实现

    转自http://www.ibm.com/developerworks/cn/java/j-lo-jta/ 在 J2EE 应用中,事务是一个不可或缺的组件模型,它保证了用户操作的 ACID(即原子.一 ...

  7. Android PullToZoomListView实现放大回弹效果

    另外一个相同项目的地址https://github.com/Frank-Zhu/PullZoomView 转自http://blog.csdn.net/wangjinyu501/article/det ...

  8. C#学习感悟

    上周虽然没上课,课上的内容是部分同学展示大作业成果,但是对于我来说,看了一些同学辛勤劳动的成果,听了他们对C#学习的一些感悟,我受益匪浅. 在这里我想谈谈我的收获.老师给的模板是todolist,但是 ...

  9. C# .NET 隐藏窗体

    隐藏窗体,打开窗体后如果想让它隐藏,然后再显示出来,就判断是不是NULL或者有没有关闭,不然就NEW一个出来,否则就SHOW出来. 当然如果有隐藏的话退出的时候最好用Application.Exit( ...

  10. java和android及IOS对接RSA加密经验

    1.网上找的java生成RSA密钥对的例子,产生的字附串实际上是hax后和密钥串 你可以将他们当成静态字附串存在java代码里 2.android和java可以代码复用,IOS对接比较麻烦 3.IOS ...