<!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. ☕【Java深层系列】「并发编程系列」让我们一起探索一下CyclicBarrier的技术原理和源码分析

    CyclicBarrier和CountDownLatch CyclicBarrier和CountDownLatch 都位于java.util.concurrent这个包下,其工作原理的核心要点: Cy ...

  2. 【webpack4.0】---webpack的基本使用(二)

    一.什么是plugins plugins可以使webpack在运行到某个时刻的时候,帮你做一些事情,类似于生命周期一样 plugins,它就是一个扩展器,它丰富了wepack本身,针对是loader结 ...

  3. 010 Linux 文本统计与去重 (wc 和 uniq)

    wc 命令一般是作为组合命令的一员与其他命令一同起到统计的作用.而一般情况下使用wc -l 命令较多. uniq 可检查文本文件中重复出现的行,一般与 sort 命令结合使用.一起组合搭配使用完成统计 ...

  4. React Transition css动画案例解析

    实现React Transition Css动画效果 首先在项目工程中引入react-transition-group: npm install react-transition-group --sa ...

  5. Swift逻辑分支

    一. 分支的介绍 分支即if/switch/三目运算符等判断语句 通过分支语句可以控制程序的执行流程 二. if分支语句 和OC中if语句有一定的区别 判断句可以不加() 在Swift的判断句中必须有 ...

  6. linux 批量替换文件内容及查找某目录下所有包含某字符串的文件

    转载请注明来源:https://www.cnblogs.com/hookjc/ 1. sed C代码   grep -rl matchstring somedir/ | xargs sed -i 's ...

  7. ELK 日志分析系统概述及部署

    ELK 日志分析系统概述及部署 1.ELK概述: ELK简介 : ELK平台是一套完整的日志集中处理解决方案,将 ElasticSearch.Logstash 和 Kiabana 三个开源工具配合使用 ...

  8. 从上下文中获取所有的原生controller

    1 /** 2 * 获取项目所有被注解修饰的url 3 * @param run 4 */ 5 public void getAllUrl(ConfigurableApplicationContext ...

  9. ROS::message_filters中的一个报错（mt::TimeStamp……）

    『方便检索』 ros::Time msg_time = mt::TimeStamp<typename mpl::at_c<Messages, i>::type>::value( ...

  10. JVM性能调优与实战基础理论篇-上

    Java虚拟机 概述 Java官方文档 https://docs.oracle.com/en/java/index.html JVM是一种规范,通过Oracle Java 官方文档找到JVM的规范查阅 ...