格式布局

一、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. AVPlayer的使用，带缓冲

    #import "ViewController.h" #import <AVFoundation/AVFoundation.h> @interface ViewCont ...

  2. Win8.1更新之后没法启动，怎样修复？

    1.问题 今天开笔记本的时候,发现电脑没法启动.屏幕显示"Recovery Your PC needs to be repaired...". 详细内容见下图: 2.解决的方法 2 ...

  3. css3中 弹性盒模型布局之box-flex

    box-flex:也就是让子容器针对父容器的宽高属性依照一定的规则来划分 Eg: html代码: <div class="wrap"> <div class=&q ...

  4. compact处理流程分析

    compact处理流程分析 compact的处理与split同样.由client端与flush时检查发起. 针对compact另一个在rs生成时生成的CompactionChecker线程定期去检查是 ...

  5. 【IOS 开发】Object - C 入门 之 数据类型具体解释

    作者 : 韩曙亮 转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/38544659 1. 数据类型简单介绍及输出 (1) 数据类型 ...

  6. SpringMVC + hibernate 配置文件

    web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="htt ...

  7. luogu2765 魔术球问题 网络流

    题目大意: 假设有n根柱子,现要按下述规则在这n根柱子中依次放入编号为1,2,3,...的球.(1)每次只能在某根柱子的最上面放球.(2)在同一根柱子中,任何2个相邻球的编号之和为完全平方数.试设计一 ...

  8. WebView 用法总结

    1.AndroidManifest.xml中必须使用许可"android.permission.INTERNET",否则会出 Web page not available 错误. ...

  9. string 类型的翻转

    #include <string>#include <iostream>#include <stack> int main() { std::string str= ...

  10. ”W: GPG 错误：http://ppa.launchpad.net lucid Release: 由于没有公钥，无法验证下列签名：“的问题

    在安装更新时,即在运行,命令行sudo apt-get update 或者运行更新管理器的时候,出现如下错误: W: GPG 错误:http://ppa.launchpad.net lucid Rel ...