欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

HTML表格布局实例讲解_HTML/Xhtml_网页制作

程序员文章站 2022-04-20 10:00:05
...
HTML 文档中的元素是一个接着一个排列的，只是简单地在在块级元素的前后加上拆行，是一种流水布局。但是，我们所见到的 Web 页面按照一定的规则布局排版的（通常是多列的），所以就要借助一定的方法来实现这种布局，通常的解决方案是：使用区块元素
或 表格（）来布局 Web 页面的内容。

使用表格进行布局，是一种较老的布局解决方案。并不推荐使用，我们应该总是使用表格来显示表格化的数据。

HTML 文档

CSS Code复制内容到剪贴板
  2. "en">
  4. "UTF-8">
  6. "stylesheet" href="css/mystyle.css">
  7. Island estaurant
"container">
    • "header" colspan="2">

  • 点菜系统

    		•
    "menu">
  • 菜品
  • "dishes">
  • 小鸡炖蘑菇
  • 家常豆腐
  • 酸辣土豆丝
    		•  "content">
  • 小鸡炖蘑菇：
  • 幼鸡一只
    • "footer" colspan="2">世俗孤岛的餐厅

    • CSS 文件

    CSS Code复制内容到剪贴板
    1. /*整个点餐系统的界面*/
    2. #container
    3. {
    4. width: 600px;
    5. margin: 100px;
    6. /*取消单元格边框之间的边距*/
    7. border-spacing: 0;
    8. }
    9. /*点餐系统界面的头部*/
    10. #header
    11. {
    12. background-color: red;
    13. text-align: center;
    14. }
    15. h1
    16. {
    17. margin-bottom: 0px;
    18. }
    19. /*点餐系统界面的菜单*/
    20. #menu
    21. {
    22. background-color: #FFD700;
    23. height: 200px;
    24. width: 150px;
    25. }
    26. #dishes
    27. {
    28. padding-top: 10px;
    29. padding-left: 10px;
    30. line-height: 20px;
    31. }
    32. /*点餐系统界面的菜品详情*/
    33. #content
    34. {
    35. background-color: gray;
    36. height: 200px;
    37. width: 450px;
    38. }
    39. /*点餐系统界面的尾部*/
    40. #footer
    41. {
    42. background-color: blue;
    43. height: 25px;
    44. text-align: center;
    45. }

    效果图：

    HTML表格布局实例讲解_HTML/Xhtml_网页制作

    以上就是本文的全部内容，希望对大家的学习有所帮助。

    HTML表格布局实例讲解_HTML/Xhtml_网页制作

    声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

    相关文章

    相关视频

    网友评论

    文明上网理性发言，请遵守 新闻评论服务协议

    我要评论
  • HTML表格布局实例讲解_HTML/Xhtml_网页制作

    • 专题推荐

    作者信息
    HTML表格布局实例讲解_HTML/Xhtml_网页制作

    认证0级讲师

    发布技术文章
    • 最新文章
    • 热门排行
    推荐视频教程
  • HTML表格布局实例讲解_HTML/Xhtml_网页制作javascript初级视频教程
  • HTML表格布局实例讲解_HTML/Xhtml_网页制作jquery 基础视频教程
    • 视频教程分类

    ：公益在线php培训，帮助PHP学习者快速成长！

    Copyright 2014-2021 https://www.php.cn/ All Rights Reserved | 苏ICP备2020058653号-1HTML表格布局实例讲解_HTML/Xhtml_网页制作关于我们免责申明赞助与捐赠广告合作

    HTML表格布局实例讲解_HTML/Xhtml_网页制作   HTML表格布局实例讲解_HTML/Xhtml_网页制作
    相关标签： HTML 表格 布局

    上一篇： 关于overflow-y:hidden; overflow-X:auto;在IE9的问题_html/css_WEB-ITnose

    下一篇： PHP获取链表中倒数第K个节点的方法讲解

    推荐阅读