如何使用HTML和CSS编写预览窗格(主/明细)

在创建预览窗格（主/明细）时，可以使用HTML和CSS来设计和实现。以下是一个简单的示例，展示了如何使用这两种技术来构建一个基本的预览窗格：

首先，我们需要编写HTML结构。这里我们使用<div>元素来创建主窗格和明细窗格：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>预览窗格示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="main-pane">
        <h2>主窗格</h2>
        <p>这里是主窗格的内容。</p>
       <button id="show-details">显示明细</button>
    </div>
    <div class="details-pane">
        <h2>明细窗格</h2>
        <p>这里是明细窗格的内容。</p>
       <button id="hide-details">隐藏明细</button>
    </div>
</body>
</html>

接下来，我们需要编写CSS样式来美化预览窗格。在这个示例中，我们将使用Flexbox布局来实现主窗格和明细窗格的并排显示：

body {
    font-family: Arial, sans-serif;
}

.main-pane,
.details-pane {
    padding: 20px;
    margin: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: calc(50% - 40px);
}

.details-pane {
    display: none;
}

@media (min-width: 768px) {
    .main-pane,
    .details-pane {
        width: calc(50% - 60px);
    }
}

最后，我们需要编写JavaScript代码来控制预览窗格的显示和隐藏：

document.getElementById("show-details").addEventListener("click", function() {
    document.querySelector(".details-pane").style.display = "block";
    document.querySelector(".main-pane").style.width = "calc(50% - 60px)";
    document.getElementById("show-details").style.display = "none";
    document.getElementById("hide-details").style.display = "block";
});

document.getElementById("hide-details").addEventListener("click", function() {
    document.querySelector(".details-pane").style.display = "none";
    document.querySelector(".main-pane").style.width = "calc(100% - 40px)";
    document.getElementById("show-details").style.display = "block";
    document.getElementById("hide-details").style.display = "none";
});

这个示例展示了如何使用HTML和CSS创建一个简单的预览窗格。当然，您可以根据自己的需求进行更多的定制和优化。