用CSS和HTML写一个水果库存静态页面

HTML代码：

  


  

    
水果库存
  
  

    

      

        
水果
        
数量
        
价格
      
    
    

      

        
苹果
        
100
        
$0.50
      
      

        
香蕉
        
50
        
$0.25
      
      

        
橙子
        
75
        
$0.40
      
    
  

CSS代码（保存为styles.css）：

/* Resetting default margin and padding */
body, h1, table {
  margin: 0;
  padding: 0;
}

header {
  background-color: #f8f8f8;
  padding: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  background-color: #ddd;
}

th, td {
  padding: 10px;
  text-align: left;
}

tbody tr:nth-child(even) {
  background-color: #f8f8f8;
}

tbody tr:hover {
  background-color: #e0e0e0;
}

这个示例展示了一个简单的水果库存静态页面，其中包含：

• 一个顶部的header元素，显示页面标题。
• 一个使用table标签创建的表格，用于展示水果库存信息。
• 表格包含一个thead部分，包含列标题，和一个tbody部分，包含具体的水果库存数据。
• 水果库存数据以行的形式展示，每一行包含水果名称、数量和价格信息。

通过CSS样式的设置，实现了以下布局和样式效果：

• header具有浅灰色的背景色和一定的内边距。
• 表格占满页面宽度，并具有合并的边框。
• 列标题具有灰色的背景色。
• 表格行交替显示不同的背景颜色，方便区分。
• 鼠标悬停在表格行时，行背景颜色有变化，提高可读性。

可以将HTML代码和CSS代码保存为文件，通过浏览器打开该文件，即可看到水果库存静态页面的效果。