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学习资料PDF免费大放送，每日更新！有需要的亲看这里

    说明:以前有资料分享的时候,都叫大家留下自己的QQ邮箱,这样被很多的程序猿们认为我是专门来钓你们的QQ邮箱的.为此给大家带来的顾虑,深表抱歉.从现在开始,以后的分享资料我都会放在自己的百度网盘中,提供 ...

  2. Hibernate_13_QBC查询

    Employee类.Department类.SessionFactoryTools类.Employee.hbm.xml文件.Department.hbm.xml文件.Hibernate.cfg.xml ...

  3. [置顶] SQL日期类型

    在做机房收费系统的时候,上下机,我觉得是我在整个系统中遇到最棘手的问题了,现在就给大家,分享一下,我是怎样解决的. SQL中有3中数据类型是关于日期的,每一种的用法是不同的,当你用错了,就会出现下面这 ...

  4. JS中onload的各种使用

    1.最简单的调用方式 直接写到html的body标签里面,如: <html> <body onload="func()"> </body> &l ...

  5. database schema

    数据中有4个Schema无法被删除 ● dbo, 具有db_owner或者db_ddl_admin 的用户,新创建对象默认schema就是dbo ● guest , 用来给guest 用户使用,这个s ...

  6. java反射机制入门02

    Field对象的机制与实现 1.Field对象概述 1)Java.lang.reflect.Field类,是用于表示类中.接口中属性对象的类. 2)可以操作类中私有,以及公有等全部属性和属性的信息. ...

  7. linux下出现java.net.UnknownHostException

    项目部署在win环境下没问题,但是在迁移生产环境的时候出现Java.net.UnknowHostException 原因在于etc/hosts 文件没有配置域名映射,使用vi编辑器加上服务器ip 以及 ...

  8. django1.6.x(python3.3)使用pymysql连接mysql

    1.安装 pymysql,地址:https://code.google.com/p/pymysql/ 2.安装django 然后执行 django-admin.py startproject mysi ...

  9. [置顶] P2P之我见，关于打洞的学问-------开篇

    最近忙项目,有点累,无暇顾急博客,4月份本来想写写流媒体的文章,结果回家休了两个月回深圳后,接了P2P的项目,那就开始P2P吧. P2P起源于美国大学生Shawn Fanning 写的一个分享软件Na ...

  10. Python网络编程——编写一个简单的回显客户端/服务器应用

    今天将python中socket模块的基本API学习完后,照着书上的实例编写一个套接字服务器和客户端.采用python3.5版本,在注释中会标明python2和python3的不同之处. 1.代码 ( ...