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="">
随机推荐
- 黑马程序猿 ---------- Java网络技术之 ---正則表達式 （Day06）
---------------------- ASP.Net+Unity开发..Net培训.期待与您交流. ---------------------- 正則表達式 正則表達式:基本知识 1 字符, ...
- Winsock基础编程
Winsock基础编程 Socket的英文原义是"孔"或"插座".作为BSD UNIX的进程通信机制,取后一种意思.通常也称作"套接字",用 ...
- asp.net2.0安全性(1)－－用户角色篇(代码实现2)--转载来自车老师
加载所有用户 MembershipUserCollection user = Membership.GetAllUsers(); listUser.DataSource = user; listUse ...
- 性能测试之LoardRunner 自动关联
1.什么是自动关联? 2.实例介绍 以下是详细介绍: 自动化关联:它是VuGen提供的自动化扫描关联处理策略,它的原理是对同一个脚本运行和录制时的服务器返回进行比较,来自动查找变化的部分,并且提示是否 ...
- [置顶] Objective-C ,/,ios,/iphone开发基础:协议（protocol）
protocol协议时为了补充Objective-C 只能单继承的缺陷而增加的一个新功能.Objective-C重所有的方法都是虚方法,所以在oc重也就没有关键字 virtual一说,有了协议可以补充 ...
- Js版游戏打砖块开发过程详细
最近对js的小游戏开发来了兴趣,前段时间由于回答度娘知道的提问写了个贪吃蛇,虽然难度不大并不复杂,感觉还挺有意思.感觉小时候玩过的什么俄罗斯方块,坦克大战什么的都可以试着用js实现下,这天来了兴致又想 ...
- Filter和FilterChain具体的使用说明
一.Filter的介绍及使用 什么是过滤器? 与Servlet类似,过滤器是一些web应用程序组件,能够绑定到一个web应用程序中.可是与其它web应用程序组件不同的是,过滤器是"链&quo ...
- Effective C++_笔记_条款05_了解C++默认编写并调用哪些函数
(整理自Effctive C++,转载请注明.整理者:华科小涛@http://www.cnblogs.com/hust-ghtao/) 直接上代码: 1: class Empty{}; 如果你写了这样 ...
- Servlet过滤器——仿盗链过滤器
1.概述 介绍如何使用过滤器技术,防止通过其他URL地址直接访问本站资源.运行本实例,当URL地址不是本站地址时,在网页中将显示错误提示信息. 2.技术要点 主要应用request对象的getHead ...
- response.sendRedirect 传递参数的问题
response.sendRedirect是通过浏览器来做转向的. 假设在A.jsp页面设置request.setAttribute("username","admin& ...