地理数据时空查询可视化UI模板 - CSS和HTML示例 - 常规

以下是一个简单的地理数据时空查询可视化的UI模板的CSS和HTML示例：

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>地理数据时空查询可视化</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="container">
        <div id="timeQuery" class="floating-window">
            <h2>时间查询</h2>
            <!-- 时间查询内容 -->
        </div>
        <div id="spaceQuery" class="floating-window">
            <h2>空间查询</h2>
            <!-- 空间查询内容 -->
        </div>
    </div>
</body>
</html>

CSS代码（style.css）：

.container {
    display: flex;
    justify-content: space-between;
    height: 100vh;
    padding: 20px;
}

.floating-window {
    width: 350px;
    height: 400px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 20px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    overflow: auto;
    position: relative;
}

.floating-window h2 {
    margin-top: 0;
}

.floating-window::-webkit-scrollbar {
    width: 8px;
}

.floating-window::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}

.floating-window::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 4px;
}

.floating-window::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

这个模板使用了Flex布局，将两个浮动窗口放在容器中。每个浮动窗口都有一个标题和内容区域，你可以在<h2>标签下方添加时间查询或空间查询的相关内容。浮动窗口的样式通过CSS进行定义，包括背景颜色、边框、边框半径、阴影效果等。滚动条样式也进行了自定义。

你可以根据自己的需求修改CSS样式和HTML内容，以符合你的实际场景和要求。