1、position：fixed

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

例：

 <head>

 <title>123</title>

 <style type="text/css">

 #a

 {

 　　border:5px solid blue;

 　　width:100px;

 　　height:100px;

 　　margin:10px;

 　　background-color:#0F3;

 　　left:30px;

 　　bottom:20px;

 　　position:fixed;

 }

 </style>

 </head>

 <body>

 　　<div id="a">a

 　　</div>

 </body>

显示如下
<!--[endif]-->

2、position：absolute

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

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

代码：

 <head>

 <title>123</title>

 <style type="text/css">

 .b

 {

 　　border:5px solid blue;

 　　width:100px;

 　　height:100px;

 　　margin:10px;

 　　background-color:#0F3;

 　　right:50px;

 　　bottom:20px;

 　　position:absolute; /**/

 }

 .c

 {

 　　border:2px solid red;

 　　width:400px;

 　　height:200px;

 }

 </style>

 <style type="text/css">

 .d

 {

 　　border:2px solid red;

 　　width:400px;

 　　height:200px;

 　　position:absolute;

 }

 </style>

 </head>

 <body>

 <div class="c">c

 　　<div class="b">b

 　　</div>

 </div>

 <div class="d">d

 　　<div class="b">bb

 　　</div>

 </div>

 </body>

显示如下：

3、position：relative

　　相对于默认位置的移动。如下图，a在用relative移动前的位置，aa为用relative移动后的位置，aa距原位置上部间距50像素，距原位置左边距20像素。

代码：

<

 head>

 <title>123</title>

 <style type="text/css">

 #a

 {

 　　border:5px solid blue;

 　　width:100px;

 　　height:100px;

 　　margin:10px;

 　　background-color:#0F3;

 　　position:fixed;

 }

 #aa

 {

 border:5px solid blue;

 width:100px;

 height:100px;

 margin:10px;

 background-color:#0F3;

 left:20px;

 top:50px;

 position:relative;

 }

 </style>

 </head>

 <body>

 <div id="a">a

 </div>

 <div id="aa">aa

 </div>

 </body>

显示如下:

4、分层（z-index）

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

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

 <head>

 <title>123</title>

 <style type="text/css">

 .a

 {

 　　border:5px solid blue;

 　　width:100px;

 　　height:100px;

 　　margin:10px;

 　　background-color:#0F3;

 　　position:fixed;

 　　z-index:2;    /*这里做一下修改，默认情况下，都是第1层*/

 }

 .aa

 {

 　　border:5px solid blue;

 　　width:100px;

 　　height:100px;

 　　margin:10px;

 　　background-color:#0F3;

 　　left:20px;

 　　top:50px;

 　　position:relative;

 }

 </style>

 </head>

 <body>

 <div class="a">a

 </div>

 <div class="aa">aa

 </div>

 </body>

 显示如下:

5、float：left，right

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

附：

overflow:hidden;    /*超出范围时隐藏；scroll，超出范围时出滚动条。*/

超链接样式：

<style type="text/css">

a:link    /*一般链接*/

{

　　　　　　color:blue;

}

a:visited    /*访问过的链接的格式*/

{

　　color:green;

}

a:hover    /*设置鼠标指向链接时的形式*/

{

　　color:red;

}

</style>

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

&copy;    版权符号©

半透明效果

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

//样式表中代码：

.box

{

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

}

布局的三种方式：

1.自然布局
没有任何修饰的布局是自动靠左的。
2.流动布局
上面讲的float:left的情况。
3.定位布局
相对定位和绝对定位都是相对于父div标签的。
相对------以这个元素的本来应该在的位置为参照点
绝对——以父div标签的原点（左上角）为参照点。

由于外层是position:relative，所以里层是absolute的话，则会以外层的左上角为位移参考对齐。当然外层只写position:relative，写上left,top这两个值，则表示以：以这个元素的本来应该在的位置为布局参照原点进行left,top对齐。

还有一种情况是，只是一个position:absolute;外层没有position:relative，这时会找寻那个点为参考呢？这时候的原则是：如果某父级元素中有relative者，则以某父级元素为参考原点，如果没有position:relative，则以body为参考原点。如果position:absolute外层没有relative时，这两个布局上是没有区别的。

当然最后一种情况是：外层是：position:absolute;里边是position:relative，那会是什么情况？按着原来的原则，absolute会参考body为布局原点，relative会参考他本来应该在的位置为布局原点，这时候其实就是参考外层左上角为布局原点。
其它的要看实际情况而定。

