html 相对定位绝对定位 css + div

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 0 Transitional//EN"
"http://www.worg/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.worg/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=gb2312" />
<title>Div + CSS Example, Wayhome's Blog</title>
<style type="text/css">

</style></head>
<body>
<div style="position:absolute; top:5px; right:20px; width:200px;
height:180px; background:#00FF00;">
position: absolute;<br />
top: 5px;<br />
right: 20px;<br />
<div style="position:absolute; left:20px; bottom:10px;
width:100px; height:100px; background:#00FFFF;">
position: absolute;<br />

left: 20px;<br />
bottom: 10px;<br />
</div>
</div>
<div style="position:absolute; top:5px; left:5px; width:100px;
height:100px; background:#00FF00;">
position: absolute;<br />
top: 5px;<br />
left: 5px;<br />
</div>
<div style="position:relative; left:150px; width:300px; height:50px;
background:#FF9933;">
position: relative;<br />
left: 150px;<br />
<br />
width: 300px; height: 50px; <br />
</div>
<div style="text-align:center; background:#ccc;">
<div style="margin:0 auto; width:600px;
background:#FF66CC; text-align:left;">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<div style="padding:20px 0 0 20px; background:#FFFF00;">
padding: 20px 0 0 20px;
<div style="position:absolute; width:100px; height:100px;
background:#FF0000;">position: <span style="color:#fff;
">absolute</span>;</div>
<div style="position:relative; left:200px; width:500px;
height:300px; background:#FF9933;">
position: <span style="color:blue;">relative</span>;<br
/>
left: 200px;<br />
<br />
width: 300px;<br />
height: 300px;<br />
<div style="position:absolute; top:20px; right:20px;
width:100px; height:100px; background:#00FFFF;">
position: absolute;<br />
top: 20px;<br />
right: 20px;<br /></div>
<div style="position:absolute; bottom:20px; left:20px;
width:100px; height:100px; background:#00FFFF;">
position: absolute;<br />
bottom: 20px;<br />
left: 20px;<br />
</div>
</div>
</div>
</div>
</div>
</body>
</html>

html 相对定位绝对定位 css + div的更多相关文章

css+div网页设计（二）--布局与定位
在网页设计中,能否控制好各个模块中在页面中的位置是非常关键的,与传统的表格定位不同,css+div定位方式更加的灵活,本篇博客将为大家介绍css+div的布局与定位. 一.盒子模型由图可以看出盒子 ...
CSS+DIV定位分析(relative,absolute,static,fixed)
在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果.今天研究了一下,总算有所 ...
（转）CSS+DIV float 定位
来自:http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能 ...
CSS+DIV布局中absolute和relative区别
原文:http://developer.51cto.com/art/201009/225201.htm 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定 ...
CSS + DIV 让页脚始终底部
一前言经常设计页面时用到三层DIV,头DIV与脚DIV一般固定高度,而中间层DIV根据内容的多少,高度不定,我们经常希望但内容很少时,脚DIV保持在底部,当内容很多时,脚DIV被中间内容挤到下面, ...
HTML CSS + DIV实现整体布局
HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面理解盒子模型实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...
HTML CSS + DIV实现局部布局
HTML CSS + DIV实现局部布局 HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标: 使用d ...
[置顶] CSS+DIV总结
HTML在Web飞速发展的过程中起着重要作用,有着重要地位.HTML初衷是为了表达标签(<p>.<table>)的内容信息.同时文档布局由浏览器来完成,不使用任何格式 ...
精通CSS+DIV网页样式与布局--初探CSS
CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法. ...

随机推荐

Selenium系列之--测试框架断言【转】
selenium提供了三种模式的断言:assert .verify.waitfor 1)Assert(断言) 失败时,该测试将终止. 2)Verify(验证) 失败时,该测试将继续执行,并将错误记入日 ...
Ioc 器管理的应用程序设计，前奏：容器属于哪里？控制容器的反转和依赖注入模式
Ioc 器管理的应用程序设计,前奏:容器属于哪里? 我将讨论一些我认为应该应用于“容器管理”应用程序设计的原则. 模式1:服务字典字典或关联数组是我们在软件工程中学到的第一个构造. 很容易看到使 ...
数据结构与算法问题 AVL二叉平衡树
AVL树是带有平衡条件的二叉查找树. 这个平衡条件必须保持,并且它必须保证树的深度是O(logN). 一棵AVL树是其每一个节点的左子树和右子树的高度最多差1的二叉查找树. (空树的高度定义为-1). ...
2016/3/20 数组定义数组遍历超全局数组数组元素设置（in_array() 、array_reverse()、count()、array_unique()、unset()、array_values、array_merge、array_push）列表实例
一.数组定义 php数组与其他语言的数组的不同: 其他例如java语言 :同一种类型数据的集合. php:数组可以存储任何类型的数据.同一个数组中可以放int类型也可以放string类型 ①索引数组的 ...
SQL外键的作用
貌似很有用,但没有真正用过: SQL的主键和外键的作用: 外键取值规则:空值或参照的主键值. (1)插入非空值时,如果主键表中没有这个值,则不能插入. (2)更新时,不能改为主键表中没有的值. (3) ...
Tju 4119. HDFS
4119. HDFS Time Limit: 5.0 Seconds Memory Limit: 5000KTotal Runs: 225 Accepted Runs: 77 In HDF ...
C#使用 webBrowser 控件总结
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
Basic Queries (LINQ to XML)
https://docs.microsoft.com/en-us/dotnet/csharp/programming-guide/concepts/linq/basic-queries-linq-to ...
【FFT初识】
FFT在用于解决多项式乘法A*B(A和B为多项式,形如a0+a1*x^1+a2*x^2....)的时候,通俗地解释就是: 原理:先根据各自的系数各自转化为对应的向量(O(nlogn)),然后向量相 ...
html/html5中的download属性
兼容性不是很好, 只是了解一下: 主要表现在跨域策略的处理上,Chrome浏览器和FireFox浏览器: 如果需要下载的资源是跨域的,包括跨子域,在Chrome浏览器下,使用download属性是可以 ...

html 相对定位 绝对 定位 css + div