做一个关于勤奋好学的典故—凿壁借光的静态网页的代码,要求网页内容丰富图文并茂!
时间: 2024-10-15 18:06:34 浏览: 17
创建一个关于“凿壁借光”的静态网页需要HTML、CSS和JavaScript来添加交互性和美化页面。这里是一个简单的示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>凿壁借光的故事</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
img {
display: block;
margin: 20px auto;
width: 70%;
border-radius: 5px;
}
h1, p {
text-align: center;
}
.story {
line-height: 1.6;
margin-bottom: 30px;
}
.button-container {
text-align: center;
}
.button {
background-color: dodgerblue;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">
<h1>凿壁借光 - 一个勤奋好学的故事</h1>
<img src="https://example.com/zao bei ji guang.jpg" alt="凿壁借光插图">
<p class="story">
曾经有一位名叫匡衡的年轻人,他家境贫寒却极其热爱学习。为了能在夜间读书,他不惜在自家墙壁上挖一个小洞,让邻居家的灯光透过来照亮他的书本。尽管条件艰苦,但他始终坚持不懈地学习,最终成为了一位学问渊博的大儒。
</p>
<a href="#" class="button button-primary">了解更多关于匡衡的故事</a>
</div>
</body>
</html>
```
在这个示例中,我们用HTML结构构建了页面,包括标题、图片、故事文本以及一个链接到更多详情的按钮。CSS用于样式化,如字体、颜色和布局。请注意替换`https://example.com/zao bei ji guang.jpg`为实际的图片URL。
阅读全文