网页制作之html基础学习4-格式与布局的更多相关文章

  1. 网页制作之html基础学习1-简介

    学习网页制作主要分为三大块 1.HTML    超文本标记语言( 全称:Hyper Text  Markup Language) 专门编辑静态网页 2.CSS      网页美化:是HTML控制的样式 ...

  2. 网页制作之html基础学习6-CSS浏览器兼容问题

    初学html和css时,每天切图,总会遇到很多浏览器兼容性问题.最近一直关注移动平台开发,就html和css来说,不用考虑那么多浏览器兼容性问题.到现在,以至于很多浏览器兼容性几乎忘光了.今天把以前总 ...

  3. 网页制作之html基础学习3-css样式表

    样式:CSS(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. 在样式里面用 /*  */ 进行注释. 1.样式表的基本概念 1.1.样式表分类 1.内联样式表 和 ...

  4. 网页制作之html基础学习2-标签

    一.html结构组成 <html> --开始标签 <head> 网页上的控制信息 <title>页面标题</title> </head> & ...

  5. 网页制作之html基础学习5-background-position用法

    我们知道在用图片作为背景的时候,css要这样写,以div容器举例子,也可以是body.td.p等的背景,道理一样. 代码: div{ background:#FFF url(image) no-rep ...

  6. Html JavaScript网页制作与开发完全学习手册

    Html JavaScript网页制作与开发完全学习手册 篇 HTML技术章 HTML入门 1.1 什么是HTML 1.1.1 HTML的特点 1.1.2 HTML的历史 1.2 HTML文件的基本结 ...

  7. 零基础学习java------39---------json格式交互，Restful（不懂），静态资源映射，SSM整合（ssm整合思想，application.xml文件详解(声明式事务管理)，）

    一. json格式交互(知道) 1 . 回顾ajax基本语法 $.ajax({ url:"", // 请求的后台路径 data:{"":"" ...

  8. IT兄弟连 HTML5教程 HTML5的学习线路图 第一阶段学习网页制作

    学习HTML5技术可并不是简单学会几个新增的标签而已,HTML5现在可以说是前端所有技术的代名词.需要学习的语言和工具不仅多,对于刚接触他们的新人会感觉很乱.另外,前端开发也会细分很多个开发岗位,不同 ...

  9. 学会网页制作，web app开发，必须先从语法基础开始学习

    做软件开发,是从事编程开发工作,必须先从语法基础开始学习,通过语法组成产品效果.      前端开发的基础语法,由HTML+CSS+JavaScript组成,这是前端开发最基本的3个语言.       ...

随机推荐

  1. android下文件下载

    public static void downFile(final String url){ new Thread(){ public void run(){ FileOutputStream os= ...

  2. citrix协议ICA技术原理

    转载自: http://www.zrss.com.cn/article-110-1.html Citrix交付中心解决方式的核心是虚拟化技术,虚拟化计算的核心是ICA协议,ICA协议连接了执行在平台上 ...

  3. scanf 与 cin 的区别

    在论坛上看到有人提出一个如下的问题,在此总结一下. 原问题: http://topic.csdn.net/u/20110414/22/90d0606c-9876-48e4-9b69-bd8bd8a41 ...

  4. jQuery File Upload blueimp with struts2 简单试用

    Official Site的话随便搜索就可以去了 另外新版PHP似乎都有问题  虽然图片都可以上传  但是response报错  我下载的是8.8.7木有问题   但是8.8.7版本结合修改main. ...

  5. ASP.NET CS文件中输出JavaScript脚本

    ClientScript.RegisterStartupScript:http://msdn.microsoft.com/zh-cn/library/system.web.ui.clientscrip ...

  6. RMAN多种备份脚本分享

    1.相关参数介绍: 命令行参数 描述 TARGET 为目标数据库定义的一个连接字符串,当连接到一个目标数据库时,该连续是SYSDBA连接.该用户拥有启动和关闭数据库的权利,必须属于OSDBA组,必须建 ...

  7. utf8字节

    <pre name="code" class="html">[root@wx03 0724]# perl a1.pl 112 [root@wx03 ...

  8. 在 Azure 网站上使用 Memcached 改进 WordPress

    编辑人员注释:本文章由 Windows Azure 网站团队的项目经理 Sunitha Muthukrishna 和 Windows Azure 网站开发人员体验合作伙伴共同撰写. 您是否希望改善在 ...

  9. BZOJ 1652: [Usaco2006 Feb]Treats for the Cows

    题目 1652: [Usaco2006 Feb]Treats for the Cows Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 234  Solve ...

  10. FMDB的基本应用

    FMDB简介 iOS中原生的SQLite API在进行数据存储的时候,需要使用C语言中的函数,操作比较频繁.于是,就出现了一系列将AQLite API进行封装的库,例如FMDB.PlausibleDa ...