請你幫我添加CSS美化，另外檢查代碼修改bug
时间: 2024-03-22 07:41:20 浏览: 16
好的，这里是添加了一些 CSS 美化的代码，并且修复了一些 HTML 代码上的错误：
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>异常记录</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f8f8f8;
margin: 0;
padding: 0;
}
#menu {
background-color: #333;
color: #fff;
display: flex;
justify-content: flex-end;
padding: 10px;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu ul li {
display: inline-block;
margin-left: 20px;
}
#menu ul li:first-child {
margin-left: 0;
}
#menu ul li a {
color: #fff;
text-decoration: none;
padding: 10px;
}
#menu ul li a:hover {
background-color: #555;
}
#main {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
border-radius: 5px;
margin-top: 50px;
}
h1 {
font-size: 24px;
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 10px;
font-weight: bold;
}
input[type="text"],
input[type="date"],
select {
border: 1px solid #ccc;
border-radius: 4px;
padding: 10px;
width: 100%;
box-sizing: border-box;
margin-bottom: 20px;
}
input[type="submit"] {
background-color: #333;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #555;
}
</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">
<h1>异常记录登记</h1>
<form method="post" action="/submit">
<div id="form1">
<label for="line">确认线别：</label>
<input name="line" class="layui-input" placeholder="请选择线别" />
</div>
<div id="form2">
<label for="date">确认日期：</label>
<input type="date" name="date" id="date" />
</div>
<div id="form3">
<label for="model">异常机种：</label>
<input type="text" name="model" id="model" placeholder="请输入机种"/>
</div>
<div id="form4">
<label for="prod_line">异常现象：</label>
<input type="text" name="prod_line" id="prod_line" placeholder="请输入现象">
</div>
<div id="form5">
<label for="prod_date">生产日期：</label>
<input type="date" name="prod_date" id="prod_date">
</div>
<div id="form6">
<label for="shift">生产班别：</label>
<select name="shift" id="shift">
<option value="白班">白班</option>
<option value="夜班">夜班</option>
</select>
</div>
<div id="form7">
<label for="prod_line_2">生产线别：</label>
<input type="text" name="prod_line_2" id="prod_line_2">
</div>
<div id="form8">
<label for="responsible">责任人：</label>
<input type="text" name="responsible" id="responsible" placeholder= "请输入责任人">
</div>
<input type="submit" value="提交">
</form>
</div>
</body>
</html>
```
这个代码添加了一些基本的 CSS 样式，比如字体、背景颜色、边距等。同时，增加了表单输入框的样式，让它们看起来更加美观。我还修复了一些 HTML 代码上的错误，比如 `name` 属性重复等。
相关推荐
最新推荐
纯CSS实现的当鼠标移上图片添加阴影效果代码
个效果挺实用，当把鼠标放到一幅静止的图片上，图片的四周边框会出现阴影，具有立体感的效果，代码是第二次修正，能适应大小不同的图片，值得大家尝试一用哦。
CSS 图片横向排列实现代码
一个CSS布局实例，介绍的是一个横向排列的图片列表，这也是大家在从事网页布局时候最常见的一种布局实例，有必要掌握，本代码已经过了优化，个别细节你需根据你的网站主CSS风格进行调整，才能完美搭配。
使用CSS3代码绘制可爱的Hello Kitty猫
主要介绍了使用CSS3代码绘制可爱的Hello Kitty猫的相关资料,需要的朋友可以参考下
html+css制作div标签增加右上角删除图标的示例代码
三、参考代码 <style> .container{ width:60px; height:60px; border: 1px dotted red; position:relative; } .content{ position:relative; top:20px; } .delete{ width:20px; height:20px; border...
JS+CSS实现闪烁字体效果代码
主要介绍了JS+CSS实现闪烁字体效果代码,可实现文字按照指定颜色逐次闪烁显示的功能,代码非常简单实用,需要的朋友可以参考下
STC89C51 简单时钟
STC89C51 简单时钟,叫你从基础开始学习单片机，
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
MATLAB归一化方法大比拼：5种方法，哪种最适合你的数据？
# 1. MATLAB归一化概述
归一化是一种数据预处理技术，用于将数据缩放到特定范围内，从而消除不同特征之间的尺度差异。在MATLAB中，有各种归一化方法可用于不同类型的数据和应用程序。
归一化的主要目的是：
- 提高模型的训练效率和准确性，通过消除特征之间的尺度差异，使模型能够更有效地学习
failed to register layer: ApplyLayer exit status 1 stdout: stderr: archive/tar: invalid tar header
很抱歉听到这个问题。这个错误通常是由于Docker镜像损坏或Docker存储库中缺少所需的图层引起的。您可以尝试以下几种方法来解决这个问题：
1. 清理Docker镜像和容器：使用命令“docker system prune”清理不再使用的Docker对象。
2. 检查Docker存储库：确保您正在使用可靠的Docker存储库，并检查是否存在所有必需的图层。
3. 重新下载Docker镜像：如果您确定问题是由于损坏的Docker镜像引起的，则可以尝试重新下载Docker镜像。
4. 更新Docker版本：如果您使用的是旧版Docker，则可能会出现此问题。尝试更新到最新版本的Docke
Linux系统常用操作命令大全手册
附件是Linux系统常用操作命令大全手册，是 markdown格式，其中覆盖了Linux系统管理、文件操作、网络配置等多个方面，都是日常工作中非常常用的命令，欢迎大家下载学习使用！