一， 效果图。

二，代码。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>html 列表</title>

</head>

<body>

    <!--使用div元素的网页布局-->

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

        <div id="header" style="">>

            <h1 style="margin-bottom:0">main title o f web page</h1>

        </div>

        <div id="menu" style="height:200px;width:100px;float:left">

            <b>menu</b>

            <br> html

            <br> css

            <br> javascript

        </div>

        <div id="content" style="height:200px;width:400px;float:left">

            ontent goes here

        </div>

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

            Copyright © W3CSchool.cc

        </div>

        <!--使用table元素的网页布局-->

        <table width="500" border="0">

            <tr>

                <td colspan="2" style="">>

                    <h1>main title of web page</h1>

                </td>

            </tr>

            <tr>

                <td style="width:100px">

                    <b>menu</b>

                    <br>html

                    <br>css

                    <br>javascript</td>

                <td style="height:200px;width:400px">

                    content goes here</td>

            </tr>

            <tr>

                <td colspan="2" style="text-align:center">

                    Copyright © W3CSchool.cc</td>

            </tr>

        </table>

</body>

</html>

参考资料：《菜鸟教程》

【代码笔记】Web-HTML-布局的更多相关文章

  1. 《编写高质量代码：Web 前端开发修炼之道》 笔记与读后感

    编写高质量代码:Web 前端开发修炼之道/曹刘阳著. —北京:机械工业出版社,2010.5 第一版 涉及到的知识点: 1. CSS Sprites 在国内很多人叫css精灵,是一种网页图片应用处理方式 ...

  2. Html代码seo优化最佳布局实例讲解

    搜索引擎对html代码是非常优化的,所以html的优化是做好推广的第一步.一个符合seo规则的代码大体如下界面所示. 1.<!–木庄网络博客–> 这个东西是些页面注释的,可以在这里加我的& ...

  3. Web应用 布局

    asp.net core系列 44 Web应用 布局 一.概述 MVC的视图与Razor页面经常共享视觉和程序元素,通过使用布局来完成,布局还可减少重复代码.本章演示了以下内容的操作方法:(1)使用通 ...

  4. 微信小程序开发：学习笔记[4]——样式布局

    微信小程序开发:学习笔记[4]——样式布局 Flex布局 新的布局方式 在小程序开发中,我们需要考虑各种尺寸终端设备上的适配.在传统网页开发,我们用的是盒模型,通过display:inline | b ...

  5. amazeui学习笔记--css（布局相关1）--网格Grid

    amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式  <div class=&q ...

  6. amazeui学习笔记--css（布局相关3）--辅助类Utility

    amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...

  7. amazeui学习笔记--css（布局相关2）--等分网格 AVG Grid

    amazeui学习笔记--css(布局相关2)--等分网格 AVG Grid 一.总结 1.与grid区别:网格中:am-g + am-u-xx-n 等分网格中只有一个: am-avg-sm-4(在u ...

  8. SiteMesh：一个优于Apache Tiles的Web页面布局、装饰框架

    一.SiteMesh项目简介 OS(OpenSymphony)的SiteMesh是一个用来在JSP中实现页面布局和装饰(layout and decoration)的框架组件,能够帮助网站开发人员较容 ...

  9. 【hadoop代码笔记】Mapreduce shuffle过程之Map输出过程

    一.概要描述 shuffle是MapReduce的一个核心过程,因此没有在前面的MapReduce作业提交的过程中描述,而是单独拿出来比较详细的描述. 根据官方的流程图示如下: 本篇文章中只是想尝试从 ...

  10. 【hadoop代码笔记】hadoop作业提交之汇总

    一.概述 在本篇博文中,试图通过代码了解hadoop job执行的整个流程.即用户提交的mapreduce的jar文件.输入提交到hadoop的集群,并在集群中运行.重点在代码的角度描述整个流程,有些 ...

随机推荐

  1. Request模块—数据解析工具

    一.爬虫基本步骤 指定URL信息 发起请求 获取响应数据 对响应数据进行数据解析 持久化存储 二.数据解析 1. 正则表达式 (1) 基本语法 1. 单字符: . : 除换行以外所有字符 [] :[a ...

  2. Android 使用 Camera2 完成预览和拍照

    Android API 21新增了Camera2,这与之前的camera架构完全不同,使用起来也比较复杂,但是功能变得很强大. 在讲解开启预览之前,首先需要了解camera2的几个比较重要的类: Ca ...

  3. 第32节：Java中-构造函数，静态方法，继承，封装，多态，包

    构造函数实例 class Cat{ // 设置私有的属性 name private String name; // 设置name的方法 public void setName(String Name) ...

  4. 用react + redux + router写一个todo

    概述 最近学习redux,打算用redux + router写了一个todo.记录下来,供以后开发时参考,相信对其他人也有用. 注意: 我只实现了Footer组件的router,其它组件的实现方法是类 ...

  5. maven配置多仓库的方法

    刚接触maven就是在公司里配置好的,所以一直以来使用都没毛病,所以一直没有去动这些固有的东西. 但是,后来把公司的电脑拿回家之后,发现有的东西就搞不起来了.原因也看一下就明白了,因为在公司的时候用的 ...

  6. Java-大数据方向学习和已掌握知识点整理

    现在的项目是大数据相关项目,一路走来从最初的 C 开发到 Java 再到 大数据,不容易 大数据方向知识点太多,优先掌握了主流的一些技术并运用到了现在的项目中 另外也整理了一份java开发和项目管理方 ...

  7. Netty：Channel 建立后消息发送失败

    1. 问题现象 Channel 建立后消息发送失败: ChannelFuture future = DeviceManager.getBootstrap().connect(); deviceChan ...

  8. 凉凉了，Eureka 宣布闭源，Spring Cloud 何去何从？

    今年 Dubbo 活了,并且被 Apache 收了.同时很不幸,Spring Cloud 下的 Netflix Eureka 组件项目居然宣布闭源了.. 已经从 Dubbo 迁移至 Spring Cl ...

  9. [视频]K8飞刀 hacking team flash0day shellcode exploit

    [视频]K8飞刀 hacking team flash0day shellcode exploit 链接:https://pan.baidu.com/s/1aVEElE2Y6zhOkaWKsUZ7Hg ...

  10. Xamarin.Android 使用 SQLite 出现 Index -1 requested, with a size of 10 异常

    异常: Android.Database.CursorIndexOutOfBoundsException: Index -1 requested, with a size of 10 此错误是数据返回 ...