<!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>