<!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">
<!--
body,td,th{font-family:Verdana;font-size:9px;}
-->
</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的更多相关文章

  1. css+div网页设计（二）--布局与定位

    在网页设计中,能否控制好各个模块中在页面中的位置是非常关键的,与传统的表格定位不同,css+div定位方式更加的灵活,本篇博客将为大家介绍css+div的布局与定位. 一.盒子模型 由图可以看出 盒子 ...

  2. CSS+DIV定位分析(relative,absolute,static,fixed)

    在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果.今天研究了一下,总算有所 ...

  3. （转）CSS+DIV float 定位

    来自:http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能 ...

  4. CSS+DIV布局中absolute和relative区别

    原文:http://developer.51cto.com/art/201009/225201.htm 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定 ...

  5. CSS + DIV 让页脚始终底部

    一 前言 经常设计页面时用到三层DIV,头DIV与脚DIV一般固定高度,而中间层DIV根据内容的多少,高度不定,我们经常希望但内容很少时,脚DIV保持在底部,当内容很多时,脚DIV被中间内容挤到下面, ...

  6. HTML CSS + DIV实现整体布局

    HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...

  7. HTML CSS + DIV实现局部布局

    HTML CSS + DIV实现局部布局 HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标: 使用d ...

  8. [置顶] CSS+DIV总结

         HTML在Web飞速发展的过程中起着重要作用,有着重要地位.HTML初衷是为了表达标签(<p>.<table>)的内容信息.同时文档布局由浏览器来完成,不使用任何格式 ...

  9. 精通CSS+DIV网页样式与布局--初探CSS

    CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法. ...

随机推荐

  1. pycharm快捷键和一些常用的设置

    http://blog.csdn.net/pipisorry/article/details/39909057 在PyCharm /opt/pycharm-3.4.1/help目录下可以找到Refer ...

  2. while语句字符串的基本操作

    1,编码:对现在通用文字编码成计算机文字,便于储存,传递,交流. 最早的计算机编码是ACSII美国人创建的,包含英文字母,数字,以及特殊符号.总共是128个码位:2**7,因为计算机的底层只能识别:& ...

  3. instruction set汇总

    1 aarch64 它armv8-A架构的一种执行状态,之所以说它是一种执行状态是因为,armv8-A还有aarch32这个执行状态.aarch64是64位执行状态,aarch32是32位的执行状态. ...

  4. Class.forName() 详解

    主要功能 Class.forName(xxx.xx.xx)返回的是一个类 Class.forName(xxx.xx.xx)的作用是要求JVM查找并加载指定的类, 也就是说JVM会执行该类的静态代码段 ...

  5. 移动端和PC端有什么区别

    1.PC考虑的是浏览器的兼容性,而移动端开发考虑的更多的是手机兼容性,因为目前不管是android手机还是ios手机,一般浏览器使用的都是webkit内核,所以说做移动端开发,更多考虑的应该是手机分辨 ...

  6. RFC函数设置外部断点

  7. mysql 查看编码方式

    一. 查看数据库的字符集 show variables like 'character\_set\_%'; 输出: +--------------------------+--------+ | Va ...

  8. Python3中 对local和nonlocal 关键字的改善认识(新手向)

    nonlocal关键字用来在函数或其他作用域中使用外层(非全局)变量. nonlocal用于声明,修改嵌套作用域(enclosing 作用域,外层非全局作用域)中的变量,如下实例: #!/usr/bi ...

  9. hdu5396(区间DP)

    题目意思: 给定一个表达式,运算符没有优先级,求不同顺序计算,所有可能的得到的结果之和. 由于运算符没有优先级,所以有多种顺序去计算,设d[i][j]表示[i,j]区间表达式通过不同顺序计算,所以可能 ...

  10. css层叠上下文和层叠顺序

    普通元素的层叠水平优先由层叠上下文决定,因此,层叠水平的比较只有在当前层叠上下文元素中才有意义. 诸位千万不要把层叠水平和CSS的z-index属性混为一谈.没错,某些情况下z-index确实可以影响 ...