适合初学者和 Web 开发人员的完整教程。

标签布局
少

在本教程中，我们将了解如何使用标签

HTML 中的内容以及如何使用 LESS 对其进行样式设置以创建优雅且实用的交互式显示。

先决条件

确保您对 HTML 和 CSS 有基本的了解。熟悉 LESS 也有助于学习本教程。

HTML 基础结构

我们首先定义我们的标签

与一个元素


  Cliquez ici pour plus d'informations
  
    Ici, vous pouvez ajouter du contenu détaillé que l'utilisateur pourra voir en cliquant sur le résumé ci-dessus.

LESS 布局

现在让我们使用您的 LESS 代码来设计我们的标签

。此代码允许您隐藏默认标记

，添加自定义箭头，并在悬停时和打开详细信息时更改文本和箭头的颜色。

// ------- details
details summary::-webkit-details-marker {
  display:none;
}
details {
  margin: 1rem 0;
  background-color: #FFF;
  > .details-content {
    margin-top: 1rem;
    background-color: #FFF;
  }
  summary {
    text-transform: uppercase;
    padding: 1rem 1rem 1rem 2.2rem;
    display: block;
    background: #333;
    position: relative;
    cursor: pointer;
    color: #FFF;
    transition: color 0.3s;
    
    &:before {
      content: '';
      border-width: .4rem;
      border-style: solid;
      border-color: transparent transparent transparent #fff;
      position: absolute;
      top: 1.3rem;
      left: 1rem;
      transform: rotate(0);
      transform-origin: .2rem 50%;
      transition: .25s transform ease, border 0.3s;
    }
  }
  &:hover {
    summary {
      color: #FF8C00;
      &:before {
        border-color: transparent transparent transparent #FF8C00;
      }
    }
  }
}

details[open] > summary {
  color: #FF8C00;
  
  &:before {
    transform: rotate(90deg);
    border-color: transparent transparent transparent #FF8C00;
  }
}

我希望本教程可以帮助您有效地演示如何设置标签样式

更少。