首页请用HTML和CSS帮我写一个疫苗接种信息管理系统的主界面

请用HTML和CSS帮我写一个疫苗接种信息管理系统的主界面

时间: 2023-03-04 20:51:33 浏览: 173

毕设-疫苗管理系统

自己做的J2EE毕业设计，界面UI简洁大方，和传统的管理系统完全不同。

以下是一个简单的疫苗接种信息管理系统的主界面的 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> <header> <h1>疫苗接种信息管理系统</h1> </header> <nav> <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> </ul> </nav> <main> <h2>欢迎使用疫苗接种信息管理系统</h2> <p>该系统可以管理疫苗接种信息、疫苗库存、接种统计等信息。</p> <p>请在左侧导航栏中选择相应功能。</p> </main> <footer> <p>版权所有 © 2023 疫苗接种信息管理系统</p> </footer> </body> </html> ``` CSS 代码： ```css /* 设置页面背景颜色 */ body { background-color: #f5f5f5; margin: 0; } /* 设置页眉样式 */ header { background-color: #0047ab; color: #fff; text-align: center; padding: 20px; } /* 设置导航栏样式 */ nav { background-color: #eee; padding: 10px; } nav ul { margin: 0; padding: 0; list-style: none; display: flex; } nav li { margin-right: 20px; } nav a { text-decoration: none; color: #333; font-weight: bold; } nav a:hover { color: #0047ab; } /* 设置主要内容样式 */ main { padding: 20px; } /* 设置页脚样式 */ footer { background-color: #0047ab; color: #fff; text-align: center; padding: 10px; } ``` 该代码创建了一个简单的主界面，包括一个页眉、导航栏、主要内容和页脚。您可以将此示例代码复制到您的 HTML 和 CSS 文件中，并根据需要进行修改和扩展。

阅读全文