<!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>测试浮动</title>
<style type="text/css">
.wrapper{width:520px; background-color:#FFCCFF; float:left;}
.top{width:520px; background-color:#CCFFFF;}
.top dl{510px;}
.top dl dd{width:200px;margin-left:10px; margin-top:10px;}
.nexttop{ width:520px;margin-top:20px; float:left;background-color:#66FFFF;}
</style>
</head>
<body>
<div class="wrapper">
<div class="top">
<dl>
<dd>若不浮动会是怎么样的效果</dd>
<dd>好像dl dd 不受浮动影响</dd>
</dl>
</div>
<div class="nexttop">下半部分,不浮动,没有所谓的margin</div>
<div>啥也没有 在没有浮动的情况下,使用外部的颜色</div>
</div>
</body>
</html>
做了个小测试,<div>在不浮动的情况下,margin-top,margin-bottom,不起作用
但是<dl>下的<dd>标签,不受浮动的影响,没有浮动的情况下,margin-top,margin-bottom,照样起作用
分享到:
相关推荐
5. **浮动与清除**:float属性用于元素的浮动,clear属性用于清除浮动,它们是实现流式布局的重要工具。 6. **颜色和背景**:增加了更多的颜色单位(如rgba()、hsl()、hsla())和背景属性,如background-position、...
1. **HTML与DHTML的区别**:HTML主要关注静态内容的展示,而DHTML允许网页内容动态改变,如动画效果、响应式交互等。 2. **DOM(文档对象模型)**:DOM是HTML和XML文档的结构化表示,它定义了访问和操作这些文档的...
本手册全面涵盖了网页制作的核心技术,主要聚焦于DHTML(Dynamic HTML)的应用,同时也深入探讨了HTML(超文本标记语言)和CSS(层叠样式表)的基础与进阶知识。DHTML是HTML、CSS、JavaScript以及DOM(文档对象模型...
综上所述,这份《DHTML手册Cascading Style Sheet 2.0 中文手册》将帮助读者掌握DHTML的动态特性与CSS 2.0的布局技巧,提升网页开发的技能水平。无论是初学者还是经验丰富的开发者,都能从中受益,进一步优化网页的...
5. DHTML与JavaScript:了解如何使用JavaScript操作DOM,添加、删除和修改元素;利用事件处理(如`onclick`、`onmouseover`等)实现动态效果。 6. 动画和过渡:掌握CSS3的动画(`@keyframes`)和过渡(`transition`...
JavaScript是DHTML的关键部分,它是一种客户端脚本语言,允许在用户与网页交互时实时改变内容。例如,通过`document.getElementById()`可以获取指定ID的元素,然后修改其内容或样式。事件处理函数如`onclick`, `...
《CSS+div、css2.0中文样式表帮助手册、dhtml手册》是关于Web前端开发的重要参考资料,其中涵盖了CSS(层叠样式表)与div布局、DHTML(动态超文本标记语言)以及JavaScript的基础知识。以下是这些主题的详细解析: ...
2. **属性与值**:如`color`、`font-size`、`background`、`margin`等,以及如何使用单位(如px、em、%)。 3. **盒模型**:理解元素的边距、填充、边框和内容如何影响其最终尺寸。 4. **布局技术**:如浮动布局、...
DHTML和XHTML则分别代表动态HTML和可扩展超文本标记语言,它们是HTML的扩展和增强版本。 在开始Div+CSS布局之前,你需要具备一定的HTML基础知识,了解如何使用HTML标签来构建网页的基本结构。接下来,我们将按照...
- **浮动与定位**:浮动(float)常用于创建多列布局,定位(position)则可使元素相对于其正常位置进行移动。 - **响应式设计**:通过媒体查询(media queries)实现不同设备屏幕尺寸下的样式调整,打造跨平台...
- 属性定义了元素的样式,如`color`(颜色)、`font-size`(字体大小)、`margin`(外边距)、`padding`(内边距)等。 - CSS2.0引入了浮动(`float`)和定位(`position`)概念,这对于创建复杂的布局至关重要。 ...
此外,深入理解CSS选择器、盒模型、定位(positioning)以及浮动(floating)等概念,是提升Div+CSS布局技能的关键。 通过实践和不断的学习,你将逐渐掌握Div+CSS布局技巧,能够创建出更加复杂和精美的网页布局。...
- 浮动(float):常用于创建多列布局,元素可以向左或向右浮动。 - 定位(position):通过`position`属性实现绝对定位和相对定位,以控制元素在页面上的精确位置。 - 弹性布局(flexbox):适用于单轴布局,能轻松...
此外,浮动(float)、定位(positioning)和Flexbox或Grid布局也是CSS中的重要概念。 **HTML(超文本标记语言)**是构建网页内容的基础,它定义了网页的结构。HTML由一系列元素组成,每个元素都有特定的标签,如`...
例如,为了创建一个水平菜单,可以使用`#menu ul li`选择器去掉列表前的点,并设置浮动为`float:left`,然后通过`margin:0 10px`添加间距。如果想要菜单居右显示,可以将`float:right`应用于`#menu ul`。对于菜单项...
2. **属性**: 属性定义了元素的样式,如`color`、`font-size`、`background-color`、`margin`等。 3. **值**: 属性后跟一个值来指定样式,值可以是颜色、尺寸、百分比等,也可以是预定义的关键字,如`auto`、`none`...
...DHTML和XHTML是HTML的扩展,引入了动态交互和更严格的语法规则。 在开始布局之前,通常会先用Photoshop或Fireworks等...通过不断实践和学习,你可以进一步掌握浮动布局、定位、盒模型等高级技巧,提升网页设计能力。
此外,`float`属性可用于创建浮动布局。 2. **多列布局**:CSS2.0提供了`column-count`和`column-gap`等属性,允许在块级元素中创建多列布局,这是对传统流式布局的重要补充。 3. **媒体查询**:CSS2.0的媒体查询...
/* 清除浮动 */ width: 800px; margin: 0 auto; height: 50px; background: #00FFFF; } ``` #### 三、注意事项 - **良好的注释习惯**:为代码添加清晰的注释,有助于提高代码的可读性和维护性。 - **浏览器...
随着技能的提升,你可以进一步学习浮动布局、定位、响应式设计等高级概念,以适应不同设备和屏幕尺寸的需求。记住,实践是掌握Div+CSS布局的关键,不断尝试和修改,你的网页设计技能会日益精进。