css做页签样式

CSS是前端开发中非常重要的一部分，常常用来美化页面，其中做页签样式也是应用广泛的一种。以下是一个简单示例，展示如何用CSS来实现页签样式。

  div class="tab">
        ul class="tabnav">
          li class="active">
    a href="#">
    标签1/a>
    /li>
          li>
    a href="#">
    标签2/a>
    /li>
          li>
    a href="#">
    标签3/a>
    /li>
          li>
    a href="#">
    标签4/a>
    /li>
        /ul>
        div class="tabcontent">
          p>
    这是标签1的内容/p>
          p>
    这是标签2的内容/p>
          p>
    这是标签3的内容/p>
          p>
    这是标签4的内容/p>
        /div>
      /div>
  .tab {
        border: 1px solid #ccc;
        margin-top: 20px;
  }
  .tabnav {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
  }
  .tabnav li {
        margin-right: 10px;
  }
  .tabnav li a {
        background-color: #f2f2f2;
        border: 1px solid #ccc;
        color: #666;
        display: block;
        padding: 10px;
        text-decoration: none;
  }
  .tabnav .active a {
        background-color: #ccc;
        color: #fff;
  }
  .tabcontent p {
        display: none;
  }
  .tabcontent p:first-of-type {
        display: block;
  }
    

以上示例中，我们通过定义.tabnav内每个li标签内的a标签的样式，实现了一个基本页签的样式。同时，我们通过给.tabnav内的某个li添加.active类名，可以实现特定页签的样式（比如变为选中状态）。

值得注意的是，我们将所有.tabcontent内的p标签内容默认设置为不显示即display:none，然后再通过CSS选择器选择第一个p标签，将其设为显示即display:block，这样就可以实现默认显示第一个标签内容的需求。

以上仅为一个简单的示例，实际应用中可能需要更加复杂的页面或更丰富的样式来实现各种各样的页签需求。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！