margin方式定位Div:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<style type="text/css">
.a1,.b1,.c1{background-color:#aaa;margin:5px;}
.a1{ height:50px;width:100px;}
.b1{ height:50px; width:100px;}
.c1{ margin-top:-110px; margin-left:110px; height:105px;}
</style>
<body>
<div class="a1" >a1</div>
<div class="b1">b1</div>
<div class="c1">c1</div>
</body>
</html>
position方式定位Div:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>position</title>
<style type="text/css">
body{position:relative;}
#leftTop{width:100px; height:200px; background-color:#CCCCCC; position:absolute;left:0;top:0;}
#leftBottom{width:100px; height:150px; background-color:#CCCCCC;margin-top:210px;float:left; }
#box{width:400px; margin-left:10px; height:360px; background-color:#CCCCCC;float:left;}
</style>
<style xml:base="/C:/Documents%20and%20Settings/Administrator/%E6%A1%8C%E9%9D%A2/" type="text/css" id="webdeveloper-edit-css-style-0">body{position:relative;}
#leftTop, #leftBottom, #box {background-color: #CCCCCC;}
#leftTop{ width:100px; height:200px; position:absolute;left:0;top:0;}
#leftBottom{width:100px; height:200px; margin-top:210px;float:left; }
#box{width:800px; margin-left:10px; height:410px; float:left;}
</style>
</head>
<body>
<div id="leftTop"></div>
<div id="leftBottom"></div>
<div id="box"></div>
</body>
</html>
float方式定位Div:
<!DOCTYPE html PUBLIC"-//qq8697865//史诺比//ZH" "http://www.w3c.org/tr/html4/strict.dtd">
<html><head><title></title>
<style type="text/css">
*{padding:0px auto;margin:0px auto;}
.a1,.a2,.a3{background-color:#aaa;margin:5px;}
.a1{width:20%;height:200px;float:left}
.a2{width:77%;height:310px;float:right}
.a3{width:20%;height:100px;float:left}
</style>
</head>
<body>
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
</body>
</html>
分享到:
相关推荐
第10章 理解CSS定位与div布局 10.1 div 标记与 span 标记 10.2 盒子模型 10.3 元素的定位 10.4 定位实例一:轻轻松松给图片签名 10.5 定位实例二:文字阴影效果 第11章 CSS+div布局...
简洁的介绍了DIV+CSS网页编程定位方法,适合初学者参考。
第10章 理解CSS定位与div布局 10.1 div 标记与 span 标记 10.2 盒子模型 10.3 元素的定位 10.4 定位实例一:轻轻松松给图片签名 10.5 定位实例二:文字阴影效果 第11章 CSS+div...
理解CSS定位与div布局 - CSS/DIV布局专题讲解 - 第7课 CSS排版 - CSS/DIV布局专题讲解 - 第8课 网页变幻 - CSS/DIV布局专题讲解 - 第9课 CSS与其他技术 CSS与Javascript的综合应用 - CSS与其他技术 - 第1课 ...
CSS+DIV定位浅析:relative,absolute,static,fixed。
Div CSS网站布局视频教程第10课_理解CSS定位与div布局
与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离。提起DIV+CSS组合,还要从XHTML说起。XHTML是一种在HTML(标准通用标记语言的子集)基础上优化和改进的新语言,目的是基于XML...
div+css定位代码示例 说明了绝对和相对
div+css 定位浅析
第10章 理解CSS定位与div布局 10.1 div标记与span标记 10.1.1 概述 10.1.2 div与span的区别 10.2 盒子模型 10.2.1 盒子模型的概念 10.2.2 border 10.2.3 padding 10.2.4 margin 10.3 ...
第10章 理解css定位与div布局 第11章 css+div布局方法剖析 第12章 css+div美化与布局实战 第3部分 css混合应用技术篇 第13章 css与javascript的综合应用 第14章 css与xml的综合运用 第15章 css与ajax的综合应用 第4...
第10章 理解CSS定位与div布局 10.1 div 标记与 span 标记 10.2 盒子模型 10.3 元素的定位 10.4 定位实例一:轻轻松松给图片签名 10.5 定位实例二:文字阴影效果 第11章 CSS+div布局...
借助CSS定位来实现,你将右下角的那个DIV放在另一个DIV里面,参考代码如下示: 复制代码代码如下: <div id=”box1″> <div id=”box2″>测试内容</div> </div> <style> <!– #box1{width:600px;height:600...
教程名称:后盾网DIV CSS系列视频教程(24集)课程目录:0.DIVCSS视频教程之css_11.DIVCSS视频教程之position定位属性Z_INDEX堆迭顺序10 DIV CSS视频教程之css背景属性11.DIV.CSS视频教程-表格样式12.DIV.CSS视频...
以个人博客为例,用 DIV+CSS 的布局方式来重构页面,页面大致分为顶部部分、导航部分、侧边栏、主体内容和底部部分。其结构代码如下: ``` <div id=”header”></div> /* 页面头部*/ <div id="menu"></div> /* ...
第10章 理解CSS定位与div布局 10.1 div 标记与 span 标记 10.2 盒子模型 10.3 元素的定位 10.4 定位实例一:轻轻松松给图片签名 10.5 定位实例二:文字阴影效果 第11章 CSS+div布局...
第10章 理解CSS定位与div布局 10.1 div 标记与 span 标记 10.2 盒子模型 10.3 元素的定位 10.4 定位实例一:轻轻松松给图片签名 10.5 定位实例二:文字阴影效果 第11章 CSS+div布局...
DIV-CSS网页开发相关基础知识介绍。DIV+CSS是WEB标准(网站标准)中常用的术语之一,通常为了说明... 用div盒模型结构给各部分内容划分到不同的区块,然后用css来定义盒模型的位置、大小、边框、内外边距、排列方式等。
css+div,dreanwear,js控制div相对定位
资源中包含html+CSS+div的布局练习,其中包括固定布局、流式布局、浮动布局、定位布局等布局方式的练习Demo,另外还对CSS中的一些特殊的属性进行了练习,包括position、float、display等属性,对每一个属性和布局的...