1711023486
2024-03-21 11:39:59
タグのレイアウト
少ないもので
このチュートリアルでは、タグの使用方法を見ていきます。
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 コードを使用してタグのスタイルを設定しましょう
。 このコードを使用すると、
、カスタム矢印を追加し、ホバー時および詳細を開いたときにテキストと矢印の色を変更します。
// ------- 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;
}
}このチュートリアルが、タグのスタイルを効果的に示すのに役立つことを願っています
レスで。
#初心者および #Web #開発者向けの完全なチュートリアル