HTML代码： 复制 <div class="search-box"> <input type="text" placeholder="搜索"> <button>搜索</button> </div> CSS代码： 复制 .search-box { position: relative; width: 200px; height: 40px; overflow: hidden; } .search-box input[type="text"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0 40px 0 10px; border: none; outline: none; background: transparent; font-size: 16px; transition: all 0.3s ease-in-out; } .search-box button { position: absolute; top: 0; right: 0; width: 40px; height: 100%; border: none; outline: none; background: #ccc; font-size: 16px; transition: all 0.3s ease-in-out; } .search-box:hover input[type="text"] { width: 150%; } .search-box:hover button { background: #333; color: #fff; }

这段HTML代码和CSS代码定义了一个搜索框的样式。其中，HTML代码使用了div元素来包裹输入框和按钮，并给div元素设置了类名search-box。CSS代码中，首先给search-box类设置了一些基本样式，包括相对定位、宽高和溢出隐藏等。接着，对输入框和按钮进行了样式定义，包括绝对定位、位置和大小等。在输入框获得鼠标悬浮时，会触发:hover伪类，对输入框和按钮进行样式改变，包括输入框宽度变大、按钮背景色变深等。

相关问题

<!--CONTENT CONTAINER--> <div id="content-container"> <!--Page content--> <div id="page-content"> <h4 class="text-main pad-btm bord-btm">《伤寒论》知识图谱问答系统</h4> </div> <!--End page content--> </div> <!--END CONTENT CONTAINER-->在这段代码中添加一个可以实现多轮问答的聊天框

您可以按照以下步骤添加一个多轮问答的聊天框：

1. 在 `<div id="page-content">` 标签后添加一个新的 `<div>` 标签，用于包裹聊天框。

<div id="page-content">
    <h4 class="text-main pad-btm bord-btm">《伤寒论》知识图谱问答系统</h4>
    <div id="chat-box"></div> <!-- 新添加的聊天框 -->
</div>

2. 在 JavaScript 文件中添加以下代码，用于实现聊天框的多轮问答功能。

var chatBox = document.getElementById("chat-box");

function addMessage(msg, isUser) {
    var messageDiv = document.createElement("div");
    messageDiv.classList.add("chat-message");
    messageDiv.classList.add(isUser ? "user-message" : "bot-message");
    messageDiv.innerText = msg;
    chatBox.appendChild(messageDiv);
}

function sendMessage() {
    var inputBox = document.getElementById("input-box");
    var message = inputBox.value;
    inputBox.value = "";

    addMessage(message, true);

    // TODO: 调用 AI 接口获取回复
    var reply = "这是 AI 的回复";

    addMessage(reply, false);
}

var inputBox = document.createElement("input");
inputBox.setAttribute("type", "text");
inputBox.setAttribute("id", "input-box");
inputBox.setAttribute("placeholder", "请输入您的问题");
inputBox.addEventListener("keydown", function (event) {
    if (event.keyCode === 13) {
        sendMessage();
    }
});

var sendButton = document.createElement("button");
sendButton.setAttribute("id", "send-button");
sendButton.innerText = "发送";
sendButton.addEventListener("click", sendMessage);

chatBox.appendChild(inputBox);
chatBox.appendChild(sendButton);

3. 在 CSS 文件中添加以下样式，用于美化聊天框。

#chat-box {
    max-height: 300px;
    overflow-y: auto;
    padding: 10px;
}

.chat-message {
    margin-bottom: 10px;
}

.user-message {
    text-align: right;
}

.bot-message {
    text-align: left;
}

#input-box {
    width: calc(100% - 60px);
    border: none;
    border-radius: 5px;
    padding: 10px;
    margin-right: 10px;
}

#send-button {
    border: none;
    border-radius: 5px;
    padding: 10px;
    background-color: #007bff;
    color: white;
}

#send-button:hover {
    cursor: pointer;
}

这样就可以在页面中添加一个多轮问答的聊天框了。您可以根据需要调整样式和实现方式。

请为<div class="search-box"> <input type="text" id="search-input" placeholder="请输入搜索内容"> <button id="search-button">搜索</button> </div>写一个好看居中的css样式

可以使用以下 CSS 样式来实现居中效果：

.search-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px; /* 调整高度为适当的值 */
}

#search-input {
  margin-right: 10px; /* 调整输入框右侧间距为适当的值 */
}

#search-button {
  /* 可以根据需要设置按钮样式 */
}

以上样式使用了 flex 布局，将搜索框容器 `.search-box` 的子元素水平和垂直居中对齐。输入框 `#search-input` 右侧有一定的间距，你可以根据需要进行调整。按钮 `#search-button` 的样式可以根据具体需求进行设置。