一、positionfixed

  锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口。

示例:

二、positionabsolute

  1.外层没有position:absolute(或relative);那么div相对于浏览器定位,如下图中b(距离浏览器右边框为50像素,距离下边框为20像素)。

  2.外层有position:absolute(或relative);那么div相对于外层边框定位,如下图中bb(距离d的右边框50像素,距离d的下边框为20像素)。

示例:

三、positionrelative

  相对位置。

  如下图,相对于把此div包含住的div的某个位置进行固定。如果外层没有包含他的,那就相对于浏览器进行相对位置的固定。

示例:

四、分层(z-index

  z轴方向分层,可以理解为分成一摞纸,层数越高越靠上。

  在上面relative的示例中,我们看到了aa遮住了a,这是因为后写代码的显示级别越靠前,那么在不改变代码顺序的情况下如何让a盖住aa?如下:

示例:

五、floatleftright

Leftright时不用给他规定位置(lefttop),直接相对于浏览器。若外部被包裹,相对于外部div的除去一行的位置的左上或右上显示。

  overflow:hidden;    //超出部分隐藏;scroll,显示出滚动条;

  <div style="clear:both"></div>   //截断流

设置超链接的样式示例:

附:cursor:pointer    鼠标指到上面时的形状

&copy                  版权符号©

半透明效果:

  <div class="box">透明区域<div>

在样式表中的代码为:

.box

{

opacity:0.5; -moz-opacity:0.5 ; filter:alpha(opacity=50)

}

HTML--4格式布局的更多相关文章

  1. CSS样式表与格式布局

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

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

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

  3. 3月23 格式布局及relative

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

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

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

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

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

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

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

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

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

  8. position格式布局

    布局大体分为: 位置--position 绝对坐标 absolute 绝对定位的元素 不受其他位置影响 可通过z-index进行层次分级 body来定位自己 相对坐标 设置  top和left之后 r ...

  9. 中文版Windows 7下设置日语格式布局的键盘

    那么在一台使用日文键盘的PC上安装了中文版Windows 7后,该如何设置键盘布局呢? Windows 7的安装界面有一个很容易让人疑惑的选项.在第一个界面,安装程序就可以让你选择“键盘和输入方法”. ...

  10. HTML css 格式布局

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

随机推荐

  1. ogre入门笔记

    ogre作为一款开源的非商业渲染引擎, 除去效率不谈, 其设计结构十分优雅, 值得游戏从业者拥有和学习.本篇笔记基于ogre v1.9. 1.代码模块 ogre的核心代码分布如下图: ogreMain ...

  2. 垂直居中,水平居中html例子

    <!DOCTYPE html> <html lang="en"> <head> <title>Vertical Centering ...

  3. 利用mycat实现mysql数据库读写分离

    1.这里是在mysql主从复制实现的基础上,利用mycat做读写分离,架构图如下: 2.Demo 2.1 在mysql master上创建数据库创建db1 2.2 在数据库db1创建表student ...

  4. Spring AOP propagation七种属性值

    <!-- 配置事务通知 --> <tx:advice id="advice" transaction-manager="transactionManag ...

  5. AOP 之 6.1 AOP基础(拾陆)

    6.1.1  AOP是什么 考虑这样一个问题:需要对系统中的某些业务做日志记录,比如支付系统中的支付业务需要记录支付相关日志,对于支付系统可能相当复杂,比如可能有自己的支付系统,也可能引入第三方支付平 ...

  6. 1.2 认识ASP.NET MVC项目结构

    1.开发环境 操作系统:xp.vista.windows 7.windows 8.windows server 2003|2008|2008R2|2012: 集成开发环境IDE: Vsiual Stu ...

  7. mybatis 简单配置

    一.com/book/map包下有两个配置文件: 1.MyBatisConfig.xml <?xml version="1.0" encoding="UTF-8&q ...

  8. IOS开发设计思路

    我在做 iOS 开发的时候,发现自己在写程序的时候,常常处于两种状态的切换,我把这两种状态称为软件开发的上帝模式与农民模式.我先给大家介绍一下这两种模式的特点. 上帝模式 处于上帝模式时,我需要构思整 ...

  9. shell 下的$符合

    $n        $1 the first parameter,$2 the second...$#        The number of command-line parameters.$0  ...

  10. PHP+socket游戏数据统计平台发包接包类库

    <?php /** * @title: PHP+socket游戏数据统计平台发包接包类库 * @version: 1.0 * @author: perry <perry@1kyou.com ...