格式布局

一、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的除去一行的位置的左上或右上显示。

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

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

设置超链接的样式示例：

附：cursor：pointer    鼠标指到上面时的形状

©                  版权符号©

半透明效果：

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

在样式表中的代码为：

.box

{

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

}

<!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>
#a
{
border:2px solid blue;
height:100px;
width:100px;
background-color:#0F6;
right:60px;
bottom:70px;
position:fixed;}
.b
{
border:2px solid blue;
height:100px;
width:100px;
background-color:#0F6;
right:0px;
bottom:0px;
position:absolute;}
.c
{
border:2px solid red;
width:400px;
height:200px;}
.d
{
border:2px solid red;
width:400px;
height:200px;
position:absolute;}
#aaa
{
border:2px solid yellow;
background-color:#9F3;
height:100px;
width:100px;
left:30px;
top:30px;
position:fixed;}
#bbb
{
border:2px solid yellow;
background-color:#9F3;
height:100px;
width:100px;
left:30px;
top:30px;
position:relative;}
</style>
</head>

<body>
<div id="a">广告招商</div>
<div class="c">c<div class="b">b</div></div>
<div class="d">d<div class="b">bb</div></div>
<div id="aaa">aaa</div>
<div id="bbb">bbb</div>

</body>
</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>
#aaa
{
border:2px solid yellow;
background-color:#9F3;
height:100px;
width:100px;
left:30px;
top:30px;
position:fixed;
overflow:visible;
}
#bbb
{
border:2px solid yellow;
background-color:#9F3;
height:100px;
width:100px;
left:60px;
top:60px;
position:relative;}
#ccc
{
border:#0C0 solid 2px;
height:300px;
width:100px;
float:right;}
#ddd
{
border:#0C0 solid 2px;
height:300px;
width:100px;
float:left;}
</style>
</head>

<body><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

<div id="ccc">广告位置招商</div><div id="ddd">广告位ddd</div><div id="ddd">广告位eee</div><div id="ccc">广告位置招商fff</div>
<!--<div id="aaa">aaa<div id="bbb">bbb</div></div> -->

</body>
</html>

html第五节课的更多相关文章

  1. centos shell脚本编程1 正则 shell脚本结构 read命令 date命令的用法 shell中的逻辑判断 if 判断文件、目录属性 shell数组简单用法 $( ) 和${ } 和$(( )) 与 sh -n sh -x sh -v 第三十五节课

    centos   shell脚本编程1 正则  shell脚本结构  read命令  date命令的用法  shell中的逻辑判断  if 判断文件.目录属性  shell数组简单用法 $( ) 和$ ...

  2. centos lamp/lnmp阶段复习 以后搬迁discuz论坛不需要重新安装，只需修改配置文件即可 安装wordpress 安装phpmyadmin 定时备份mysql两种方法 第二十五节课

    centos  lamp/lnmp阶段复习 以后搬迁discuz论坛不需要重新安装,只需修改配置文件即可 安装wordpress  安装phpmyadmin  定时备份mysql两种方法  第二十五节 ...

  3. centos Linux系统日常管理2 tcpdump,tshark,selinux,strings命令, iptables ,crontab,TCP,UDP,ICMP,FTP网络知识 第十五节课

    centos  Linux系统日常管理2  tcpdump,tshark,selinux,strings命令, iptables ,crontab,TCP,UDP,ICMP,FTP网络知识 第十五节课 ...

  4. centos 特殊权限 各种搜索命令 lsattr ,chattr,suid,sgid,sbit,file,type是否是内置命令,stat文件属性 ,whereis,locate,find,ln 内部命令和外部命令 第五节课

    centos 特殊权限 各种搜索命令 lsattr ,chattr,suid,sgid,sbit,file,type是否是内置命令,stat文件属性 ,whereis,locate,find,ln   ...

  5. 风炫安全web安全学习第三十五节课 文件下载和文件读取漏洞

    风炫安全web安全学习第三十五节课 文件下载和文件读取漏洞 0x03 任意文件下载漏洞 一些网站由于业务需求,往往需要提供文件下载功能,但若对用户下载的文件不做限制,则恶意用户就能够下载任意敏感文件, ...

  6. 风炫安全WEB安全学习第二十五节课 利用XSS键盘记录

    风炫安全WEB安全学习第二十五节课 利用XSS键盘记录 XSS键盘记录 同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源.所以xyz.com下的js脚本采用a ...

  7. 《linux就该这么学》第十五节课：第14,15章，dhcp服务和邮件系统

    (借鉴请改动) 13章收尾 13.6.分离解析技术    1.在主配置文件中改两个any         2.编辑区域配置文件,写入acl,使用match匹配                      ...

  8. 《linux就该这么学》第五节课，shell脚本的各种语句！

    第四章shell语句 (据课本和虚拟机实验排版,借鉴请改动)               4.2:shell脚本   脚本包括:脚本声明,脚本注释,脚本内容和命令 例:#!/bin/bash      ...

  9. Linux第五节课学习笔记

    Linux系统中的一切都是文件,命令就是命令文件. 命令执行分为4步: 1.路径+命令名称. 2.别名.可用alias命令创建别名. 3.内部命令. 4.外部命令.99%的情况都属于第四种.定义这些路 ...

