HTML 和 CSS 来创建 ATM 系统的主菜单
时间: 2024-02-18 19:04:42 浏览: 20
下面是一个简单的示例,使用 HTML 和 CSS 来创建 ATM 系统的主菜单页面:
```html
<!DOCTYPE html>
<html>
<head>
<title>ATM系统-主菜单</title>
<style>
body {
background-color: #f1f1f1;
}
nav {
background-color: white;
border: 1px solid #ccc;
padding: 20px;
width: 300px;
margin: 50px auto;
box-shadow: 2px 2px 5px #ccc;
}
h1 {
text-align: center;
font-size: 24px;
margin-top: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
li {
display: inline-block;
margin-right: 10px;
}
a {
display: block;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
text-decoration: none;
border-radius: 4px;
}
a:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<nav>
<h1>ATM系统-主菜单</h1>
<ul>
<li><a href="#">账户余额</a></li>
<li><a href="#">取款</a></li>
<li><a href="#">存款</a></li>
<li><a href="#">转账</a></li>
<li><a href="#">修改密码</a></li>
<li><a href="#">退出系统</a></li>
</ul>
</nav>
</body>
</html>
```
这个示例页面包含一个简单的主菜单,使用 CSS 对菜单进行样式设置,使其看起来更加美观。你可以根据自己的需要修改样式和菜单内容,以适应你的 ATM 系统设计。