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):
/* 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样式的设置,实现了以下布局和样式效果:文章来源:https://www.toymoban.com/news/detail-621596.html
- header具有浅灰色的背景色和一定的内边距。
- 表格占满页面宽度,并具有合并的边框。
- 列标题具有灰色的背景色。
- 表格行交替显示不同的背景颜色,方便区分。
- 鼠标悬停在表格行时,行背景颜色有变化,提高可读性。
可以将HTML代码和CSS代码保存为文件,通过浏览器打开该文件,即可看到水果库存静态页面的效果。 文章来源地址https://www.toymoban.com/news/detail-621596.html
到了这里,关于用CSS和HTML写一个水果库存静态页面的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!