一， 效果图。

二，代码。

<!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. 9.9 翻译系列：数据注解特性之--MaxLength 【EF 6 Code-First系列】

    原文链接:https://www.entityframeworktutorial.net/code-first/maxlength-minlength-dataannotations-attribut ...

  2. kaldi的TIMIT实例一

    TIMIT语音库是IT和MIT合作音素级别标注的语音库,用于自动语音识别系统的发展和评估,包括来自美式英语,8个地区方言,630个人. 每个人读10个句子,每个发音都是音素级别.词级别文本标注,16k ...

  3. Variables and Arithmetic Expression

    Notes from The C Programming Language A decimal point in a constant indicates that it is floating po ...

  4. 踩了的Dockerfile的坑

    1.Dockerfile VOLUME的目录,RUN命令操作该目录无效 VOLUME $APP_HOME RUN mkdir -p $APP_HOME && mkdir -p $APP ...

  5. c# 遍历所有安装程序 获取所有已经安装的程序

    /// <summary> /// 获取所有已经安装的程序 /// </summary> /// <param name="reg"></ ...

  6. JavaScript的BOM编程，事件-第4章

    目标 BOM编程 window和document对象 window对象的属性和方法 document对象的属性和方法 JavaScript中对象的分类 浏览器对象:window对象 window对象, ...

  7. Java实现大数相加、相乘（不使用BigInteger）

    大数相加: package algorithm; //使用BigInteger类验证 import java.math.BigInteger; public class BigAdd { public ...

  8. log4j 详细使用教程【转载】

    日志是应用软件中不可缺少的部分,Apache的开源项目log4j是一个功能强大的日志组件,提供方便的日志记录.在apache网站:jakarta.apache.org/log4j 可以免费下载到Log ...

  9. Python - 使用Pyinstaller将Python代码生成可执行文件

    1 - Pyinstaller简介 Home-page: http://www.pyinstaller.org PyInstaller是一个能够在多系统平台(Windows.*NIX.Mac OS)上 ...

  10. iOS-Xcode解决【workspace integrity couldn't load project'】

    出现如标题提示的项目打不开情况,多半可能是因为Xcode版本不同,或者是SVN/Git使用导致 解决办法一: 删除冲突代码,"项目文件->Pod文件夹->Pods.xcodepr ...