html练习（5）
这个练习主要简单的展示了据对定位和相对定位；
在此说下html的定位：
1.static定位
这个是默认的方式。对static而言。left和right是不生效的。
2.relative定位（相对定位）
元素框偏离自身流相应的位置（靠left和top定位），元素仍然保持为定位前的形状，它原本所占的空间仍保留。从这一角度看，好像该元素仍然在文档流/标准流中一样。
注意：relative的參照点是它原来的位置，进行移动
3.absolute定位（绝对定位）
相当于元素从原来的位置脱离。并让出自己的空间，后面的元素就会占有让出的空间。
注意：absolute定位是相对于离自己近期的那个非标准流盒子而言的。
4.fixed定位
元素框的表现类似于将position设置为absolute，只是其包括块是视窗本身。
代码：
html文件（test5.html）:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>作者：一叶扁舟</title><!--
/*练习绝对定位和相对定位*/
--><meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="./test5.css">
</head>
<body>
<h1>练习html的定位，包含绝对定位和相对定位</h1>
<div class = "class1">
相对定位
<div class = "style1">这是第一个方格</div>
<div class = "style1" id = "style2">这是第二个方格</div>
<div class = "style1">这第三个方格</div>
<div class = "style1">这是第四个方格</div>
</div>
<div class ="class1">
绝对定位
<div class = "style1">这是第五个方格</div>
<div class = "style1" id = "style3">这是第六个方格</div>
<div class = "style1">这第七个方格</div>
<div class = "style1">这是第八个方格</div>
</div>
</body>
</html>
CSS文件（test5.css）:
.style1 {
width:100px;
height:70px;
background-color:red;
margin-top:12px;
margin-left:3px;
float:left;
}
body {
width:800px;
height:500px;
border:2px solid blue;
background-color:green;
}
#style2 {
/*使用相对定位*/
position:relative;
left:110px;
top:90px;
}
div.class1 {
width:700px;
height:200px;
border:1px solid gray;
}
#style3 {
/*使用绝对定位*/
position:absolute;
left:400px;
top:300px;
}
执行的效果图：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTY2MjMyMA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
随机推荐
- 执行shell脚本提示“syntax error near unexpected token for((i=0;i<$length;i++))”
sh脚本例如以下: #!/usr/bin/env bash county="3 4 5 6 7 8 9 10 11 12 16 29 39 44 53 62 72 84 97 115 128 ...
- N使用exus2打造企业maven仓库（三）
假设项目中,我没有使用maven,我应该做出选择,或为项目.或者用它来推动这个项目从maven.有人会问,为什么maven?无需maven我们没有很好的操作. 这里,只说两件事情我最欣赏:第一点是管理 ...
- java实现指定文件扫描目录
package com.miss.time1230.io; import java.io.File; import java.util.Scanner; /** * @author MISS * 描述 ...
- 1.1-学习Opencv与MFC混合编程之---利用画图函数，生成视频，并写入视频文件
源代码地址:http://download.csdn.net/detail/nuptboyzhb/3961674 写视频文件 Ø 新建菜单项,Learning OpenCV——> OpenCVr ...
- Apple iOS MDM开发流程
一年前曾参与过中石油的一个移动平台项目,实现了通过MDM对iOS设备进行管理.由于苹果对于mdm这块的接口及开发流程只向几个合作伙伴进行了分享,并没有对具体实现的文档进行公开,所以这方面的资料非常少. ...
- EasyUI - 使用一般处理程序 HttpHandler （.ashx）
以easyui中的panel中,使用url加载数据为列. 效果: html代码: <div id="p" style="padding: 10px;"&g ...
- Centos系统各种日志存详解
Centos系统各种日志存储路径和详细介绍 Linux常见的日志文件详述如下 1./var/log/boot.log(自检过程) 2./var/log/cron (crontab守护进程crond所派 ...
- Maven插件之portable-config-maven-plugin(不同环境打包)
在大型的项目组中,分不同的开发环境,测试环境,生产环境(说白了就是配置文件不同,或者数据源,或者服务器,或者数据库等);问题来了,如何使用Maven针对不同的环境来打包呢? Maven提供了Profi ...
- CABasicAnimation学习Demo 包含了一些经常使用的动画效果
个人写的一些样例: // // ViewController.m // CABasicAnimationDemo // // Created by haotian on 14-6-13. // Cop ...
- vs2005及以上版本的程序分发问题
我们使用vs2005及以上版本编译的应用程序(C/C++),在客户机器运行时,会出现: “由于应用程序的配置不正确,应用程序未能启动,重新安装应用程序可能会纠正这个问题” 那么,我们怎么解决这个问题呢 ...