HTML布局实用
来源：互联网 发布：胸痛中心数据填报平台 编辑：程序博客网 时间：2024/06/10 20:52
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: cyan; } #heading{ width: 100%; height: 10%; background-color: lime; } #content_menu{ width: 30%; height: 80%; background-color: lightcoral; float: left; /* 浮动方式（也就是排列方式，从左向右排列）*/ } #content_body{ width: 70%; height: 80%; background-color: crimson; float: left; /* 浮动方式（也就是排列方式，从左向右排列）*/ } #footing{ width: 100%; height: 10%; background-color:gold; 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>综上代码有两个注意的点：1、body{ margin: 0px; }这里要将边缘设置为0，否则将会出现白边2、float: left; /* 浮动方式（也就是排列方式，从左向右排列）*/不能忘记设置浮动方式，当出现页面分栏的时候就要设置浮动方式table布局<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>table布局</title></head><body marginheight="0px" marginwidth="0px"><table width="100%" height="950px" style="background-color: lightcoral"><tr><td colspan="3" height="10%" weight="100%" style="background-color: chartreuse">这是头部</td></tr><tr><td height="80%" weight="20%" style="background-color: lightcoral">左菜单</td><td height="80%" weight="60%" style="background-color: aqua">主体部分</td><td height="80%" weight="20%" style="background-color: burlywood">右菜单</td></tr><tr><td colspan="3" height="10%" weight="100%" style="background-color: blueviolet">底部</td></tr></table></body></html>
阅读全文
0 0
- HTML布局实用
- html 布局
- HTML布局
- html布局
- HTML 布局
- HTML 布局
- html布局
- HTML布局
- Html布局
- HTML布局
- HTML 布局
- html布局
- html布局
- HTML布局
- HTML-布局
- html 布局
- html布局
- html布局
- 【Linux文件目录命令】tail命令
- 洛谷P1850 换教室（NOIp2016 Day1 T3）（BZOJ 4720）
- Java编程思想读书笔记——通过异常处理错误(一)
- 记录RedHat上一些命令
- 卷积的理解
- HTML布局实用
- ZigZag Conversion--LeetCode
- OpenCV 视频与图片序列相互转换 VideoWriter生成视频流
- Redis的学习
- jQuery获取table当前所在行
- linux窗口程序设计-Qt4精彩实例分析2
- 模电ch.2基本放大器
- vim01 vimrc_example.vim
- pandas 表连接
