如何使用 CSS 制作网页中的搜索功能？

要在网页中添加搜索功能，可以使用HTML表单和CSS样式来实现。以下是一些基本步骤：

1. 在HTML中添加搜索表单元素。表单通常包括一个文本输入框和一个提交按钮。您可以使用HTML表单元素来创建这些元素。

例如：

<form>
  <input type="text" placeholder="搜索...">
  <button type="submit">搜索</button>
</form>

2. 使用CSS样式来调整表单的外观和位置。您可以使用CSS属性来设置表单的大小、颜色、字体和边框等。

例如：

form {
  position: relative;
  width: 80%;
  margin: 0 auto;
  text-align: center;
}

input[type="text"] {
  width: 70%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

button[type="submit"] {
  width: 20%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

button[type="submit"]:hover {
  background-color: #45a049;
}

3. 如果您希望在搜索结果中突出显示关键字，可以使用CSS伪类:highlight来设置关键字的高亮颜色。

例如：

::selection {
  background-color: #ffc107;
  color: #000;
}

.highlight {
  background-color: #ffc107;
  color: #000;
  font-weight: bold;
}

在搜索结果中，您可以使用JavaScript或服务器端代码来查找并突出显示关键字。例如：

function highlightKeywords(searchTerm) {
  var body = document.getElementsByTagName("body")[0];
  var textNodes = getTextNodes(body);

  for (var i=0; i<textNodes.length; i++) {
    var node = textNodes[i];
    var text = node.nodeValue;

    if (text.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1) {
      var newNode = document.createElement("span");
      var startIndex = text.toLowerCase().indexOf(searchTerm.toLowerCase());
      var endIndex = startIndex + searchTerm.length;
      var highlightedText = text.substring(startIndex, endIndex);

      newNode.innerHTML = highlightedText;
      newNode.className = "highlight";

      node.parentNode.insertBefore(newNode, node.nextSibling);
      node.parentNode.removeChild(node);
    }
  }
}

function getTextNodes(node) {
  var textNodes = [];

  if (node.nodeType === Node.TEXT_NODE) {
    textNodes.push(node);
  } else {
    var children = node.childNodes;
    for (var i=0; i<children.length; i++) {
      textNodes = textNodes.concat(getTextNodes(children[i]));
    }
  }

  return textNodes;
}

这些代码将在网页中查找所有文本节点，并查找搜索词。如果找到搜索词，则会创建一个新的span元素，其中包含高亮文本，并替换原始文本节点。