用css写一个借阅历史的界面
时间: 2024-11-20 17:37:32 浏览: 7
为了创建一个借阅历史的界面,我们可以使用CSS来设计布局、颜色、字体和样式,使其清晰易读。下面是一个简单的HTML和CSS示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<title>借阅历史</title>
</head>
<body>
<div class="container">
<h1>借阅历史</h1>
<table class="borrow-history">
<thead>
<tr>
<th>书籍名称</th>
<th>借阅日期</th>
<th>归还日期</th>
</tr>
</thead>
<tbody>
<!-- 根据实际数据填充表格 -->
<tr>
<td>书名1</td>
<td>2023-01-01</td>
<td>2023-01-15</td>
</tr>
<tr>
<td>书名2</td>
<td>2023-02-01</td>
<td>未归还</td>
</tr>
<!-- 更多行... -->
</tbody>
</table>
</div>
</body>
</html>
```
```css
/* styles.css */
.container {
max-width: 700px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
border-radius: 5px;
}
h1 {
text-align: center;
font-size: 24px;
margin-bottom: 20px;
}
.borrow-history {
width: 100%;
border-collapse: collapse;
border: 1px solid #ccc;
}
.borrow-history th,
.borrow-history td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ccc;
}
.borrow-history th {
background-color: #e9ecef;
font-weight: bold;
}
.borrow-history tr:hover {
background-color: #f2f2f2;
}
```
这个例子中,我们创建了一个包含书籍名称、借阅日期和归还日期列的简单表格,并使用了CSS来设置容器样式、标题样式以及表头和行的默认样式。你可以根据实际需求调整颜色、字体和其他细节。
阅读全文