CSS를 사용하여 목록 또는 목록과 유사한 페이지 요소를 만드는 것은 항상 토론 주제였습니다. 오늘 우리는 일반적으로 사용되는 블로그 목록을 배울 것입니다. 다음은 참조할 수 있는 예입니다.
이 예의 렌더링:
먼저 구조를 살펴보겠습니다. 왼쪽의 시간 레이어 날짜, 기사 제목 h2, 기사의 설명 레이어 메타, 기사 p의 주제 내용을 설정합니다.
예제 소스 코드
[www.downcodes.com] ID 랩을 사용하여 모든 요소를 레이어에 넣습니다.
HTML 코드를 자세히 작성해 보겠습니다.
예제 소스 코드
[www.downcodes.com] 9월 03
출처: www.downcodes.com 편집자: downcodes.com | 응답이 없습니까?
새 탭: 새 탭을 열 때마다 가장 많이 방문한 웹사이트, 가장 많이 사용하는 검색 엔진, 최근 북마크한 페이지, 최근 닫은 탭 등을 직관적으로 확인할 수 있습니다.
앱 바로가기: 브라우저를 열지 않고도 웹 앱을 활성화할 수 있습니다. 애플리케이션 바로가기는 자주 사용하는 온라인 애플리케이션을 직접 로드합니다.
8월 26
출처: www.downcodes.com 편집자: downcodes.com | 응답이 없습니까?
새 탭: 새 탭을 열 때마다 가장 많이 방문한 웹사이트, 가장 많이 사용하는 검색 엔진, 최근 북마크한 페이지, 최근 닫은 탭 등을 직관적으로 확인할 수 있습니다.
앱 바로가기: 브라우저를 열지 않고도 웹 앱을 활성화할 수 있습니다. 애플리케이션 바로가기는 자주 사용하는 온라인 애플리케이션을 직접 로드합니다.
8월 22
출처: www.downcodes.com 편집자: downcodes.com | 응답이 없습니까?
새 탭: 새 탭을 열 때마다 가장 많이 방문한 웹사이트, 가장 많이 사용하는 검색 엔진, 최근 북마크한 페이지, 최근 닫은 탭 등을 직관적으로 확인할 수 있습니다.
앱 바로가기: 브라우저를 열지 않고도 웹 앱을 활성화할 수 있습니다. 애플리케이션 바로가기는 자주 사용하는 온라인 애플리케이션을 직접 로드합니다.
위의 기초를 바탕으로 다음 CSS 코딩을 시작합니다.
전체 진술:
예제 소스 코드
[www.downcodes.com] * { 여백:0; 글꼴 크기:12px; 목록 스타일: 없음; 글꼴 계열:Arial, Helvetica, sans-serif;
본문{ 배경:#ebead1;}
a{ 색상:#514f42;텍스트 장식:없음;}
a:hover{ 색상:#669900;}
전체 레이어의 랩 스타일을 650px 너비로 설정합니다. 위쪽 및 아래쪽 여백은 30px이고 왼쪽 및 오른쪽 가로 및 가운데 정렬 목록은 각 목록 레이어에 대해 650px 너비로 설정됩니다.
예제 소스 코드
[www.downcodes.com] #wrap{ 너비:650px; 여백:30px 자동; 숨김;}
.list{ 너비:650px; 패딩:0 0 20px 0; 테두리 바닥:1px 점선 #666633;}
왼쪽에 떠 있는 시간을 설정합니다. 너비는 76px입니다. text-transform: 대문자(소문자를 대문자로 변환)
예제 소스 코드
[www.downcodes.com] .list .date{ float:left;width:76px; height:58px; 여백:0 20px 0 0; 배경:#514F42;text-transform: 대문자;text-align: center;font-size :10px;글꼴-가중치: 굵게:#FFF;}
.list b{디스플레이:블록; 글꼴 크기:40px; 색상:#FFF;
제목 설명 레이어 메타를 설정합니다. 하단 여백을 25px로 설정하여 기본 콘텐츠가 줄 바꿈 없이 왼쪽으로 정렬될 수 있도록 합니다.
예제 소스 코드
[www.downcodes.com] .list .meta{마진:0 0 25px 0;}
.list h2 a{글꼴 크기: 1.8em }
.list p{ 디스플레이:블록 높이:18px;}
