一、position：fixed

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

示例：

二、position：absolute

    绝对位置：

1.外层没有position：absolute（或relative）；那么div相对于浏览器定位，如下图中b（距离浏览器右边框为50像素，距离下边框为20像素）。

2.外层有position：absolute（或relative）；那么div相对于外层边框定位，如下图中bb（距离d的右边框50像素，距离d的下边框为20像素）。

示例：

三、position：relative

相对位置：

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

示例：

四、分层（z-index）

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

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

示例：

五、float：left、right

      Left、right时不用给他规定位置（left、top），直接相对于浏览器。若外部被包裹，相对于外部div的除去一行的位置的左上或右上显示。

附加：1、 overflow：hidden；    //超出部分隐藏；scroll，显示出滚动条；

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

2、cursor：pointer   鼠标指到上面时的形状；

3、半透明效果：

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

在样式表中的代码为：

.box

{

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

}

综上练习实例：做毒霸网址大全的部分格式布局

html代码：

 <!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">

 .a

 {

     border:5px solid blue;

     width:1000px;

     height:100px;

     margin:10px;

     left:150px;

     top:80px;

     position:absolute;}

 .b

 {

     border:5px solid blue;

     width:240px;

     height:200px;

     margin:10px;

     left:150px;

     top:200px;

     position:absolute;}

 .c

 {

     border:5px solid blue;

     width:740px;

     height:300px;

     margin:10px;

     left:410px;

     top:200px;

     position:absolute;}

 .d

 {

     border:5px solid blue;

     width:740px;

     height:200px;

     margin:10px;

     left:410px;

     top:520px;

     position:absolute;}

 .e

 {

     border:5px solid blue;

     width:240px;

     height:1500px;

     margin:10px;

     left:150px;

     top:420px;

     position:absolute;}

 .f

 {

     border:5px solid blue;

     width:240px;

     height:150px;

     margin:10px;

     left:150px;

     top:1940px;

     position:absolute;}

 .g

 {

     border:5px solid blue;

     width:740px;

     height:1350px;

     margin:10px;

     left:410px;

     top:740px;

     position:absolute;}

 .h

 {

     border:5px solid blue;

     width:1000px;

     height:200px;

     margin:10px;

     left:150px;

     top:2110px;

     position:absolute;}

 .i

 {

     border:5px solid blue;

     width:1000px;

     height:200px;

     margin:10px;

     left:150px;

     top:2330px;

     position:absolute;}

 </style>

 </head>

 <body bgcolor="#F0F0F0">

 <div class="a">a</div>

 <div class="b">b</div>

 <div class="c">c</div>

 <div class="d">d</div>

 <div class="e">e</div>

 <div class="f">f</div>

 <div class="g">g</div>

 <div class="h">h</div>

 <div class="i">i</div>

 </body>

 </html>

网页运行显示效果图：

HTML基础（五）——-css样式表——样式属性——格式与布局的更多相关文章

  1. HTML-CSS样式表-★★★常用属性★★★及基本概念、分类、选择器

    样式属性 背景与前景: background-color:#F90; /*背景颜色,样式表优先级最高*/ background-image:url(路径); /*设置背景图片(默认)*/ backgr ...

  2. PyQt(Python+Qt)学习随笔：Qt Designer中部件的样式表styleSheet属性

    styleSheet属性是定义部件外观的属性样式表,在Qt中styleSheet样式表是类似于html的css样式一样的方法,只是时专门为Qt中的部件开发的.styleSheet的定义语法也是类似CS ...

  3. css样式表及属性

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

  4. 第一周复习二 （CSS样式表及其属性）

    样式表三种写法 1内联写法:style直接写在标签内.个人感觉多用于个别标签,一般情况优先级较高 style="font-size:16px;" 2内嵌写法:写在<head& ...

  5. 为什么有时候Css样式表某个属性引用不成功？

    首次使用博客,很多东西都在探索,第一篇文章也不知道发布点什么,就随便写写,是在word里面写的,也懒得排版,将就这用吧. 闲着没事找了酷狗的API写了个简单的静态网页,完成了搜索,展示,播放功能.就想 ...

  6. css样式表----------样式属性（背景与前景、边界和边框、列表与方块、格式与布局）

    一.背景与前景 (1).背景 line-height: 1.5 !important;">90; /*背景色(以样式表为主,样式表优先.)*/ background-image:url ...

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

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

  8. css样式表--样式表分类

    样式表分类 1.内联式.写在body里.控制精确,可重复性差. <body> <div style="color:#90F">更好发挥的返回结果还 < ...

  9. css样式表---样式表分类、选择器

    一.样式表分三类: 1.内联样式表.——放在元素的开始标记中.——只对当前元素起作用.<input name="txt" style="border:0px; bo ...

随机推荐

  1. 清除Windows的DNS缓存

    最近ESET杀毒软件老是提示受到DNS缓存攻击,然后就不能打开网页,或者打开得很慢.这是由于缓存的DNS被更改,访问的是错误的IP地址造成的. 解决的办法就是清除DNS缓存,打开DOS命令窗口,先后输 ...

  2. python 局部变量和全局变量 global

    当你在函数定义内声明变量的时候,它们与函数外具有相同名称的其他变量没有任何关系,即变量名称对于函数来说是 局部 的.这称为变量的 作用域 .所有变量的作用域是它们被定义的块,从它们的名称被定义的那点开 ...

  3. How to Access MySQL with Python Version 3.4

    http://askubuntu.com/questions/630728/how-to-access-mysql-with-python-version-3-4 How to Access MySQ ...

  4. 【转】Android世界的Swift - Kotlin语言

    最近Oracle又在和Google撕的厉害,才知道还有这么Kotlin在Android像Swift在Mac的地位一说. Kotlin是一门与Swift类似的静态类型JVM语言,由JetBrains设计 ...

  5. 制作Java视频播放器

    一.工程准备 首先需要下载并安装VLC播放器,然后下载vlcj外部库. 下载slf4j中的slf4j-api-1.7.13.jar. slf4j- nop-1.7.13.jar 将vlc安装目录下的l ...

  6. 搭建java环境

    操作系统:Win10 java版本:1.8.0_102 1.下载安装java JDK(安装时把jre放在了同级目录) 地址为:F:\Program Files\Java 目录下 2.配置环境变量 此电 ...

  7. [javaSE] 反射-动态加载类

    Class.forName(“类的全称”) ①不仅表示了类的类类型,还代表了动态加载类 ②请大家区分编译,运行 ③编译时刻加载类是静态加载类,运行时刻加载类是动态加载类 Ⅰ所有的new对象都是静态加载 ...

  8. JS this，call和apply以及回调函数

    this this引用,引用的是一个对象,对象不同或函数调用方式的不同,this引用会根据代码的上下文语境自动改变引用对象的特性. 引用规则 1,在最外层代码中,this引用引用的是全局对象(wind ...

  9. 正确的前端传后台json方式

    DEMO: var data=JSON.stringify({"page": {"pagenow": 1,"pagesize": 20},& ...

  10. Java IO 装饰者模式

    装饰模式(Decorator) 装饰模式又名包装(Wrapper)模式. 装饰模式以对客户端透明的方式扩展对象的功能,是继承关系的一个替代方案. 装饰模式通过创建一个包装对象,也就是装饰,来包裹真实的 ...