你现在是一位前端程序员。 我现在要帮我优化下面的代码要求尽量美观请快速输出防止网络超时 !DOCTYPE htmlhtmlhead title参数设置title style body margin 0; padding 0; font-family Arial sans-serif; background-color #f7f7f7; lsidebar pos
<!DOCTYPE html>
<html>
<head>
<title>参数设置</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f7f7f7;
}
<pre><code> .lsidebar {
position: fixed;
top: 0;
left: -300px;
width: 300px;
height: 100%;
background-color: #fff;
box-shadow: 0 0 20px rgba(0,0,0,0.2);
transition: left 0.5s ease-in-out;
z-index: 9999;
}
.lsidebar.show {
left: 0;
}
.rsidebar {
position: fixed;
top: 0;
right: -500px;
width: 500px;
height: 100%;
background-color: #fff;
box-shadow: 0 0 20px rgba(0,0,0,0.2);
transition: right 0.5s ease-in-out;
z-index: 9999;
}
.rsidebar.show {
right: 0;
}
.main-content {
padding: 20px;
max-width: 800px;
margin: 0 auto;
}
h1 {
font-size: 36px;
margin-top: 0;
}
p {
font-size: 16px;
line-height: 1.5;
}
label {
display: block;
font-weight: bold;
margin-bottom: 10px;
}
input[type="text"] {
padding: 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ccc;
margin-bottom: 20px;
width: 100%;
box-sizing: border-box;
}
button {
padding: 10px;
font-size: 16px;
cursor: pointer;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
margin-right: 10px;
}
button:hover {
background-color: #0062cc;
}
button:focus {
outline: none;
}
.btn-group {
margin-bottom: 20px;
}
.btn-group button:last-child {
margin-right: 0;
}
.user-list {
list-style-type: none;
padding: 0;
margin: 0;
}
.user-list li {
padding: 10px;
border-bottom: 1px solid #ccc;
}
.user-list li:last-child {
border-bottom: none;
}
.radio-button {
display: inline-block;
position: relative;
margin-right: 20px;
}
.radio-button input[type="radio"] {
opacity: 0;
position: absolute;
top: 0;
left: 0;
}
.radio-button span {
display: block;
height: 30px;
width: 30px;
border: 2px solid #ccc;
border-radius: 50%;
text-align: center;
line-height: 30px;
cursor: pointer;
}
.radio-button input[type="radio"]:checked + span {
background-color: #2196F3;
color: #fff;
}
</style>
</code></pre>
</head>
<body>
<div class="lsidebar">
<h1>参数设置</h1>
<div>
<h2>单双面</h2>
<label class="radio-button">
<input type="radio" name="single-sided" value="single">
<span>单面</span>
</label>
<label class="radio-button">
<input type="radio" name="single-sided" value="double">
<span>双面</span>
</label>
</div>
<pre><code> <div>
<h2>文件类型</h2>
<label class="radio-button">
<input type="radio" name="file-type" value="pdf">
<span>PDF</span>
</label>
<label class="radio-button">
<input type="radio" name="file-type" value="jpg">
<span>JPG</span>
</label>
</div>
<div>
<h2>DPI</h2>
<label class="radio-button">
<input type="radio" name="dpi" value="200">
<span>200</span>
</label>
<label class="radio-button">
<input type="radio" name="dpi" value="500">
<span>500</span>
</label>
</div>
</div>
<div class="rsidebar">
<div class="btn-group">
<ul class="user-list">
<li>张三</li>
<li>李四</li>
<li>王五</li>
<li>赵六</li>
</ul>
<button type="submit">保存</button>
</div>
</div>
<div class="main-content">
<h1>主要内容</h1>
<p>这里是网页的主要内容。</p>
<form>
<label for="file-name">文件名称</label>
<input type="text" id="file-name" placeholder="请输入文件名称">
</form>
<div class="btn-group">
<button onclick="showUserList()">用户列表</button>
<button onclick="showParam()">参数</button>
</div>
</div>
<script>
var mainContent = document.querySelector('.main-content');
var lsidebar = document.querySelector('.lsidebar');
var rsidebar = document.querySelector('.rsidebar');
function showParam() {
if(lsidebar.classList.contains('show')) {
lsidebar.classList.remove('show');
} else {
lsidebar.classList.add('show');
}
}
function showUserList() {
if(rsidebar.classList.contains('show')) {
rsidebar.classList.remove('show');
} else {
rsidebar.classList.add('show');
}
}
var userList = document.querySelector(".user-list");
var saveBtn = document.querySelector(".rsidebar button");
saveBtn.addEventListener("click", function(event) {
event.preventDefault();
// 保存操作
});
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/Mcv 著作权归作者所有。请勿转载和采集!