将代码中的class、id，换成简单的名字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="v
iewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<
style>
/* 基础样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Microsoft YaHei', sans-serif;
}
body {
background-color: #f0f2f5;
color: #333;
line-height: 1.
6;
padding: 20px;
}
/* 主内容区 */
.main-content {
overflow: hidden;
/* 清除
浮动 */
}
/* 侧边栏 - 使用
浮动布局 */
.sidebar {
float: right;
width: 200px;
height: 540px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba
(0, 0, 0, 0.05
);
padding: 15px;
}
.sidebar h3 {
padding-bottom: 10px;
margin-bottom: 15px;
text-a
lign: center;
border-bottom: 2px so
lid #e0e0e0;
}
.sidebar
ul {
list-
style: none;
}
.sidebar
li {
text-a
lign: center;
padding: 10px;
margin-bottom: 8px;
background-color: #f5f
7fa;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
}
.sidebar
li:hover {
background-color: #e
6f0ff;
color: #141415;
}
.sidebar
li.active {
color: rgb
(22, 21, 21
);
}
/* 内容区 - 使用
浮动布局 */
.content {
float: left;
width: calc
(100% - 220px
);
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba
(0, 0, 0, 0.05
);
padding: 20px;
}
/* 题目头部 */
.question-header {
overflow: hidden;
/* 清除
浮动 */
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px so
lid #eee;
}
.question-header p {
float: left;
color: #1e5
799;
}
.controls {
float: right;
}
/* 按钮样式 */
.btn {
display: in
line-block;
padding: 8px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: 500;
transition: all 0.2s ease;
text-a
lign: center;
}
.btn-primary {
color: rgb
(11, 11, 11
);
}
.btn-danger {
color: rgb
(22, 22, 22
);
}
.btn-secondary {
color: rgb
(9, 9, 9
);
}
.btn:hover {
opacity: 0.9;
transform: translateY
(-2px
);
box-shadow: 0 2px 5px rgba
(0, 0, 0, 0.1
);
}
/* 题目列表 */
.question-
list {
margin-top: 20px;
}
.question-item {
background-color: #f9f9f9;
border: 1px so
lid #e0e0e0;
border-radius: 8px;
padding: 20px;
margin-bottom: 25px;
position: relative;
}
.question-title {
overflow: hidden;
/* 清除
浮动 */
margin-bottom: 15px;
}
.question-title h4 {
float: left;
color: #00
7bff;
}
.delete-btn {
float: right;
}
/* 输入框样式 */
.question-input {
display: block;
/* width: 100%; */
padding: 10px;
margin-bottom: 15px;
border: 1px so
lid #ddd;
border-radius: 4px;
font-size: 1
6px;
}
/* 选项样式 */
.option-item {
margin-bottom: 12px;
overflow: hidden;
/* 清除
浮动 */
}
.option-label {
float: left;
width: 30px;
height: 30px;
line-height: 30px;
text-a
lign: center;
color: rgb
(32, 30, 30
);
border-radius: 50%;
font-weight: bold;
margin-right: 10px;
margin: auto;
}
.option-input {
margin: auto;
float: left;
padding: 8px;
border: 1px so
lid #ddd;
border-radius: 4px;
}
.select-btn {
float: right;
color: rgb
(14, 13, 13
);
width: 100px;
}
/* 选项控制 */
.option-controls {
text-a
lign: center;
margin-top: 15px;
}
/* 页脚按钮 */
.footer {
text-a
lign: center;
margin-top: 30px;
}
</
style>
</head>
<body>
<div class="main-content">
<div class="sidebar">
<h3>题目类型</h3>
<
ul>
<
li class="active">单选题</
li>
</
ul>
</div>
<div class="content">
<div class="question-header">
<p>单选题</p>
<div class="controls">
<button class="btn btn-primary" id="addQuestion">添加题目</button>
<button class="btn btn-danger" id="clearAll">清空所有</button>
</div>
</div>
<div class="question-
list" id="question
List">
<div class="empty-state">
</div>
</div>
<div class="footer">
<button class="btn btn-primary footer-btn" id="submitBtn">提交保存</button>
<button class="btn btn-secondary footer-btn" id="resetBtn">重新编辑</button>
</div>
</div>
</div>
</div>
<script>
document.addEvent
Listener
('DOMContentLoaded', function
() {
// 获取DOM元素
const question
List = document.getElementById
('question
List'
);
const addQuestionBtn = document.getElementById
('addQuestion'
);
const clearAllBtn = document.getElementById
('clearAll'
);
const submitBtn = document.getElementById
('submitBtn'
);
const resetBtn = document.getElementById
('resetBtn'
);
// 初始化题目数据
let questions = JSON.parse
(localStorage.getItem
('questions'
)) || [];
// 初始化渲染
renderQuestions
();
// 添加题目事件
addQuestionBtn.addEvent
Listener
('c
lick', function
() {
questions.push
({
id: Date.now
(),
title: '',
options: [
{ id: 1, text: '', correct: false },
{ id: 2, text: '', correct: false },
{ id: 3, text: '', correct: false },
{ id: 4, text: '', correct: false }
]
}
);
saveAndRender
();
}
);
// 清空所有题目
clearAllBtn.addEvent
Listener
('c
lick', function
() {
if
(confirm
('确定要清空所有题目吗？此操作不可恢复！'
)) {
questions = [];
saveAndRender
();
}
}
);
// 提交保存
submitBtn.addEvent
Listener
('c
lick', function
() {
localStorage.setItem
('questions', JSON.stringify
(questions
));
alert
('题目已成功保存！'
);
}
);
// 重新编辑
resetBtn.addEvent
Listener
('c
lick', function
() {
questions = JSON.parse
(localStorage.getItem
('questions'
)) || [];
renderQuestions
();
alert
('已恢复上次保存的内容'
);
}
);
// 题目列表点击事件委托
question
List.addEvent
Listener
('c
lick', function
(e
) {
if
(!e.target.closest
('.question-item'
)) return;
const questionId = parseInt
(e.target.closest
('.question-item'
).dataset.id
);
const question = questions.find
(q => q.id === questionId
);
// 删除题目
if
(e.target.class
List.contains
('delete-btn'
)) {
if
(confirm
('确定要删除这道题目吗？'
)) {
questions = questions.filter
(q => q.id !== questionId
);
saveAndRender
();
}
}
// 选择正确答案
if
(e.target.class
List.contains
('select-btn'
)) {
const optionId = parseInt
(e.target.dataset.optionId
);
// 重置所有选项
question.options.forEach
(opt => opt.correct = false
);
// 设置当前选项为正确答案
question.options.find
(opt => opt.id === optionId
).correct = true;
saveAndRender
();
}
// 添加选项
if
(e.target.class
List.contains
('add-option'
)) {
const newId = question.options.length > 0 ?
Math.max
(...question.options.map
(opt => opt.id
)) + 1 : 1;
question.options.push
({
id: newId,
text: '',
correct: false
}
);
saveAndRender
();
}
// 删除选项
if
(e.target.class
List.contains
('delete-option'
)) {
if
(question.options.length <= 4
) {
alert
('至少需要保留4个选项！'
);
return;
}
question.options.pop
();
saveAndRender
();
}
}
);
// 输入事件处理（无防抖）
question
List.addEvent
Listener
('input', function
(e
) {
if
(!e.target.closest
('.question-item'
)) return;
const questionId = parseInt
(e.target.closest
('.question-item'
).dataset.id
);
const question = questions.find
(q => q.id === questionId
);
// 题目输入
if
(e.target.class
List.contains
('question-input'
)) {
question.title = e.target.value;
}
// 选项输入
if
(e.target.class
List.contains
('option-input'
)) {
const optionId = parseInt
(e.target.dataset.optionId
);
const option = question.options.find
(opt => opt.id === optionId
);
option.text = e.target.value;
}
saveQuestions
(); // 只保存不重新渲染
}
);
// 保存题目到localStorage
function saveQuestions
() {
localStorage.setItem
('questions', JSON.stringify
(questions
));
}
// 保存并重新渲染
function saveAndRender
() {
saveQuestions
();
renderQuestions
();
}
// 渲染题目列表
function renderQuestions
() {
question
List.innerHTML = questions.map
((question, index
) => {
const optionsHtml = question.options.map
(option => `
<div class="option-item">
<div class="option-label">${String.fromCharCode
(64 + option.id
)}</div>
<input
type="text"
class="option-input"
placeholder="选项内容..."
value="${option.text}"
data-option-id="${option.id}"
>
<button
class="select-btn"
data-option-id="${option.id}"
style="background: ${option.correct ? '#28a
745' : ''}"
>
${option.correct ? '✓ 已选' : '选择'}
</button>
</div>
`
).join
(''
);
return `
<div class="question-item" data-id="${question.id}">
<div class="question-title">
<h4>题目 ${index + 1}</h4>
<button class="btn btn-danger delete-btn">删除</button>
</div>
<input
type="text"
class="question-input"
placeholder="请输入题目内容..."
value="${question.title}"
>
<div class="options-
list">
${optionsHtml}
</div>
<div class="option-controls">
<button class="btn btn-secondary add-option">添加选项</button>
<button class="btn btn-danger delete-option">删除选项</button>
</div>
</div>
`;
}
).join
(''
);
}
}
);
</script>
</body>
</html>
本文详细介绍了在IE6/IE7浏览器中，当使用<ul>元素进行左浮动时，内部<li>元素出现左侧边距增大的现象，并提供了通过设置li的list-style-position为outside来解决此问题的方法。
扫一扫
459
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
