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. Failed to upgrade Oracle Cluster Registry configuration(root.sh)

        近期在给客户基于Suse 11 sp3安装Oracle 10g RAC,在安装完clusterware运行/u01/app/crs/root.sh时收到错误提示.Failed to upgra ...

  2. [置顶] SQL日期类型

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

  3. Android蓝牙开发深入解析

    1. 使用蓝牙的响应权限  代码如下: <uses-permission android:name="android.permission.BLUETOOTH" /> ...

  4. 面试之ajax原理（转载）

    总结1 总结2 AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术, 是几种原有技术的结合体. ...

  5. Java多线程之synchronized（五）

    上篇介绍了用synchronized修饰static方式来实现“Class 锁”,今天要介绍另一种实现方式,synchronized(class)代码块,写法不一样但是作用是一样的.下面我附上一段代码 ...

  6. 猪猪的机器学习笔记（十七）隐马尔科夫模型HMM

    隐马尔科夫模型HMM 作者:樱花猪 摘要: 本文为七月算法(julyedu.com)12月机器学习第十七次课在线笔记.隐马尔可夫模型(Hidden Markov Model,HMM)是统计模型,它用来 ...

  7. JUnit4的使用2

    package com.imooc.test.aware; import org.junit.Test; import org.junit.runner.RunWith; import org.jun ...

  8. S2S：分享出的营销机遇

    (速途网专栏 作者:高学争)经常在网上购物的你,有没有遇到过这样的问题:你知道自己想买什么,但是在淘宝上一搜,出来了数以万计的同类型,他们有着同样的价位(甚至可能是同样的图片),但是由不同的商家提供, ...

  9. Qt在各平台上的搭建qt-everywhere

    Qt for windows7-64bit 在电脑上安装mingw(搜索mingw for windows),将C:\MinGW\bin添加进环境变量,打开命令行输入gcc --version和g++ ...

  10. 2015暑假acm短训小结

    时间很快,短训已经结束,短短20天,心里有一些思绪想要记下. 收获: 从最近发的随笔中可以看出,做得最多的是搜索——Dfs,Bfs.对于搜索,如何描述状态,如何压缩状态,如何决定下一个结点,是否可以剪 ...