请设计一个简单的赏析古诗网页代码
时间: 2023-07-30 21:06:06 浏览: 176
好的,以下是一个简单的赏析古诗的网页代码,您可以根据需要自行进行修改和完善。
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>古诗赏析</title>
</head>
<body>
<h1>古诗赏析</h1>
<form>
<label for="poem">请选择一首古诗:</label>
<select name="poem" id="poem">
<option value="1">静夜思</option>
<option value="2">登鹳雀楼</option>
<option value="3">春晓</option>
</select>
<button type="submit">查看赏析</button>
</form>
<div id="analysis"></div>
</body>
</html>
```
CSS代码:
```
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
margin-top: 50px;
}
form {
width: 50%;
margin: 50px auto;
text-align: center;
}
label {
display: block;
margin-bottom: 10px;
}
select {
font-size: 16px;
padding: 5px;
border-radius: 5px;
}
button {
font-size: 16px;
padding: 5px 10px;
border-radius: 5px;
background-color: #4CAF50;
color: #fff;
border: none;
cursor: pointer;
}
#analysis {
width: 50%;
margin: 50px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
text-align: center;
}
```
JavaScript代码:
```
const analysis = {
1: '床前明月光,疑是地上霜。举头望明月,低头思故乡。',
2: '白日依山尽,黄河入海流。欲窮千里目,更上一層樓。',
3: '春眠不覺曉,處處聞啼鳥。夜來風雨聲,花落知多少。'
}
const form = document.querySelector('form');
const analysisDiv = document.querySelector('#analysis');
form.addEventListener('submit', event => {
event.preventDefault();
const poemSelect = document.querySelector('#poem');
const poemValue = poemSelect.value;
const poemText = poemSelect.options[poemSelect.selectedIndex].text;
const poemAnalysis = analysis[poemValue];
analysisDiv.innerHTML = `<h2>${poemText}</h2><p>${poemAnalysis}</p>`;
});
```
这段代码中,我们使用了HTML、CSS和JavaScript来实现一个简单的赏析古诗的网页。其中,HTML部分包括一个标题、一个表单和一个用于显示赏析的div;CSS部分主要用于样式的设置;JavaScript部分则负责表单的处理和赏析的显示。代码中使用了一个JavaScript对象来存储古诗和它们的赏析,当用户选择一首古诗并提交表单后,JavaScript会根据用户的选择在对象中查找对应的赏析,并将其显示在网页上。
阅读全文
相关推荐















