要使用
Web前端技术
设计出“重点监控药物智能用药辅助决策系统”网站，你可以按照以下步骤进行：
### 1. 项目概述
- **适用对象**：23级大数据应用技术专业学生
- **考核形式**：综合应用形式
- **满分**：100分
- **完成时限**：4天（截至2024年
12月5日前）
### 2. 项目需求
#### 2.1 流程描述
1. **登录页面 (`login.html`/`jsp`)**：
- 用户输入账号密码进行登录。
- 设置一个管理员账号 `Admin`，密码 `1234
56`。
- 登录成功后跳转到主页 (`index.html`/`jsp`)。
2. **主页 (`index.html`/`jsp`)**：
- 显示主要功能选项，例如“精准用药方案推荐”。
- 单击“精准用药方案推荐”跳转到详细页面 (`detail1.html`/`jsp`)。
3. **详细页面 (`detail1.html`/`jsp`)**：
- 输入患者信息（姓名、住院号、科室等），其他信息自动填充。
- 选择推荐用药类别（例如：镇痛药）并填写相关选项。
- 提交后显示等待界面，等待结束后跳转到结果页面 (`detail2.html`/`jsp`)。
4. **结果页面 (`detail2.html`/`jsp`)**：
- 显示推荐的用药方案。
- 单击“返回”按钮返回主页。
### 3. 技术栈
- **HTML
5**：用于构建网页结构。
- **CSS3**：用于美化网页，设置布局、字体、颜色等。
- **JavaScript**：用于实现动态交互，例如表单验证、轮播图等。
### 4. 文件结构
- **HTML文件**：
- `index.html`：主页
- `login.html`：登录页
- `detail1.html`：详细页面
- `detail2.html`：结果页面
- **CSS文件**：
- `styles.css`：全局样式文件
- **JavaScript文件**：
- `script.js`：全局脚本文件
- **图像文件**：
- `images/`：存放所有图片资源
###
5. 示例代码
####
5.1 `login.html`
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="login-container">
<h2>重点监控药物智能用药辅助决策系统</h2>
<form id="loginForm">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<br>
<button type="submit">登录</button>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
```
####
5.2 `styles.css`
```css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
.login-container {
width: 300px;
margin: 100px auto;
padding: 20px;
background-color: white;
border-radius:
5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
}
label {
display: block;
margin-top: 10px;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 8px;
margin-top:
5px;
border: 1px solid #ccc;
border-radius: 3px;
}
button {
width: 100%;
padding: 10px;
margin-top: 20px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
}
button:hover {
background-color: #00
56b3;
}
```
####
5.3 `script.js`
```javascript
document.getElementById('loginForm').addEventListener('submit', function(event) {
event.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
if (username === 'Admin' && password === '1234
56') {
window.location.href = 'index.html';
} else {
alert('用户名或密码错误');
}
});
```
### 6. 问题处理
- **图片素材**：从大平台收集美观的图片，并使用Photoshop裁剪成适合网页尺寸的图片。
- **配色**：选择自然舒适的配色方案。
- **表单
设计**：参考官方文档和教程，确保表单
设计合理且易于使用。
### 7. 总结
通过这个项目的制作，你将能够熟练掌握HTML
5、CSS3和JavaScript的基本应用，提升网页
设计和开发能力。同时，你也将在实践中巩固所学知识，提高解决问题的能力。
希望这些指导对你有所帮助！如果有任何疑问，请随时提问。
本文主要介绍了CSS中盒模型的边框及颜色设置方法，并详细讲解了如何设置内外边距来实现元素的居中显示。此外，还通过仿照学校首页制作模块的方式，帮助读者深入理解内外边距的应用。
扫一扫
5324
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
