css 写云台操作面板

云台操作面板通常需要实现方向控制、缩放、聚焦等功能。以下是一个简单的示例代码：

HTML部分：

<div class="control-panel">
  <div class="direction-control">
    <button class="btn-up">上</button>
    <button class="btn-down">下</button>
    <button class="btn-left">左</button>
    <button class="btn-right">右</button>
  </div>
  <div class="zoom-control">
    <button class="btn-zoom-in">放大</button>
    <button class="btn-zoom-out">缩小</button>
  </div>
  <div class="focus-control">
    <button class="btn-focus">聚焦</button>
  </div>
</div>

CSS部分：

.control-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.direction-control,
.zoom-control,
.focus-control {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.btn-up,
.btn-down,
.btn-left,
.btn-right,
.btn-zoom-in,
.btn-zoom-out,
.btn-focus {
  width: 60px;
  height: 30px;
  margin-right: 10px;
  border-radius: 5px;
  background-color: #ccc;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

.btn-up:hover,
.btn-down:hover,
.btn-left:hover,
.btn-right:hover,
.btn-zoom-in:hover,
.btn-zoom-out:hover,
.btn-focus:hover {
  background-color: #666;
}

这个示例代码中，我们使用了flex布局来实现云台操作面板的布局。其中方向控制、缩放、聚焦三个部分分别用了一个div标签包裹，并使用了内部的button按钮来实现各自的功能。使用CSS样式美化这些按钮的外观，使其更加美观和易于操作。