`

dhtml 浮动 与margin

阅读更多

<!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,照样起作用

 

分享到:
评论

相关推荐

    Rainer's DHTML Library.chm_样式表中文手册.zip

    5. **浮动与清除**:float属性用于元素的浮动,clear属性用于清除浮动,它们是实现流式布局的重要工具。 6. **颜色和背景**:增加了更多的颜色单位(如rgba()、hsl()、hsla())和背景属性,如background-position、...

    Dhtml 中文手册 比较全面

    1. **HTML与DHTML的区别**:HTML主要关注静态内容的展示,而DHTML允许网页内容动态改变,如动画效果、响应式交互等。 2. **DOM(文档对象模型)**:DOM是HTML和XML文档的结构化表示,它定义了访问和操作这些文档的...

    DHTML网页制作完全手册

    本手册全面涵盖了网页制作的核心技术,主要聚焦于DHTML(Dynamic HTML)的应用,同时也深入探讨了HTML(超文本标记语言)和CSS(层叠样式表)的基础与进阶知识。DHTML是HTML、CSS、JavaScript以及DOM(文档对象模型...

    DHTML手册Cascading Style Sheet 2.0 中文手册

    综上所述,这份《DHTML手册Cascading Style Sheet 2.0 中文手册》将帮助读者掌握DHTML的动态特性与CSS 2.0的布局技巧,提升网页开发的技能水平。无论是初学者还是经验丰富的开发者,都能从中受益,进一步优化网页的...

    HTML、CSS、DHTML手册

    5. DHTML与JavaScript:了解如何使用JavaScript操作DOM,添加、删除和修改元素;利用事件处理(如`onclick`、`onmouseover`等)实现动态效果。 6. 动画和过渡:掌握CSS3的动画(`@keyframes`)和过渡(`transition`...

    网页制作完全手册(包括html,dhtml)

    JavaScript是DHTML的关键部分,它是一种客户端脚本语言,允许在用户与网页交互时实时改变内容。例如,通过`document.getElementById()`可以获取指定ID的元素,然后修改其内容或样式。事件处理函数如`onclick`, `...

    CSS+div、css2.0中文样式表帮助手册、dhtml手册

    《CSS+div、css2.0中文样式表帮助手册、dhtml手册》是关于Web前端开发的重要参考资料,其中涵盖了CSS(层叠样式表)与div布局、DHTML(动态超文本标记语言)以及JavaScript的基础知识。以下是这些主题的详细解析: ...

    DHTML手册chm(html,javascript必备)

    2. **属性与值**:如`color`、`font-size`、`background`、`margin`等,以及如何使用单位(如px、em、%)。 3. **盒模型**:理解元素的边距、填充、边框和内容如何影响其最终尺寸。 4. **布局技术**:如浮动布局、...

    Div+CSS布局入门教程

    DHTML和XHTML则分别代表动态HTML和可扩展超文本标记语言,它们是HTML的扩展和增强版本。 在开始Div+CSS布局之前,你需要具备一定的HTML基础知识,了解如何使用HTML标签来构建网页的基本结构。接下来,我们将按照...

    前台参考手册

    - **浮动与定位**:浮动(float)常用于创建多列布局,定位(position)则可使元素相对于其正常位置进行移动。 - **响应式设计**:通过媒体查询(media queries)实现不同设备屏幕尺寸下的样式调整,打造跨平台...

    最全的css2·0html标签帮助文档和教程

    - 属性定义了元素的样式,如`color`(颜色)、`font-size`(字体大小)、`margin`(外边距)、`padding`(内边距)等。 - CSS2.0引入了浮动(`float`)和定位(`position`)概念,这对于创建复杂的布局至关重要。 ...

    Div+CSS布局入门教程[归纳].pdf

    此外,深入理解CSS选择器、盒模型、定位(positioning)以及浮动(floating)等概念,是提升Div+CSS布局技能的关键。 通过实践和不断的学习,你将逐渐掌握Div+CSS布局技巧,能够创建出更加复杂和精美的网页布局。...

    李炎恢XHTML中用的手册

    - 浮动(float):常用于创建多列布局,元素可以向左或向右浮动。 - 定位(position):通过`position`属性实现绝对定位和相对定位,以控制元素在页面上的精确位置。 - 弹性布局(flexbox):适用于单轴布局,能轻松...

    Web开发常用chm帮助文档

    此外,浮动(float)、定位(positioning)和Flexbox或Grid布局也是CSS中的重要概念。 **HTML(超文本标记语言)**是构建网页内容的基础,它定义了网页的结构。HTML由一系列元素组成,每个元素都有特定的标签,如`...

    DIVCSS学习(入门)教程.pdf

    例如,为了创建一个水平菜单,可以使用`#menu ul li`选择器去掉列表前的点,并设置浮动为`float:left`,然后通过`margin:0 10px`添加间距。如果想要菜单居右显示,可以将`float:right`应用于`#menu ul`。对于菜单项...

    CSS-中文API.rar

    2. **属性**: 属性定义了元素的样式,如`color`、`font-size`、`background-color`、`margin`等。 3. **值**: 属性后跟一个值来指定样式,值可以是颜色、尺寸、百分比等,也可以是预定义的关键字,如`auto`、`none`...

    div-css布局入门

    ...DHTML和XHTML是HTML的扩展,引入了动态交互和更严格的语法规则。 在开始布局之前,通常会先用Photoshop或Fireworks等...通过不断实践和学习,你可以进一步掌握浮动布局、定位、盒模型等高级技巧,提升网页设计能力。

    CSS2.0中文手册

    此外,`float`属性可用于创建浮动布局。 2. **多列布局**:CSS2.0提供了`column-count`和`column-gap`等属性,允许在块级元素中创建多列布局,这是对传统流式布局的重要补充。 3. **媒体查询**:CSS2.0的媒体查询...

    v+CSS布局入门教程(pdf)

    /* 清除浮动 */ width: 800px; margin: 0 auto; height: 50px; background: #00FFFF; } ``` #### 三、注意事项 - **良好的注释习惯**:为代码添加清晰的注释,有助于提高代码的可读性和维护性。 - **浏览器...

    Div+CSS布局入门教程收藏

    随着技能的提升,你可以进一步学习浮动布局、定位、响应式设计等高级概念,以适应不同设备和屏幕尺寸的需求。记住,实践是掌握Div+CSS布局的关键,不断尝试和修改,你的网页设计技能会日益精进。

Global site tag (gtag.js) - Google Analytics