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

捉只树袋熊2023-07-31 19:28

HTML代码：

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <header>
    <h1>水果库存</h1>
  </header>
  <table>
    <thead>
      <tr>
        <th>水果</th>
        <th>数量</th>
        <th>价格</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>苹果</td>
        <td>100</td>
        <td>$0.50</td>
      </tr>
      <tr>
        <td>香蕉</td>
        <td>50</td>
        <td>$0.25</td>
      </tr>
      <tr>
        <td>橙子</td>
        <td>75</td>
        <td>$0.40</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

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

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代码保存为文件，通过浏览器打开该文件，即可看到水果库存静态页面的效果。