HTML 页面布局、色彩搭配和视觉效果优化
当然，我可以为您进一步增加页面布局、色彩搭配、字体选择和视觉效果，以使HTML页面更加丰富。以下是更新后的示例代码：
<!DOCTYPE html>
<html>
<head>
<title>西游记</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f2f2f2;
margin: 0;
padding: 20px;
}
h1 {
color: #333333;
text-align: center;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
img {
display: block;
margin: 0 auto;
max-width: 300px;
height: auto;
margin-bottom: 20px;
animation: rotate 4s linear infinite;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
h2 {
color: #666666;
margin-bottom: 10px;
cursor: pointer;
transition: color 0.3s ease;
text-decoration: underline;
}
h2:hover {
color: #337ab7;
}
p {
color: #777777;
line-height: 1.5;
margin-bottom: 10px;
}
ul {
list-style-type: none;
padding-left: 0;
margin-bottom: 20px;
}
li {
margin-bottom: 5px;
}
a {
color: #337ab7;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.hidden {
display: none;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #ffffff;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
</style>
<script>
function toggleChapter(id) {
var chapter = document.getElementById(id);
chapter.classList.toggle('hidden');
}
</script>
</head>
<body>
<div class='container'>
<h1>西游记</h1>
<img src='path/to/cover.jpg' alt='封面图片'>
<h2 onclick='toggleChapter('chapters')'>书籍介绍</h2>
<div id='chapters' class='hidden'>
<p>《西游记》是中国古代四大名著之一，是明代作家吴承恩创作的神魔小说。小说以真人投胎转世的唐僧师徒四人西天取经的故事为主线，以唐僧师徒历经九九八十一难，最终得到真经的经历，融入了大量的神话传说和佛教、道教、儒家等思想，形象地刻画了人心善恶、善恶报应的哲理。</p>
</div>
<h2 onclick='toggleChapter('chapterList')'>章节列表</h2>
<ul id='chapterList' class='hidden'>
<li><a href='#chapter1'>第一回 那傻猴初度天庭陈述性命</a></li>
<li><a href='#chapter2'>第二回 唐僧取经不成反受难 斗战灵山教徒头目</a></li>
<li><a href='#chapter3'>第三回 师徒四众各显神通 悟空降妖翻世短见</a></li>
<!-- 添加更多章节 -->
</ul>
<h2 onclick='toggleChapter('author')'>作者简介</h2>
<div id='author' class='hidden'>
<p>吴承恩（1500年-1582年），明代文人，字汝忠，号射阳山人，江苏扬州府广陵人，祖籍浙江绍兴。他是一位杰出的小说家和文学评论家，被誉为小说批评的奠基人之一。吴承恩创作了《西游记》、《红楼梦》等杰出作品，成为中国古代文学史上的瑰宝。</p>
</div>
</div>
</body>
</html>
在这个示例中，我根据您的要求更新了页面布局和视觉效果。添加了一个名为.container的容器，用于包裹整个内容，并给其设置了最大宽度、边距、背景颜色、阴影效果和圆角边框。标题和封面图片应用了文字阴影和盒子阴影效果，以增加立体感。
您可以根据需要进一步调整样式和效果，以使页面符合您的期望。希望这个丰富的HTML页面满足了您的要求，并展现出更加丰富的视觉效果！
原文地址: https://www.cveoy.top/t/topic/jtQ 著作权归作者所有。请勿转载和采集!