如何进行HTML页面的布局 怎样合并html中的单元格
文章插图
当我们刚开端学习Web前端时，就对HTML页面的布局特殊感兴致，上一讲《CSS初步介绍》中，讲授了CSS的入门知识，现在我们介绍一下HTML布局的知识 。
HTML布局的计划有Table布局、最风行的DIV布局、以及HTML5建议的DIV布局的替代计划 。
当HTML内容被阅读器显示后，全部HTML页面对应用者来说，就是一个显示信息与进行操作的界面 。我们常常见到相似下面的界面：
文章插图
应用word设计的一个简易界面
在这个界面中，全部HTML网页被分为题目区、导航区、内容区、状况栏区，下面我们分离用Table布局、DIV布局和HTML5建议的布局计划来实现该界面 。
1、Table布局计划应用Table布局计划，将全部阅读器的展现部分就是一个表格，然后我们设置好表格的单元格的大小及合并即可 。下面是应用Table布局计划的HTML页面：
<!DOCTYPE html><html> <head> 资源网 <title>layout001</title> <meta charset="utf-8" /> <style type="text/css"> html,body, table{ width:100%; height:100%; } #first_row{ height:6%; } #second_row{ height:91%; } #third_row{ height:3%; } body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } #header{ border:1px black solid; color:white; text-align:center; &nb资源网sp; background:green; } #navigator{ border:1px black solid; color:white; text-align:center; background:blue; } #content{ border:1px black solid; color:white; text-align:center; background:gray; } #footer{ border:1px black solid; color:white; text-align:center; background:orange; } </style> </head> <body> <table> <tr id="first_row"> <td id="header" colspan="2">题目区</td> </tr> <tr id="second_row"> <td id="navigator" width="15%">导航区</td> <td id="content" width="85%">内容区</td> </tr> <tr id="third_row"> <td id="footer" colspan="2">状况栏区</td> </tr> </table> </body></html>
推荐阅读
- 巧用Windows 10资源管理器 如何快速的打开Windows资源管理器
- 在win10打开注册表编辑器的七种方法 windows10如何打开注册表
- 告诉你微信指数的正确打开姿势！ 微信指数如何查看?
- 如何注册qq号 怎么注册申请腾讯QQ号
- 微信名字叫什么好听？ 如何起一个好听的微信昵称?
- 如何制作大头菜分享一些制作大头菜的最佳方法(非常顶)
- 贵州|贵州教师招聘近8000人进面，如何在面试中突围？这些坑尽量避免
- 初学者在家如何练习架子鼓？ 架子鼓基本功
- 如何更高效地学习书法？ 如何学习书法
- 如何网上赚钱 网赚有哪些