<!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. 带你十天轻松搞定 Go 微服务系列（五）

    序言 我们通过一个系列文章跟大家详细展示一个 go-zero 微服务示例,整个系列分十篇文章,目录结构如下: 环境搭建 服务拆分 用户服务 产品服务 订单服务(本文) 支付服务 RPC 服务 Auth ...

  2. 幸运转轮（Cakra）

    题目描述 lxx参加了某卫视举办的一场选秀节目,凭借曼妙的舞姿和动人的歌声,他在众多idol中脱颖而出.现在在他的面前,有四个大转轮,这四个转轮将决定他能否赢得最终大奖--出道,机会只有一次!   每 ...

  3. 微服务架构 | 7.2 构建使用 JWT 令牌存储的 OAuth2 安全认证

    目录 前言 1. JWT 令牌存储基础知识 1.1 JSON Web Token 2. 构建使用 JWT 令牌存储的 OAuth2 服务器 2.1 引入 pom.xml 依赖文件 2.2 创建 JWT ...

  4. scanf用法及scanf中有\n的问题

    scanf()函数的原理 想象输入设备(键盘)连接着一个叫"缓冲"的东西,把缓冲认为是一个字符数组. 当你的程序执行到scanf时,会从你的缓冲区读东西,如果缓冲区是空的,就阻塞住 ...

  5. Android利用zxing生成二维码

    感谢大佬:https://blog.csdn.net/mountain_hua/article/details/80646089 **gayhub上的zxing可用于生成二维码,识别二维码 gayhu ...

  6. js添加元素代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. Jmeter平均响应时间和TPS的计算方法

    转自:https://www.cnblogs.com/xianlai-huang/p/7795215.html Jmeter的Throughput和平均RT的计算 1.TPS:每秒处理的事务数,jme ...

  8. Java8 Stream 的一些操作和介绍

    原创:转载需注明原创地址 https://www.cnblogs.com/fanerwei222/p/11858186.html Java8 Stream 是一个新的东西, 就是能够将常见的数据结构转 ...

  9. Ubuntu 16.04 更改系统语言为简体中文 #####避坑指南

    大家跟着我的步骤一步一步来,肯定不会出现问题的 我这里说明两点,一是切换到管理员用户,二是更新网络源! 且待大家走一遍安装流程 一.安装时报错 原因:以访客的身份进入的会报错,改为管理员进入即可. p ...

  10. python——三方电子邮件库pyzmail

    pyzmail比默认smtplib和mime模块简单很多. 模块首页 http://pyzmail.readthedocs.io/en/latest/ python3.2以上,pip install ...