一， 效果图。

二，代码。

<!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. Learning WCF：A Simple Demo

    This is a very simple demo which can help you create a wcf applition quickly. Create a Solution Open ...

  2. Javascript高级编程学习笔记（10）—— 作用域、作用域链

    昨天介绍了,JS中函数的作用域 什么词法环境之类的,可能很多小伙伴不太明白. 在今天的内容开始之前,先做个简短的声明: 词法环境这一概念是在ES5中提出的,因为词法环境主要用于保存let.const声 ...

  3. Java学习笔记44（多线程一：Thread类）

    多线程的概念:略 多线程的目的:提高效率 主线程: package demo; //主线程 public class Demo { public static void main(String[] a ...

  4. Swift5 语言指南(十六) 初始化

    初始化是准备要使用的类,结构或枚举的实例的过程.此过程涉及为该实例上的每个存储属性设置初始值,并执行在新实例准备好使用之前所需的任何其他设置或初始化. 您可以通过定义实现这个初始化过程初始化,这就像特 ...

  5. 零碎的java知识点记录（一）

    小知识点 Map有getOrDefault("1","0");取不到取默认值 两个不同对象,属性相同进行赋值转换,使用modelMapper <depen ...

  6. consul初步学习

    简介 consul是一个服务发现框架 类似的还有zookeeper,eureka,etcd等 作用 服务发现(service discovery) 健康检查(health checking) 配置存储 ...

  7. 谈谈 JavaScript 的正则表达式

    一.背景 最近在做 CMS 系统中不同身份登录用户的权限管理,涉及到对 api 路径的识别去判断是否放行.以前对正则表达式都是敬而远之,要用到的话都是直接复制粘贴现成网上的表达式,看也看不太懂,借这次 ...

  8. 脚手架vue-cli系列四：vue-cli工程webpack的基本用法

    webpack的打包依赖于它的一个重要配置文件webpack.config.js,在这个配置文件中就可以指定所有在源代码编译过程中的工作了,就一个配置就可以与冗长的Gruntfile或者Gulpfil ...

  9. 比较List和ArrayList的性能及ArrayList和LinkedList优缺点

    List和ArrayList的性能比较 在使用ArrayList这样的非泛型集合的过程中,要进行装箱和拆箱操作,会有比较大的性能损失,而使用泛型集合就没有这样的问题.List是泛型,而ArrayLis ...

  10. Nginx + Uswgi + Django的部署

    Nginx + Uswgi + Django的部署 待更新 https://code.ziqiangxuetang.com/django/django-static-files.html https: ...