<!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>

<!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>

HTML学习如何布局的更多相关文章

  1. android基础学习之布局

    我学习android第一步接触的就是布局的学习.布局是androidUI的基础,是重中之重.总的来说android有6种布局,分别是线性布局LinearLayout.相对布局RelativeLayou ...

  2. Bootstrap学习笔记-布局

    Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...

  3. android 学习 之 布局（上）

    学习安卓布局前,先了解三个属性值: 1.fill_parent: 设置一个构件的布局为fill_parent将强制性地使构件扩展,以填充布局单元内尽可能多的空间 2.match_parent: And ...

  4. 《学习CSS布局》学习笔记

    近几天做了一个小的企业展示网站.虽然页面是在模板的基础上改的,但改的多了不熟悉CSS也很麻烦.正好我看到了学习CSS布局这个网站,于是补习了一下CSS知识. CSS的显示 CSS的元素分为两类:块级元 ...

  5. “学习CSS布局” 笔记

    学习网址:http://zh.learnlayout.com/no-layout.html 本文仅为学习笔记,内容非原创. position 默认值:static 没有添加额外属性的relative和 ...

  6. GTK入门学习：布局容器之固定布局

    前面我们学习的水平.垂直和表格布局容器,控件会跟着容器大小的变化进行自己主动适应.而固定布局容器里的控件则不会跟着变化( 则固定不变 ). 固定布局的创建: GtkWidget *gtk_fixed_ ...

  7. （5）《Head First HTML与CSS》学习笔记---布局与定位

    层叠与CSS的权重判断 1.要理解层叠,除了前面的内容外还差最后一个知识点.你已经知道如何使用多个样式表来更好地组织你的样式,或者支持不同类型的设备.不过实际上用户访问你的页面时还有另外一些样式表. ...

  8. android开发学习---layout布局、显示单位和如何进行单元测试

    一.五大布局(layout) android中的用五大布局:LinearLayout (线性布局).AbsoluteLayout(绝对布局).RelativeLayout(相对布局).TableLay ...

  9. Bootstrap 新手学习笔记——布局组件

    1.字形图标: <button type="button" class="btn btn-primary btn-lg" style="font ...

  10. 3、WPF学习之-布局

    一.基础知识 1.所有WPF布局容器都派生自System.Windows.Controls.Panel抽象类的面板: 2.WPF种核心布局面板有StackPanel(栈面板).WrapPanel(环绕 ...

随机推荐

  1. 多线程创建的方式一（继承Thread类）

    1 package multithread; 2 3 /* 4 * 如何创建一个线程呢? 5 * 6 * 创建线程方式一:继承Thread类. 7 * 8 * 步骤: 9 * 1,定义一个类继承Thr ...

  2. C++ STL：std::unorderd_map 物理结构详解

    拉链法的 unordered_map 和你想象中的不一样 根据数组+拉链法的描述,我们很快能想到下面这样的拉链法实现的哈希表,但真的是这样吗?一起看下源码里的实现是怎么样的. 深入STL源码 代码不会 ...

  3. 图论+回溯解QQ一笔画红包

    [春节整活] QQ的一笔画红包有几个特性: 1.最大为5×5的点阵,所以可以把每个点从左到右,从上到下标为1-25号点 2.每两个点只能存在一条线 3.线可以被盖住(例如连接2-1-3,2-1的线会被 ...

  4. JVM垃圾收集器（八）

    一.垃圾收集器 有了前面JVM参数的了解下面来看下JVM的垃圾收集器:如果说收集算法是内存回收的方法论,那么垃圾收集器就是内存回收的具体实现.  JVM(HotSpot)有7种垃圾收集器,7种垃圾收集 ...

  5. Redis 的持久化有哪几种方式？

    面试题 redis 的持久化有哪几种方式? 不同的持久化机制都有什么优缺点? 持久化机制具体底层是如何实现的? 面试官心理分析 redis 如果仅仅只是将数据缓存在内存里面,如果 redis 宕机了再 ...

  6. application/x-www-form-urlencoded、application/json、multipart/form-data、text/xml简单总结

    最近在数据传输时,一直不明白这四种的区别,查了很多资料,也还是感到很模糊,因此,简单总结一下,以后再完善 1.在GET方式传输数据中,这四种格式,后台都可以接收数据(原生的request.getPar ...

  7. JS 函数提升&变量提升以及函数声明&函数表达式的区别

    感谢原文作者:迟早会有猫 原文链接:https://www.cnblogs.com/SidselLoong/p/10515809.html 今天看js的变量提升问题,里面提到了函数提升.然后发现自己之 ...

  8. markdown常见问题

    图片的引用问题: ![image](./images/git命令.png) 为啥不显示图片?????? 解答:图片路径不支持中文 斜体跟加粗 *强调* 或者 _强调_ (示例:斜体) **加重强调** ...

  9. mac版mysql初次密码不知道或以后忘记密码重设密码步骤

    我自己装完MySQL 不知道怎么回事,初始密码就是登陆不了,幸好找到了这个,严格按照步骤就行了, 完全可以复制粘贴 这个是在百度贴吧看到的作者 贴吧id叁寸日光_1987 苹果->系统偏好设置- ...

  10. 关于unix下cp命令复制权限不够的问题

    例如要将mysql-5.7.17-macos10.12-x86_64.tar.gz 拷贝到/usr/local目录下时,执行cp mysql-5.7.17-macos10.12-x86_64.tar. ...