<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">

<h1 style="margin-bottom:0;">主要的网页标题</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">

<b>菜单</b><br>

HTML<br>

CSS<br>

JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">

内容在这里</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">

版权 © runoob.com</div>

</div>

</body>

</html>

实际中理解div布局和浮动的更多相关文章

  1. HTML中由于DIV(块元素)浮动，导致的父元素高度塌陷问题的解决方案

    费话不多说,直接上问题: 1.开始时,页面只有两个DIV的嵌套(见图) 运行结果是: 现在看运行的是正常的,但是当我设置让 class="box2" 的DIV浮动时 运行结果是这样 ...

  2. 认识和理解css布局中的BFC

    认识和理解css布局中的BFC BFC的定义 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. Block Formatting Con ...

  3. CSS+DIV布局中absolute和relative区别

    原文:http://developer.51cto.com/art/201009/225201.htm 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定 ...

  4. 四使用浮动div布局

    刚开始学习的小白,如有不足之处还请各位补充,感激涕零.在html中有两种方式布局<table>表格和<div>,个人剧的使用表格布局可以避免bug产生,并且表格布局相对来说要容 ...

  5. （转）css中通常会用到浮动与清除，也是一个必须掌握的知识点，概念性的东西不多说，下面举几个例子，来说明它的用法：1.文字环绕效果 2.多个div并排显示 3.清除浮动（默认显示）

    一.文字环绕效果: html代码如下: 1 <body> 2 3 <style type="text/css"> 4 #big img {float: le ...

  6. WPF中的常用布局 栈的实现 一个关于素数的神奇性质 C# defualt关键字默认值用法 接口通俗理解 C# Json序列化和反序列化 ASP.NET CORE系列【五】webapi整理以及RESTful风格化

    WPF中的常用布局   一 写在开头1.1 写在开头微软是一家伟大的公司.评价一门技术的好坏得看具体的需求,没有哪门技术是面面俱到地好,应该抛弃对微软和微软的技术的偏见. 1.2 本文内容本文主要内容 ...

  7. DIV+CSS 清除浮动方法总结

    DIV+CSS 清除浮动是页面布局中常见的问题,相信各位高手也都有自己的方法,今天在这里对常见的几种方法进行总结(PS:谈不上是原创,这里是我自己做的归纳总结,也是我自己内化的过程),希望对您能够有所 ...

  8. div 布局

    转:http://blog.csdn.net/mercop/article/details/7882000 HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理 ...

  9. css浮动布局，浮动原理，清除(闭合)浮动方法

    css浮动 1.什么是浮动:在我们布局的时用到的一种技术,能够方便我们进行布局,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置 2.浮动的原理:使当前元素脱离普通流,相 ...

随机推荐

  1. 原创 Reflector 8.1　反激活

    今天下载了Reflector8.1,注册时不小心给注册成标准版了.郁闷,然后想反注册,结果人家的注册服务器不认你的注册码.怎么办? google.... 然后找到一篇 Deactivating you ...

  2. Android（java）学习笔记156：Java虚拟机和Dalvik虚拟机的区别

    Google于2007年底正式发布了Android SDK, 作为 Android系统的重要特性,Dalvik虚拟机也第一次进入了人们的视野.它对内存的高效使用,和在低速CPU上表现出的高性能,确实令 ...

  3. html笔记05：html、css、javascript综合案例

    1.首先是html代码: <!-- markup time --> <div class="wrapper wb"> <div class=" ...

  4. iOS 并行编程：Thread

    1 创建线程 1.1 NSThread       使用 NSThread 来创建线程有两个可以使用的方法: 1) 使用 detachNewThreadSelector:toTarget:withOb ...

  5. 一行 Python 代码搞定一棵树

    使用 Python 内建的 defaultdict 方法可以轻松定义一个树的数据结构. 简单的说树也可以是一个字典数据结构           Python   1 def tree(): retur ...

  6. Zepto源码解读

    /*******************************************************************************Zepto核心和dom操作******* ...

  7. DevExpres.XtraLayout控件运行时动态设置数据项

    问题分析: 通常.我们使用XtraLayout控件,是需要做以下的几个步骤来实现的: 1.  在窗体上拖拉一个 LayoutControl控件,设置它的填充属性: 2.  拖拉一些常规编辑控件到Lay ...

  8. ToString方法的不同格式总结

    ToString()参数: 12345.ToString("n"); 生成 12,345.00 12345.ToString("C"); 生成 ￥12,345. ...

  9. Jquery Ajax 调用 WebService

    原文:http://www.cnblogs.com/andiki/archive/2010/05/17/1737254.html jquery ajax调用webservice(C#)要注意的几个事项 ...

  10. 如何关闭SELinux

    一般安装linux课程时都把SELinux与iptables安排在后面,使初学者配置linux服务器时不成功,却没有头绪,那是因为在RedHat linux操作系统中默认开启了防火墙,SELinux也 ...