HTML5-布局的使用
DIV布局:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>div布局</title> <style type="text/css"> body{ margin: 0px; } #container{ width: 100%; height: 950px; background-color: cadetblue; } #heading{ width: 100%; height: 10%; background-color: aqua; } #content_menu{ width: 30%; height: 80%; background-color: #ed3cff; float: left; } div#content_body{ width: 70%; height: 80%; background-color: blueviolet; float: left; } #footing{ width: 100%; height: 10%; background-color: black; clear: both; /*clear: both;:清除浮动。*/ } </style> </head> <body> <div id="container"> <div id="heading">头部</div> <div id="content_menu">内容菜单</div> <div id="content_body">内容主体</div> <div id="footing">底部</div> </div> </body> </html>
表格布局:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>table布局</title> </head> <body marginheight="0px" marginwidth="0px"> <!--marginheight="0px" marginwidth="0px":页边距--> <table width="100%" height="950px" style="background-color: chocolate"> <tr> <td colspan="2" width="100%" height="10%" style="background-color: blueviolet">头部</td> <!-- colspan="2":合并单元格--> </tr> <tr> <td width="30%" height="80%" style="background-color: chartreuse"> <ul> <li>ios</li> <li>html5</li> <li>windows</li> <li>Mac os</li> </ul> </td> <td width="70%" height="80%" style="background-color: darkolivegreen">主页面</td> </tr> <tr> <td width="100%" height="10%" colspan="2" style="background-color: teal">底部</td> </tr> </table> </body> </html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步