• 日期: 2027-07-15 22:23:51
  • 标签: 常规

当设计一个关于四大名著的网页时，可以进一步完善页面，以提升用户体验。以下是一些可以添加的功能和效果：

  1. 导航栏固定：

    • 使用CSS的position: fixed属性使导航栏在页面滚动时保持固定位置。

  2. 平滑滚动到锚点：

    • 使用JavaScript的scrollIntoView方法，使页面平滑滚动到锚点处。

  3. 搜索功能：

    • 在导航栏中添加一个搜索框，用户可以输入关键词搜索书籍或相关内容。

  4. 分页功能：

    • 如果书籍信息较多，可以使用JavaScript实现分页功能，使用户可以浏览多页信息。

下面是对代码进行修改以添加上述功能和效果的示例：

index.html文件:

<!DOCTYPE html>
<html>
<head>
  <title>四大名著</title>
  <link rel="stylesheet" href="styles.css">
  <script src="script.js"></script>
</head>
<body>
  <header>
    <h1>四大名著</h1>
    <nav id="navbar">
      <ul>
        <li><a href="#journey_to_the_west" onclick="scrollToSection('#journey_to_the_west')">西游记</a></li>
        <li><a href="#romance_of_the_three_kingdoms" onclick="scrollToSection('#romance_of_the_three_kingdoms')">三国演义</a></li>
        <li><a href="#dream_of_the_red_chamber" onclick="scrollToSection('#dream_of_the_red_chamber')">红楼梦</a></li>
        <li><a href="#water_margin" onclick="scrollToSection('#water_margin')">水浒传</a></li>
      </ul>
      <div class="search">
        <input type="text" id="searchInput" placeholder="请输入关键词..."/>
        <button onclick="searchBooks()">搜索</button>
      </div>
    </nav>
  </header>

  <main>
    <div id="journey_to_the_west" class="book">
      <h2>《西游记》</h2>
      <img src="journey_to_the_west.jpg" alt="西游记封面" onclick="showModal('journey_to_the_west')">
      <p>《西游记》是中国古代四大名著之一，是明代小说家吴承恩创作的长篇神魔小说。故事以唐僧师徒四人西天取经为主线，讲述了孙悟空等人历经九九八十一难，最终取得真经的故事。</p>
    </div>

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

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

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

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

  <div id="modal" class="modal">
    <div class="modal-content">
      <span class="close" onclick="closeModal()">&times;</span>
      <h2 id="modal-title"></h2>
      <img id="modal-image" src="" alt=""/>
      <p id="modal-description"></p>
    </div>
  </div>
</body>
</html>

styles.css文件:

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

header {
  background-color: #333;
  color: #fff;
  padding: 20px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline;
  margin-right: 20px;
}

nav a {
  color: #fff;
  text-decoration: none;
}

nav .search {
  display: inline;
  margin-left: 20px;
}

nav .search input[type="text"] {
  padding: 5px;
  border-radius: 5px;
  border: none;
}

nav .search button {
  padding: 5px 10px;
  border-radius: 5px;
  border: none;
  background-color: #ddd;
  cursor: pointer;
}

main {
  margin: 100px 20px 20px; /* 新增上边距以避免内容被导航栏遮挡 */
}

.book {
  margin-bottom: 40px;
}

.book h2 {
  margin-top: 0;
}

.book img {
  width: 200px;
  height: auto;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
}

.book img:hover {
  transform: scale(1.1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

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

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}

.modal-content {
  background-color: #fff;
  margin: 20px auto;
  padding: 20px;
  max-width: 600px;
  text-align: center;
}

.modal-content img {
  width: 200px;
  height: auto;
  margin-bottom: 20px;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* 响应式样式 */
@media (max-width: 600px) {
  nav li {
    display: block;
    margin-bottom: 10px;
  }

  .book img {
    width: 100%;
  }
}

script.js文件:

function showModal(bookId) {
  var modal = document.getElementById("modal");
  var modalTitle = document.getElementById("modal-title");
  var modalImage = document.getElementById("modal-image");
  var modalDescription = document.getElementById("modal-description");

  if (bookId === "journey_to_the_west") {
    modalTitle.textContent = "《西游记》";
    modalImage.src = "journey_to_the_west.jpg";
    modalDescription.textContent = "《西游记》是中国古代四大名著之一，是明代小说家吴承恩创作的长篇神魔小说。故事以唐僧师徒四人西天取经为主线，讲述了孙悟空等人历经九九八十一难，最终取得真经的故事。";
  } else if (bookId === "romance_of_the_three_kingdoms") {
    modalTitle.textContent = "《三国演义》";
    modalImage.src = "romance_of_the_three_kingdoms.jpg";
    modalDescription.textContent = "《三国演义》是中国古代四大名著之一，是明代小说家罗贯中创作的长篇历史小说。故事以东汉末年到西晋建立之间的历史事件为背景，描绘了蜀、魏、吴三国之间的战争、政治斗争和英雄人物的故事。";
  } else if (bookId === "dream_of_the_red_chamber") {
    modalTitle.textContent = "《红楼梦》";
    modalImage.src = "dream_of_the_red_chamber.jpg";
    modalDescription.textContent = "《红楼梦》是中国古代四大名著之一，是清代作家曹雪芹创作的长篇小说。故事以贾、史、王、薛四大家族为背景，描绘了贾宝玉、林黛玉等人的爱情、宴会和家族纷争。";
  } else if (bookId === "water_margin") {
    modalTitle.textContent = "《水浒传》";
    modalImage.src = "water_margin.jpg";
    modalDescription.textContent = "《水浒传》是中国古代四大名著之一，是明代作家施耐庵创作的长篇小说。故事讲述了宋江等人起义反抗统治阶级的故事，以及他们在梁山泊的经历。";
  }

  modal.style.display = "block";
}

function closeModal() {
  var modal = document.getElementById("modal");
  modal.style.display = "none";
}

function scrollToSection(sectionId) {
  var element = document.querySelector(sectionId);
  element.scrollIntoView({ behavior: "smooth" });
}

function searchBooks() {
  var searchInput = document.getElementById("searchInput");
  var keyword = searchInput.value.toLowerCase();
  var books = document.querySelectorAll(".book");

  books.forEach(function (book) {
    var bookTitle = book.querySelector("h2").textContent.toLowerCase();
    if (bookTitle.includes(keyword)) {
      book.style.display = "block";
    } else {
      book.style.display = "none";
    }
  });
}

请将上述代码中的script.js文件与index.html和styles.css放在同一文件夹中。

这段代码在原有基础上添加了导航栏固定、平滑滚动到锚点和搜索功能。在导航栏中，搜索框和搜索按钮用于搜索书籍或相关内容。导航链接通过onclick事件调用scrollToSection函数，实现平滑滚动到对应的锚点处。搜索功能通过searchBooks函数实现，根据用户输入的关键词，过滤显示书籍。

您可以根据需要进行修改和调整，以满足您的具体要求。同时，您还可以进一步扩展和优化代码，以添加其他的功能和效果。

四大名著网页设计：提升用户体验的代码示例

原文地址: https://www.cveoy.top/t/topic/YX8 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录