<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>HTML5学习笔记</title>

    <style type="text/css">

        p{

            color: #ffff00;

        }

        body

        {

            margin: 0px;

        }

        #container

        {

            width: 100%;

            height: 950px;

            background-color: cornflowerblue;

        }

        #heading

        {

            width: 100%;

            height: 33%;

            background-color: #cccccc;

        }

        #content_menu{

            width: 30%;

            height: 57%;

            background-color: darkcyan;

            float: left;

        }

        #content_body{

            width: 70%;

            height: 57%;

            background-color: lightcoral;

            float: left;

        }

        #footing{

            width: 100%;

            height: 10%;

            background-color: #af845e;

            clear: both;

        }

    </style>

</head>

<body marginheight="0px" marginwidth="0px">

    <table width="100%" height="950px" style="background-color: #af845e">

        <tr>

            <td colspan="2" width="100%" height="10%" style="background-color: darkorange"> 这是表头，colspan是合并单元格命令</td>

        </tr>

        <tr>

            <td width="33%" height="80%" style="background-color: darkseagreen">左菜单</td>

            <td width="33%" height="80%" style="background-color: darkgreen">右菜单</td>

            <td width="33%" height="80%" style="background-color: darkred">

                <ul>

                    <li>锦秋社区</li>

                    <li>三号支沟</li>

                </ul>

            </td>

        </tr>

    </table>

    <div id="container">

        <div id="heading">头部</div>

        <div id="content_menu">内容菜单</div>

        <div id="content_body">内容主体</div>

        <div id="footing">底部</div>

        divTest

    </div>

    <br/><br/>

    <table border="1">

        <tr>

            <td>表格1</td>

            <td>表格2</td>

            <td>表格3</td>

        </tr>

        <tr>

            <td>表格2</td>

            <td>

                <ul type="square">

                    <li><a href="http://www.baidu.com" >m1</a> m1</li>

                    <a name="internalLink">内联測试</a>

                    <li>m2</li>

                    <li>m3</li>

                    <li><a href="#internalLink">转到上面的链接</a> </li>

                </ul>

                <p>以上是一个无序标签列表</p>

                <ol type="I" start="3">

                    <li>Nikolai</li>

                    <li>Soap</li>

                    <li>Price</li>

                </ol>

                <div style="color: aqua">以上是有序列表</div>

                <ul>

                    <li>德拉格维奇</li>

                        <ul>

                            <li>秘密电台</li>

                            <li>古巴革命</li>

                        </ul>

                </ul>

                <br/>以上是嵌套列表

                <dl>

                    <dt>使命6</dt>

                        <dd>马卡洛夫与谢菲尔德之争</dd>

                    <dt>使命8</dt>

                        <dd>141大战马卡洛夫</dd>

                        <dd>DeltaForce VS Makarov</dd>

                </dl>

                <br/>以上是自己定义列表，即自己定义每一个条目的标识符

                <br/>

                <a href="#internalLink">转到上面的链接</a>

            </td>

        </tr>

    </table>

</body>

</html>

