HTML表格布局实例讲解

2019-01-15 09:32:48刘景俊

CSS 文件

CSS Code复制内容到剪贴板
  • /*整个点餐系统的界面*/   #container   
  • {        width: 600px;   
  •     margin: 100px;        /*取消单元格边框之间的边距*/  
  •     border-spacing: 0;    }   
  • /*点餐系统界面的头部*/   #header  
  • {        background-color: red;   
  •     text-align: center;    }   
  • h1    {   
  •     margin-bottom: 0px;    }   
  • /*点餐系统界面的菜单*/   #menu  
  • {        background-color: #FFD700;   
  •     height: 200px;        width: 150px;   
  • }    #dishes  
  • {        padding-top: 10px;   
  •     padding-left: 10px;        line-height: 20px;   
  • }    /*点餐系统界面的菜品详情*/  
  • #content    {   
  •     background-color: gray;        height: 200px;   
  •     width: 450px;    }   
  • /*点餐系统界面的尾部*/   #footer  
  • {        background-color: blue;   
  •     height: 25px;        text-align: center;   
  • }  

    效果图:

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