<!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. MongoDB使用入门

    1.MongoDB的安装 步骤一:下载MongoDB 下载安装包:http://fastdl.mongodb.org/linux/mongodb-linux-i686-2.0.4.tgz 步骤二:设置 ...

  2. soapUI系列之—-05 JDBC Request & Xpath Match

    一.配置JDBC Connection String 1. 以Oracle为例,要使用JDBC数据库就要先下一个 oracle JDBC的驱动,下载成功后把它放到soapUI安装目录下的  bin/e ...

  3. 释怀我的诺亚尔 不用EF框架，完成完美实体映射，且便于维护！（AutoMapper，petapoco）

    释怀我的诺亚尔   不用EF框架,完成完美实体映射,且便于维护!(AutoMapper,petapoco) 最近,需要搭建一个新项目,在需求分析时确定数据库中需要创建多个存储过程.所以如果还是用原来E ...

  4. 深刻理解Java中形參与实參，引用与对象的关系

    声明:本博客为原创博客,未经同意.不得转载! 原文链接为http://blog.csdn.net/bettarwang/article/details/30989755 我们都知道.在Java中,除了 ...

  5. Redis管理key命令

    1 DEL key该命令用于在 key 存在时删除 key. 2 DUMP key 序列化给定 key ,并返回被序列化的值. 3 EXISTS key 检查给定 key 是否存在. 4 EXPIRE ...

  6. 2016/3/1 淘宝 腾讯 网易 css初始化代码 以及最基础的初始化

    淘宝官网(http://www.taobao.com/)样式初始化 body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, o ...

  7. 程序员的vim

    1,所有的Unix like系统都会内建vi文书编辑器,其他的文书编辑器则不一定会存在,但是目前我们使用比较多的是vim编辑器 vim具有程序编辑的能力,可以主动的以字体颜色辨别语法的正确性,方便程序 ...

  8. ubuntu中查看已安装软件包的方法

    ubuntu中查看已安装软件包的方法: 方法一:在新立得软件包管理器中,打到已安装,便可以看看有多少包被安装. 如果想把这些包的信息复制到一文件里,可用下面的方法. 方法二:在终端输入 sudo dp ...

  9. 《CMake实践》笔记一：PROJECT/MESSAGE/ADD_EXECUTABLE【转】

    本文转载自:http://www.cnblogs.com/52php/p/5681745.html 前言: 开发了5,6年的时间,如果没有KDE4,也许不会有人或者Linux发行版本重视cmake,因 ...

  10. Android Studio3.1.0升级问题记录

    每次升级Android Studio时,一般情况下Gradle版本的也会相应的升级,我之前Android Studio 3.0.1.Gradle 是4.1升级后为:Android Studio 3.1 ...