一， 效果图。

二，代码。

<!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. Alpha代码规范、冲刺任务与计划

    Alpha代码规范.冲刺任务与计划 团队名称: 云打印 作业要求: Alpha代码规范.冲刺任务与计划 作业目标:代码规范.冲刺任务与计划. 团队队员 队员学号 队员姓名 个人博客地址 备注 2216 ...

  2. Spring，为内部方法新起一个事务，此处应有坑。

    事务的作用,使我们操作能够连贯起来.而spring则是提供了一个更简单的方法,只要使用 @Transactional 一个注解,就可以保证操作的连贯性了. 普通用法,稍后再说,这里要说的是: 在最外面 ...

  3. Nginx的安装与部署

    1:安装工具包 wget.vim和gcc yum install -y wget yum install -y vim-enhanced yum install -y make cmake gcc g ...

  4. spring boot 通过controller跳转到指定 html 页面问题以及请求静态资源问题

    1. 项目结构 2. pom文件配置 重点是红色框内的依赖 3. application配置文件 4. controller 注意使用@Controller注解: @RestController 等价 ...

  5. Swift 里 Dictionary

    Dictionary uses two storage schemes: native storage and Cocoa storage. 只看 native storage 的,也就是和 OC 无 ...

  6. 使用autogen工具生成Makefile遇到问题解决思路

    使用autogen工具生成Makefile,最新的应用程序很多都使用autogen,本着知行合一的精神 最近有空也研究了一下该工具的使用,详细步骤请参考文档: http://blog.csdn.net ...

  7. 《Kubernetes权威指南》——组件原理

    1 API Server 1.1 提供集群管理的API接口 API Server在kubernetes中的进程名为apiserver,运行在Master节点上 apiserver开放两个端口 本地端口 ...

  8. Spring Boot + Spring Cloud 实现权限管理系统 后端篇（十八）：注册中心（Spring Cloud Consul）

    什么是 Consul Consul 是 HashiCorp 公司推出的开源工具,用于实现分布式系统的服务发现与配置.与其它分布式服务注册与发现的方案,Consul 的方案更“一站式”,内置了服务注册与 ...

  9. Java并发编程笔记之ArrayBlockingQueue源码分析

    JDK 中基于数组的阻塞队列 ArrayBlockingQueue 原理剖析,ArrayBlockingQueue 内部如何基于一把独占锁以及对应的两个条件变量实现出入队操作的线程安全? 首先我们先大 ...

  10. Jmeter接口测试——跨线程组调用参数(token为例)

    昨天学会了动态获取token,今天测试接口时希望能够实现跨线程调用token值. 实现原理: jmeter本身的“__setProperty”函数可以把某参数的值设置成jmeter本身的内置属性,而j ...