<!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. JSP 向 JavaScript 中传递数组

    采用隐藏标签的方式: // JSP: <%               while(rs.next())       {              %>            <in ...

  2. Android json 数据解析

    1.json格式 2.json解析 3.gson解析 4.fastjson解析 一.Json格式 json一种轻量级的数据交换格式.在网络上传输交换数据一般用xml, json. 两种结构: 1)对象 ...

  3. 关于BUG

    1.BUG的理解 2.提高BUG report的技巧

  4. python框架之Flask基础篇(二)-------- 数据库的操作

    1.flask连接数据库的四步: 倒入第三方数据库扩展包:from flask_sqlalchemy import SQLAlchemy 配置config属性,连接数据库: app.config[&q ...

  5. Linux(centOS7.2)+node+express初体验

    赶着阿里云服务器老用户服务器半折的好时机,手痒买了一个低配. 想着对于低配用Linux应该比较好(无可视化界面) 于是选择安装了centOs7.2: 我是通过SecureCRT进行远程连接的(如何操作 ...

  6. SYN(synchronous)TCP/IP

    SYN(synchronous)是TCP/IP建立连接时使用的握手信号.在客户机和服务器之间建立正常的TCP网络连接时,客户机首先发出一个SYN消息,服务器使用SYN+ACK应答表示接收到了这个消息, ...

  7. Jenkins里jobs和workspace什么区别

    https://segmentfault.com/q/1010000012575095/a-1020000012590560 简单的说,job 中保存的是项目是在 jenkins 上的配置.日志.构建 ...

  8. Ubuntu 18.04 安装chrome浏览器

    参考 https://blog.csdn.net/cyem1/article/details/86297197 一分钟安装教程! 1.将下载源加入到系统的源列表(添加依赖) sudo wget htt ...

  9. dva相关文档

    https://dvajs.com/guide/getting-started.html#%E5%AE%9A%E4%B9%89-model-------dva.js https://dvajs.com ...

  10. CAD动态绘制带面积周长的圆(com接口)

    CAD绘制图像的过程中,画圆的情况是非常常见的,用户可以在控件视区点取任意一点做为圆心,再动态点取半径绘制圆. 主要用到函数说明: _DMxDrawX::DrawCircle 绘制一个圆.详细说明如下 ...