suchen

Heim >Web-Frontend >HTML-Tutorial >HTML表格布局实例讲解_HTML/Xhtml_网页制作

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

WBOY
WBOYOriginal
2016-06-01 14:22:331858Durchsuche

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. }  

    效果图：

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

    Stellungnahme：
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Vorheriger Artikel：CSS截取字符串, 多余的字符用省略号显示Nächster Artikel：Table显示你要显示的边框代码_HTML/Xhtml_网页制作

    In Verbindung stehende Artikel

    Mehr sehen