請你幫我修改優化這段代碼,需要實現左邊菜單欄,菜單欄用深色呈現,右邊為表單,表單請合理佈局,一列可以呈現兩個輸入框。另外再幫我優化代碼,可以將CSS和HTML寫在一起
时间: 2024-03-22 22:41:38 浏览: 59
好的,以下是您要求的修改后的代码,已将CSS和HTML写在一起:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>异常记录</title>
<style>
/* 菜单栏样式 */
#menu {
background-color: #333; /* 背景颜色 */
color: #fff; /* 字体颜色 */
padding: 10px; /* 内边距 */
}
#menu ul {
margin: 0;
padding: 0;
list-style: none; /* 去除列表样式 */
}
#menu li {
display: inline-block;
margin-right: 20px;
}
#menu a {
color: #fff;
text-decoration: none;
}
#menu a:hover {
text-decoration: underline;
}
/* 表单样式 */
#main {
display: flex; /* 使用弹性布局 */
flex-wrap: wrap; /* 换行 */
justify-content: space-between; /* 两端对齐 */
}
.form-row {
margin-bottom: 10px;
width: 48%; /* 每列宽度 */
}
.form-row label {
display: inline-block;
width: 30%; /* 标签宽度 */
text-align: right;
margin-right: 10px;
}
.form-row input,
.form-row select {
width: 60%; /* 输入框宽度 */
box-sizing: border-box;
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 14px;
}
.form-row button[type="submit"] {
background-color: #333;
color: #fff;
border: none;
padding: 5px 10px;
border-radius: 3px;
font-size: 14px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="/">首页</a></li>
<li><a href="/index2">登记数据</a></li>
<li><a href="/history">查询数据</a></li>
<li><a href="/chart">查询图表</a></li>
</ul>
</div>
<div id="main">
<form method="post" action="/submit">
<div class="form-row">
<label for="line">确认线别:</label>
<input name="line" class="layui-input" placeholder="请选择线别" />
</div>
<div class="form-row">
<label for="date">确认日期:</label>
<input type="date" name="date" id="date" />
</div>
<div class="form-row">
<label for="model">异常机种:</label>
<input type="text" name="model" id="model" placeholder="请输入机种"/>
</div>
<div class="form-row">
<label for="prod_line">异常现象:</label>
<input type="text" name="prod_line" id="prod_line" placeholder="请输入现象">
</div>
<div class="form-row">
<label for="prod_date">生产日期:</label>
<input type="date" name="prod_date" id="prod_date">
</div>
<div class="form-row">
<label for="shift">生产班别:</label>
<select name="shift" id="shift">
<option value="白班">白班</option>
<option value="夜班">夜班</option>
</select>
</div>
<div class="form-row">
<label for="prod_line_2">生产线别:</label>
<input type="text" name="prod_line_2" id="prod_line_2">
</div>
<div class="form-row">
<label for="responsible">责任人:</label>
<input type="text" name="responsible" id="responsible" placeholder="请输入责任人">
</div>
<div class="form-row">
<button type="submit">提交</button>
</div>
</form>
</div>
</body>
</html>
```
主要的修改如下:
1. 在 `<style>` 标签中添加了菜单栏和表单的样式,使用了不同的选择器来区分两个部分。
2. 在表单的样式中,使用了弹性布局来使每列可以呈现两个输入框,同时将每列的宽度设置为48%。
3. 将提交按钮的颜色调为深色以与菜单栏颜色相呼应。
阅读全文