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. Oracle 集群心跳及其參数misscount/disktimeout/reboottime

    在Oracle RAC中,能够从多个层次,多个不同的机制来检測RAC的健康状况,即能够通过心跳机制以及一定的投票算法来隔离故障.假设检測到某节点失败,则存在故障的节点将会被逐出集群以避免故障节点破坏数 ...

  2. 自己定义View----点击滑动选择字母列表

    因为项目须要,也不想使用网上的写好的控件,于是作死的自己定义了一个控件.特此记录下成功.效果例如以下: 首先须要把全部的字母绘制出来: private static String letters[] ...

  3. 禁用Visual Studio 2013的Browser Link功能

    禁用Visual Studio 2013的Browser Link功能 GET http://localhost:37478/7fd25f8af33f443494e765be19be6240/brow ...

  4. 使CSS3样式在IE里面有效果

    1. 下载ie-css3.htc文件 2. 当前元素一定要有定位属性,像是position:relative或是position:absolute属性. 3. z-index值一定要比周围元素的要高 ...

  5. foreach学习笔记

    对集合进行遍历 只能获取集合元素,但是不能对集合进行操作. 迭代器除了遍历,还可以进行remove的动作. 如果是用ListIterator,还可以在遍历过程中进行增删改查的动作. for(Strin ...

  6. 在Eclipse中使用JDBC访问MySQL数据库的配置方法

    在Eclipse中使用JDBC访问MySQL数据库的配置方法 分类: DATABASE 数据结构与算法2009-10-10 16:37 5313人阅读 评论(10) 收藏 举报 jdbcmysql数据 ...

  7. [Just a feeling]

    The possibility of enhancing one's knowledge is limitless. Graduation only marks a stage of one's ed ...

  8. 移植FreeModbus+ModbusMaster+STM32至RT-Thread（3、4阶段）

    一.简介及进展 经过一个多月的努力,目前项目开发已进入最后阶段.虽然比预期时间有些延迟,但也收获不少,边工作边开源的效率确实还有待提高. 简单说下目前的进展吧 1.目前项目已经在Github中开源,大 ...

  9. Vmware ESX 5.0 安装与部署

    近期我公司部署了虚拟化,採购了两台Dell R710的server(CPU:64位双核,主频:2.4GHZ, 32G 内存.硬盘:2块300G做Riad 1.3块2T做Riad 5 .10块网卡),在 ...

  10. 使用ORACLE SQL Tuning advisor快速优化低效的SQL语句

    ORACLE10G以后版本的SQL Tuning advisor可以从以下四个方面给出优化方案 (1)为统计信息丢失或失效的对象收集统计信息   (2)考虑优化器的任何数据偏差.复杂谓词或失效的统计信 ...