css+tab切换框 |css 悬浮播放器

<div class="tabs">
<input type="radio" name="tabs" id="tab1" checked />
<label for="tab1">Tab 1</label>
<div class="tab">
<p>Content for Tab 1 goes here...</p>
</div>
<input type="radio" name="tabs" id="tab2" />
<label for="tab2">Tab 2</label>
<div class="tab">
<p>Content for Tab 2 goes here...</p>
</div>
<input type="radio" name="tabs" id="tab3" />
<label for="tab3">Tab 3</label>
<div class="tab">
<p>Conent for Tab 3 goes here...</p>
</div>
</div>

上面的代码是一个基本的Tab切换框，结构比较清晰，使用了radio和label标签的组合来实现Tab的切换效果。每一个Tab对应的内容都包裹在一个div标签中，并添加一个class类tab用于样式设置。

.tabs input[type="radio"] {
display: none;
}
.tabs label {
display: inline-block;
padding: 5px 10px;
margin-bottom: -1px;
background-color: #eee;
border: 1px solid #ccc;
border-bottom: none;
font-weight: bold;
cursor: pointer;
}
.tabs label:hover {
background-color: #f7f7f7;
}
.tabs input:checked + label {
background-color: #fff;
border-color: #ccc;
border-bottom: 1px solid #fff;
}
.tab {
display: none;
border: 1px solid #ccc;
border-top: none;
padding: 10px;
}
.tabs input:checked ~ .tab {
display: block;
}

上面的样式设置了Tab的基本样式，使用了CSS3的选择器语法。其中，input[type=”radio”]的display:none用于隐藏单选框，label的display:inline-block使得Tab链接成为块状元素，border属性美化Tab，cursor: pointer设置鼠标手势，使用:hover显示鼠标经过时的样式。

选中的Tab链接，其样式设置通过:checked伪类进行判断。Tab链接下方对应的内容区域使用了display:none和display:block进行显示与隐藏，当Tab链接被选中时，对应的内容div标签的样式display:block被触发来实现Tab内容的切换。

至此，一个简单的CSS + Tab切换框的设计完成，这个切换框可以方便地应用到网站的导航菜单、选项卡切换、页面内容展示等位置，具有简单、易用、易维护等特点。