四大名著网页设计 - 简洁美观的展示 - 常规

四大名著网页设计 - 简洁美观的展示

这个网页简单地展示了中国四大名著 - 西游记、三国演义、水浒传和红楼梦，包含封面图片和简介。使用CSS样式进行美化，可自定义调整和添加交互功能。

index.html 文件

<!DOCTYPE html>
<html>
<head>
  <title>四大名著网页设计</title>
  <link rel='stylesheet' href='styles.css'>
</head>
<body>
  <div class='container'>
    <div id='journey_to_the_west' class='book'>
      <h2>《西游记》</h2>
      <img src='journey_to_the_west.jpg' alt='西游记封面'>
      <p>《西游记》是中国古代四大名著之一，是明代小说家吴承恩创作的长篇神魔小说。故事以唐僧师徒四人西天取经为主线，讲述了孙悟空等人历经九九八十一难，最终取得真经的故事。</p>
    </div>

    <div id='romance_of_the_three_kingdoms' class='book'>
      <h2>《三国演义》</h2>
      <img src='romance_of_the_three_kingdoms.jpg' alt='三国演义封面'>
      <p>《三国演义》是中国古代四大名著之一，是明代小说家罗贯中创作的长篇历史小说。故事以东汉末年到西晋建立之间的历史事件为背景，描绘了蜀、魏、吴三国之间的战争、政治斗争和英雄人物的故事。</p>
    </div>

    <div id='water_margin' class='book'>
      <h2>《水浒传》</h2>
      <img src='water_margin.jpg' alt='水浒传封面'>
      <p>《水浒传》是中国古代四大名著之一，是明代作家施耐庵创作的长篇小说。故事讲述了宋江等人起义反抗统治阶级的故事，以及他们在梁山泊的经历。</p>
    </div>

    <div id='dream_of_the_red_chamber' class='book'>
      <h2>《红楼梦》</h2>
      <img src='dream_of_the_red_chamber.jpg' alt='红楼梦封面'>
      <p>《红楼梦》是中国古代四大名著之一，是清代作家曹雪芹创作的长篇小说。故事以贾、史、王、薛四大家族为背景，描绘了贾宝玉、林黛玉等人的爱情、宴会和家族纷争。</p>
    </div>
  </div>

  <footer>
    <p>版权所有 &copy; 2022 四大名著网页设计</p>
  </footer>
</body>
</html>

styles.css 文件

/* 全局样式 */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
}

.book {
  margin-bottom: 40px;
  text-align: center;
}

.book h2 {
  margin-top: 0;
  font-size: 24px;
}

.book img {
  max-width: 300px;
  height: auto;
  margin-bottom: 20px;
}

footer {
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}

使用说明

将上述代码复制到对应的文件中。
将四大名著的封面图片 (journey_to_the_west.jpg、romance_of_the_three_kingdoms.jpg、water_margin.jpg、dream_of_the_red_chamber.jpg) 放置在与HTML文件相同的文件夹中。

进一步提升网页的独特性和美观性

您可以根据需要进行修改和调整，以满足您的具体要求。例如:

添加更多的CSS样式和效果，例如动画、阴影等
使用JavaScript实现交互功能，例如鼠标悬停显示更多信息
添加响应式设计，让网页在不同设备上都能正常显示
使用图片轮播展示更多内容
添加导航栏，方便用户浏览其他页面