一， 效果图。

二，代码。

<!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. utf-8 decode

    摘自 Lua 5.3 源文件 lutf8lib.c /* ** Decode one UTF-8 sequence, returning NULL if byte sequence is invali ...

  2. 15：IO之File、Properties类

    第一  File类 一.概述:File类是有文件或文件件封装而来的对象,可以操作其属性信息,这个类的出现弥补了流的不足,流只能操作数据 1.特点: 1)用来将文件或文件夹封装成对象 2)方便于对文件与 ...

  3. MySQL [Err] 1055 - Expression #1 of ORDER BY clause is not in GROUP BY clause

    MySQL[Err]1055 上次MySQL5.7.19主从建立完成之后,所有的测试都是在MySQL命令行下进行的,最近用Navicat Premium进行MySQL的连接,然后在插入数据的时候MyS ...

  4. WebMvcConfigurer

    [传送门]:详解WebMvcConfigurer接口 1. 设置跨域规则 @Configuration public class CrossOriginConfig implements WebMvc ...

  5. Java 9 被无情抛弃，Java 8 直接升级到 Java 10！！

    前几天写了一篇 Java 8 即将在 2019 年停止免费向企业提供更新的文章,企图迫使用户向更新一代的 Java 版本升级,但让人遗憾的是,小编今天收到了 Oracle Java 版本的升级推送,装 ...

  6. 关于Python的import机制原理

    很多人用过python,不假思索地在脚本前面加上import module_name,但是关于import的原理和机制,恐怕没有多少人真正的理解.本文整理了Python的import机制,一方面自己总 ...

  7. js排序问题

    1.直接排序 var arr = [1,3,2,5]; function compare(a,b){ return a - b;//从小到大 return b - a;//从大到小 } console ...

  8. JsExcelXml.js的源码

    var JSXmlExcel = { ConvertXmlDoc: function (text) { var xmlDoc = null; try { xmlDoc = new ActiveXObj ...

  9. logrotate实现Mysql慢日志分割

    MySQL慢日志? MySQL的慢查询日志是MySQL提供的一种日志记录,它用来记录在MySQL中响应时间超过阀值的语句,具体指运行时间超过long_query_time值的SQL,则会被记录到慢查询 ...

  10. 理解express中的中间件

    express是轻量灵活的node.js Web应用框架”.它可以帮助你快速搭建web应用.express是一个自身功能极简,完全是由**路由**和**中间件**构成的一个web开发框架,本质上说,一 ...