请帮我写一个纯css横向的标签页切换htlm代码

好的，下面是一个纯CSS横向标签页切换的HTML和CSS代码示例：

HTML代码：

<div class="tabs">
  <input type="radio" name="tab" id="tab1" checked>
  <label for="tab1">标签1</label>
  
  <input type="radio" name="tab" id="tab2">
  <label for="tab2">标签2</label>
  
  <input type="radio" name="tab" id="tab3">
  <label for="tab3">标签3</label>
  
  <div class="tab-content">
    <p>这是标签1的内容。</p>
  </div>
  
  <div class="tab-content">
    <p>这是标签2的内容。</p>
  </div>
  
  <div class="tab-content">
    <p>这是标签3的内容。</p>
  </div>
</div>

CSS代码：

.tabs {
  display: flex;
  flex-wrap: wrap;
}

.tabs label {
  flex: 1;
  text-align: center;
  padding: 10px;
  background-color: #eee;
  cursor: pointer;
}

.tabs input[type=radio] {
  display: none;
}

.tabs input[type=radio]:checked + label {
  background-color: #ccc;
}

.tab-content {
  flex: 1;
  display: none;
  padding: 10px;
}

.tabs input[type=radio]:checked + label + .tab-content {
  display: block;
}

在这个示例中，我们使用了flexbox布局来实现标签页的横向排列。每个标签页都是一个input元素和一个label元素的组合。当用户单击标签页时，相应的input元素会被选中，并且相应的.tab-content元素会显示出来。

我们使用CSS中的:checked伪类来确定哪个标签页被选中，并使用display属性来显示或隐藏.tab-content元素。我们还为标签页和.tab-content元素设置了一些基本样式，以使它们看起来像是一个标签页切换控件。

你可以根据自己的需要修改HTML和CSS代码来创建你自己的标签页切换控件。