스티커 정의 목록

최근에 나는 30 초의 코드 웹 사이트를 발견했으며 그들의 CSS 예제는 정말 인상적입니다! 나는 정의 목록을 사용하여 "플로팅 섹션 헤더"에 특히 매료되었습니다. 이것은 우아하게 힘과 다양성을 보여줍니다<dl></dl> ,,,<dt></dt> , 그리고<dd></dd> 강요.

이 간단한 HTML을 고려하십시오.

<div>
  <dl>
<dt>에이</dt>
    <dd>알제리</dd>
    <dd>앙골라</dd>

    <dt>비</dt>
    <dd>베닌</dd>
    <dd>보츠와나</dd>
    <dd>부르 키나 파소</dd>
    <dd>부룬디</dd>

    <dt>기음</dt>
    <dd>카보 베르데</dd>
    <dd>카메룬</dd>
    <dd>중앙 아프리카 공화국</dd>
    <dd>차드</dd>
    <dd>코 모로</dd>
    <dd>콩고, 민주 공화국</dd>
    <dd>콩고, 공화국</dd>
    <dd>코트 디부 아르</dd>

    <dt>디</dt>
    <dd>지부티</dd>

    <dt>이자형</dt>
    <dd>이집트</dd>
    <dd>적도 기니</dd>
    <dd>에리트레아</dd>
    <dd>Eswatini (이전 스와질란드)</dd>
    <dd>에티오피아</dd>
  </dl>
</div>

CSS가 없으면 브라우저의 기본 렌더링이 간단합니다. 그러나 고유 한 구조<dt></dt> 그리고<dd></dd> 영리한 스타일을 허용합니다. 어떻게<dt></dt> 기본 마진으로 인해 요소가 자연스럽게 왼쪽에 정렬됩니다. 이것은 "끈적 끈적한 섹션"을 만들 수있게합니다.

 dt {
  위치 : 스티커;
  상단 : 0;
  배경 : 흰색;
  디스플레이 : 인라인 블록;
}

이 솔루션의 우아함은 눈에 띄고 있습니다. 핵심 기능은 최소한의 CSS로 달성됩니다. 더 많은 스타일링은 순전히 미용 적 개선입니다.

30 초의 코드 예제는보다 강력한 레이아웃을 위해 CSS 그리드를 사용하지만,이 간결한 CSS 접근법은 더 적게 달성 할 수있는 양을 강조합니다. 그들은 또한 어디에도 변형을 제공합니다<dd></dd> 요소는 전체 너비에 걸쳐 또 다른 흥미로운 디자인 옵션을 제공합니다.

위 내용은 스티커 정의 목록의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!