做一个html+css制作一个图书管理系统首页
时间: 2023-10-05 07:06:25 浏览: 267
html图书管理系统
好的,以下是一个简单的图书管理系统首页的HTML和CSS代码:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图书管理系统</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<h1>图书管理系统</h1>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">图书查询</a></li>
<li><a href="#">读者管理</a></li>
<li><a href="#">管理员登录</a></li>
</ul>
</div>
<div class="content">
<h2>欢迎来到图书管理系统</h2>
<p>本系统包括图书查询、读者管理、管理员登录等功能。</p>
<p>请点击上方菜单进行操作。</p>
</div>
<div class="footer">
<p>© 2021 图书管理系统</p>
</div>
</body>
</html>
```
CSS代码:
```css
body {
margin: 0;
padding: 0;
font-family: "Microsoft YaHei", Arial, sans-serif;
}
.header {
background-color: #333;
color: #fff;
padding: 20px;
}
.header h1 {
margin: 0;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
float: right;
}
.header li {
display: inline-block;
margin-left: 20px;
}
.header a {
color: #fff;
text-decoration: none;
}
.content {
padding: 50px;
text-align: center;
}
.footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
```
效果如下:
![图书管理系统首页](https://i.imgur.com/0D1m5Aa.png)
阅读全文