<!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. Python小练习更改版（更改一部分代码，与错误）

    之前上传的发现有部分代码错误,重新上传: 更改了第一次的代码与错误,增加了注释与商店部分功能: 没有每天坚持更新博客,与初衷相差甚远,坚持!每天进步一点点! user_list.txt 部分代码: { ...

  2. 浅谈kali : arpspoof工具原理

    Arpspoof工具 介绍 arpspoof是一个通过ARP协议伪造数据包实现中间人攻击的kali工具. 中间人攻击虽然古老,但仍处于受到黑客攻击的危险中,可能会严重导致危害服务器和用户.仍然有很多变 ...

  3. linux虚拟机快照

    目录 一:虚拟机快照 一:虚拟机快照 1.什么是快照? 快照可保存虚拟机在特定时刻的状态和数据. 状态包括虚拟机的电源状态(列如,打开电源,关闭电源,挂起). 数据包括组成虚拟机的所有文件,这包括磁盘 ...

  4. Redis命令大全（超详细）

    一:序 其实本文的命令大家都可以去官网学习,但是我出这篇文章只是以更直观的方式来解读官网上的命令,让大家一眼可以看得懂,看的明白: 注意:我全文使用的Redis版本为 6.2.x 版本,低版本可能有些 ...

  5. 被mybatis一级缓存坑了

    目录 背景 场景 原因 解法 参考 背景 项目中出现了这样一个问题,就是select出来的数据和数据库里的数据不一样,就非常的奇怪,发现原来是mybatis的缓存导致的,经过查询资料发现这是mybat ...

  6. 社交网络分析的 R 基础：（三）向量、矩阵与列表

    在第二章介绍了 R 语言中的基本数据类型,本章会将其组装起来,构成特殊的数据结构,即向量.矩阵与列表.这些数据结构在社交网络分析中极其重要,本质上对图的分析,就是对邻接矩阵的分析,而矩阵又是由若干个向 ...

  7. BIMFACE 二次开发 SDK 之歌

    <BIMFACE SDK 之歌>讲述了作者与 BIMFACE 从相识.相知.相爱.相守的艳遇之爱唯美故事   我是一个小小的程序员 穿行在人来人往的IT行业之间 编程工作与建筑信息化相关 ...

  8. ABC222 部分简要题解

    G 这个问题不好直接做,考虑转化为一个好求的问题. 原问题等价于求最小的 \(x\) 使得(或判断无解): \[\begin{aligned} \frac{2}{9}(10 ^ x - 1) & ...

  9. 控制器view生命周期

    控制器View的生命周期方法:只要是控制器的生命周期方法,都是以view开头. 控制器View加载完成时调用- (void)viewDidLoad { [super viewDidLoad];} 控制 ...

  10. 如何清除项目git版本控制信息

    首先进入项目目录下 邮件打开 git bash here 执行命令 find . -name ".git" | xargs rm -rf 就清除了git版本控制信息