Html5笔记 表格 布局的更多相关文章

  1. html5常用标签table表格布局

    html5常用标签table表格布局 一.总结 一句话总结: 二.html5常用标签table表格布局 用表格显示信息调理清楚,使浏览者一目了然.表格在网页中还有协助布局的作用,可以把文字.图像等组织 ...

  2. html5: table表格与页面布局整理

    传统表格布局之table标签排版总结:   默认样式: <style> table { max-width: 800px; border-spacing: 2px; border-coll ...

  3. Android笔记（十） Android中的布局——表格布局

    TableLayout运行我们使用表格的方式来排列控件,它的本质依然是线性布局.表格布局采用行.列的形式来管理控件,TableLayout并不需要明确的声明包含多少行多少列,而是通过添加TableRo ...

  4. web前端学习（二）html学习笔记部分（10）-- HTML5构建应用布局和页面

    1.2.25  HTML5构建应用布局和页面 1.2.25.1  HTML5在移动开发中的准则 1.尽量使用单页面开发 2.慎重选择前端UI框架 3.动画.特效使用准则(60fps) 浏览器消耗最小的 ...

  5. Android开发5：布局管理器2(表格布局TableLayout)

    版本:Android4.3 API18  学习整理:liuxinming 概念      TableLayout继承了LinearLayout,因此它的本质依然是线性布局管理器.      表格布局采 ...

  6. 用CSS实现“表格布局”

    当我们进行浮动布局时,会发现存在着非浮动元素与浮动元素的底部难以对齐的情况,这就是浮动布局的缺陷.因此,过去的前端工作者曾利用<table>以实现"表格布局".因为表格 ...

  7. android——相对布局，表格布局

    1.相对布局 RelativeLayout 又称作相对布局,也是一种非常常用的布局.和LinearLayout 的排列规则不同,RelativeLayout 显得更加随意一些,它可以通过相对定位的方式 ...

  8. Android之UI编程(二):表格布局

    表格布局(TableLayout)继承了LinearLayout,它的本质依然是线性布局管理器,表TableLayout采用行.列的形式来管理UI组件,它并不需要明确地声明暴行多少行.多少列,而是通过 ...

  9. 黑马程序员——HTML表格布局

    ---------------------- <a href="http://edu.csdn.net"target="blank">ASP.Net ...

随机推荐

  1. 阿里邮箱绑定Foxmail失败的解决办法

    收件服务器地址: POP 服务器地址:pop3.mxhichina.com 端口110,SSL 加密端口995 或 IMAP 服务器地址:imap.mxhichina.com 端口143,SSL 加密 ...

  2. cocos2d-x 调用第三方so文件

    一:假设.so文件名称 : libhi.so 1.jni文件下创建一个prebuilt 2.android.mk文件中找到  include $(CLEAR_VARS), 在这句后面添加如下代码 in ...

  3. C# asp.net repeater实现排序功能,自动排序，点击头部排序，点击列排序

    在网上看到好多关于repeater排序的,自己动手用了,发现一些问题,贴源码后把发现的问题以及解决方法给出 repeater实现排序功能(单击升序排列,再单击降序排列).原理很简单,在<TD&g ...

  4. 最新省市区划分码code

    爬取国家统计局省市区code 提供php爬取脚本以及json和sql https://github.com/zzDylan/area-code 觉得好用给个star,3q

  5. inner join / left join / right join

    left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录 right join(右联接) 返回包括右表中的所有记录和左表中联结字段相等的记录inner join(等值连接) 只 ...

  6. drupal 8——图片组（list）在前台的显示顺序在登录状态和非登录状态不同

    问题描述:该页面是通过view来输出的,然而,登录状态下其页面中的图片组输出顺序是乱序的,而非登录状态下则根据id值升序输出. 原因:在原view配置页面中,没有配置默认的排序字段 解决方案:在vie ...

  7. Puppeteer——自动化脚本设计

    我被分配了一个繁琐的任务,就是要给100个相同的站点做同样的配置.曾经就有做过相同的事,那时还不会写脚本,全靠手动配置.机械的配置了两天的时间,身体感觉被掏空.所以这次我决定还是写一个脚本自动的进行配 ...

  8. android黑科技系列——获取加固后应用App的所有方法信息

    一.前言 在逆向应用的时候,我们有时候希望能够快速定位到应用的关键方法,在之前我已经详细介绍了一个自己研发的代码动态注入工具icodetools,来进行动态注入日志信息到应用中,不了解的同学可以查看这 ...

  9. 图解TCP/IP笔记（1）——TCP/IP协议群

    转载请注明:https://www.cnblogs.com/igoslly/p/9167916.html TCP/IP制定  制定:IETF 记录:RFC - Request for comment ...

  10. strut2 拦截器 使用

    拦截器是strut2里一个很振奋人心的应用.通过配置拦截器可以在action执行之前进行一些初始化或者是其他的操作,但是在action执行之后,返回结果就已经确定,结果是很难改变了(目前我还不知道怎么 ...