搜索

首页 >web前端 >html教程 >HTML表格布局实例讲解_HTML/Xhtml_网页制作

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

WBOY
WBOY原创
2016-06-01 14:22:331865浏览

HTML 文档中的元素是一个接着一个排列的，只是简单地在在块级元素的前后加上拆行，是一种流水布局。但是，我们所见到的 Web 页面按照一定的规则布局排版的（通常是多列的），所以就要借助一定的方法来实现这种布局，通常的解决方案是：使用区块元素

或 表格（）来布局 Web 页面的内容。

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

HTML 文档

CSS Code复制内容到剪贴板
  1. nbsp;html>   
  2. "en">   
  3.   
  4.      "UTF-8">   
  5.        
  6.      "stylesheet" href="css/mystyle.css">   
  7.     Island estaurant   
  8.   
  9.   
  10.     
"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. }  

    效果图：

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

    声明：
    本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
    上一篇：CSS截取字符串, 多余的字符用省略号显示下一篇：Table显示你要显示的边框代码_HTML/Xhtml_网页制作

    相关文章

    查看更多