Html5笔记 表格 布局
2023-09-11 14:14:43 时间
<!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 界面元素 Canvas 參考手冊
- HTML5的未来
- HTML5的服务器EventSource(server-sent event)发送事件
- ajax与HTML5 history pushState/replaceState实例
- HTML5与CSS3权威指南笔记案例1
- 《Web前端开发精品课——HTML5 Canvas开发详解》——第一部分第二章节
- 《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 2.7 数据属性
- 《HTML5触摸界面设计与开发》——2.4 理解 Viewport
- HTML5动感圆圈
- 《Javascript权威指南》学习笔记之十九--HTML5 DOM新标准---处理文档元信息和管理交互能力
- HTML5:中国互联网的第五次腾飞?
- HTML5 学习笔记
- HTML5 + CSS3 表单学习笔记(六)
- HTML5 + CSS3 页面结构学习笔记(五)
- HTML5