随机推荐

  1. pthread_rwlock pthread读写锁

    原文: http://www.cnblogs.com/diegodu/p/3890450.html 使用读写锁 配置读写锁的属性之后,即可初始化读写锁.以下函数用于初始化或销毁读写锁.锁定或解除锁定读 ...

  2. 多校第六场 1003 hdu 5355 Cake(贪心)

    题目链接:(数据加强后wa了) hdu 5355 题目大意: 给出一个蛋糕.切成1~n大小的n块.问是否能在不继续分割的情况下拼凑出m等份. 题目分析: 首先我们是可以知道每份蛋糕的尺寸的,利用n*( ...

  3. Thrift源代码分析（八）--总结加一个完整的可执行的Thrift样例

    前面七篇文章分析了Thrfit的方方面面,看到这里时应该对Thrift有了深入的理解. Thrift源代码分析(一)-- 基本概念 Thrift源代码分析(二)-- 协议和编解码 Thrift源代码分 ...

  4. C语言里全局变量管理

    C语言里信息封装比較弱,仅仅有静态变量的文件作用域. 假设不加约束.非常easy造成全局变量满天飞. 假设定义一个全局结构体.把全局变量都放到这个GlobleVariate里,应该好管一些,至少比裸奔 ...

  5. nginx+tomcat反复请求

    好久不写技术文章了,越发的认为单纯的讲技术没啥意思.怪不得知乎越来越火.由于大家都喜欢看故事.不喜欢硬生生的技术文章.笔者今天就来就给大家讲故事:) 近期站点压力突然增大,把带宽都占满了,訪问网页发现 ...

  6. 【POJ 3322】 Bloxorz I

    [题目链接] http://poj.org/problem?id=3322 [算法] 广度优先搜索 [代码] #include <algorithm> #include <bitse ...

  7. git强制放弃本地更改

    git fetch --allgit reset --hard origin/master origin是服务器上的本地仓库master是分支

  8. sql将一个表中的数据插入到另一个表中

    sql将一个表中的数据插入到另一个表中 列名不一定要相同,只要你在HH中列出要插入列的列表跟select   from   mm表中的选择的列的列表一一对应就可以了,当然两边的数据类型应该是兼容的.  ...

  9. php循环跳出

    PHP中的循环结构大致有for循环,while循环,do{} while 循环以及foreach循环几种,不管哪种循环中,在PHP中跳出循环大致有这么几种方式: 代码: <?php $i = 1 ...

  10. JavaScript学习杂记

    1.DOM层级:document(document) --> doctype,documentElement(html) --> head,body(body). 2.offset, cl ...