<!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. RabbitMQ通过shovel插件迁移数据

    前言 生产环境中会遇到RabbitMQ数据迁移的场景,例如:切换云服务厂商.不同Region之间数据迁移.新搭建RabbitMQ实例,数据需要同步至新的RabbitMQ实例. 前提条件: 源Rabbi ...

  2. iOS音频播放 (四)：AudioFile 转

    原文出处 : http://msching.github.io/blog/2014/07/19/audio-in-ios-4/ 前言 接着第三篇的AudioStreamFile这一篇要来聊一下Audi ...

  3. 6 JobApp默认视图开发

    第一步:引入angularjs 添加app模块 现在我们正式进入开发,下面是我们在上一节建立的目录结构: 我们需要再src路径下,新建index.html文件,先引入angularjs文件: < ...

  4. 2016/04/29 ①cms分类 ② dede仿站制作 步骤 十个步骤 循环生成菜单 带子菜单的菜单 标签 栏目 栏目内容列表 内容图片列表

    cms 系统还有: phpcms     企业站 Xiaocms  织梦  企业站 wordpress (博客) Ecshop 商城 Ecmall 多用户 Discms 记账 方维 订餐 团购 CMS ...

  5. Codeforces 757 D. Felicity's Big Secret Revealed 状压DP

    D. Felicity's Big Secret Revealed   The gym leaders were fascinated by the evolutions which took pla ...

  6. a simple and universal interface between web servers and web applications or frameworks: the Python Web Server Gateway Interface (WSGI).

    WSGI is the Web Server Gateway Interface. It is a specification that describes how a web server comm ...

  7. 聚合类新闻client初体验

    初体验的产品:今日头条(ios3.6).百度新闻(ios4.4.0).ZAKER(ios4.4.5).鲜果(ios3.8.7).中搜搜悦(ios4.0.1).Flipboard(ios2.3.9) 1 ...

  8. 在myeclipse中拷贝一个工程,修改部署的名字

        在MyEclipse中,经常练习的时候需要建立多个工程,但是为了方便,通常的作法是:复制一个工程,然后直接粘贴,但是,部署以后会发现,使用新的工程名访问不了,报404错误. 其原因是没有修改W ...

  9. 三.OC基础--1.NSString的创建和使用,2多文件开发,3类方法,4封装

    三:OC--1.NSString的创建和使用, 1,创建常量字符串,注意使用“@“符号. NSString *astring = @"This is a String!"; //后 ...

  10. I.MX6 android mkuserimg.sh

    /************************************************************************** * I.MX6 android mkuserim ...