최근에 나는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!