格式布局

一、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. Eclipse启动时提示fail to create the Java Virtual Machine问题的解决

    今天偶然打开Eclipse.发现无法打开,出现例如以下提示: 后来经过上网查询.发现是eclipse.ini文件的问题,打开eclipse安装文件夹下的eclipse.ini文件: -startup ...

  2. CF799B T-shirt buying

    题目大意 有一些衣服,它们有价格.正面的颜色和反面的颜色.现有一群顾客按顺序来买存在某颜色且价格最低的衣服(不存在则不会买),求每个顾客花了多少钱. 思路 #include <cstdio> ...

  3. Linux下RTC时间的读写分析【转】

    本文转载自:http://blog.csdn.net/little_walt/article/details/52880840 Linux系统下包含两个时间:系统时间和RTC时间. 系统时间:是由主芯 ...

  4. Codeforces--630A--Again Twenty Five! （水题）

     Again Twenty Five! Time Limit: 500MS   Memory Limit: 65536KB   64bit IO Format: %I64d & %I64u ...

  5. Python 39 数据库

    一:数据存储引擎 1. 什么是引擎? 一个功能的核心部分 引擎可以被分类 例如: 自然 增压 汽油 柴油 混合动力 天然气 核动力 汽油:动力弱,噪音小,震动小 柴油:动力强,污染大,噪音大,震动大 ...

  6. oen /var/run/nginx.pid failed

    nginx: [error] open() "/var/run/nginx.pid" failed (2: No such file or directory) [root@TES ...

  7. HTML+CSS+JS总结

    ==================HTML(超文本标记语言)========== <!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前.此标签可告 ...

  8. SQLServer2008 有用的判断函数

    ISNULL(参数1,参数2) 若参数1为空,则返回参数2 NULLIF(参数1,参数2) 若参数1和参数2不等,则返回参数1 若参数1和参数2相等,则返回NULL 例子:ISNULL(NULLIF( ...

  9. java基础学习四

    一.java中的基本数据类型 二.double和float精度不准的问题 double和float本身确实存在某种缺陷,不能用于精确计算. 解决办法: 用java.math.BigDecimal,通过 ...

  10. Vue初级-样式

    整个网页不仅有标签还有css进行渲染,所以,现在讲讲在vue里面加入你想加的css. 在不用vue的时候,有一种内联方式加入css(大概是<div style="..."&g ...