用html css写显示一首诗
时间: 2024-09-27 15:04:08 浏览: 71
在HTML和CSS中,你可以创建一个美观的诗歌展示页面。首先,你需要用HTML编写结构,然后用CSS添加样式。这里是一个简单的例子:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>古诗展示</title>
<style>
.poem-container {
font-family: '宋体', sans-serif;
background-color: #f5f5f5;
padding: 20px;
border: 1px solid #ccc;
margin-bottom: 20px;
}
.line {
margin-bottom: 5px;
}
.author {
color: #666;
font-style: italic;
}
</style>
</head>
<body>
<div class="poem-container">
<h2>静夜思</h2>
<p class="author">作者:李白</p>
<div class="line">
床前明月光,
疑是地上霜。
</div>
<div class="line">
举头望明月,
低头思故乡。
</div>
</div>
</body>
</html>
```
在这个示例中,`.poem-container`设置了整体容器的样式,`.line`定义了每行诗的样式,`.author`用于标记作者信息。你可以替换"静夜思"、"李白"以及诗句内容,根据需要调整CSS以达到理想的展示效果。
阅读全文