DIVCSS 예: 공통 블로그 목록 만들기

<div id="줄바꿈">
<div 클래스="목록">
<p class="날짜"></p>
<h2></h2>
<p class="메타"></p>
<p></p>
</div>
</div>

<div id="줄바꿈">
<div 클래스="목록">
<p class="date">9월 <b>03</b></p>
<h2><a href="http://www.downcodes.com/default.asp?cateID=9">DIV CSS 레이아웃 예: CSS 웹사이트 레이아웃을 사용하는 10단계! </a></h2>
<p class="meta">출처: <a href="http://www.downcodes.com/">www.downcodes.com</a> 편집자: <a href="#">downcodes.com </a> | <a href="#">응답이 없습니까?</a></p>
<p>새 탭: 새 탭을 열 때마다 가장 많이 방문한 웹사이트, 가장 많이 사용하는 검색 엔진, 최근 북마크한 페이지, 최근 닫은 탭 등을 직관적으로 확인할 수 있습니다.
앱 바로가기: 브라우저를 열지 않고도 웹 앱을 활성화할 수 있습니다. 애플리케이션 바로가기는 자주 사용하는 온라인 애플리케이션을 직접 로드합니다. </p>
</div>
<div 클래스="목록">
<p class="date">8월 <b>26</b></p>
<h2><a href="http://www.downcodes.com/article.asp?id=813">목록 dl을 정의하여 그림과 텍스트가 포함된 CSS 목록 요소 생성</a></h2>
<p class="meta">출처: <a href="http://www.downcodes.com/">www.downcodes.com</a> 편집자: <a href="#">downcodes.com </a> | <a href="#">응답이 없습니까?</a></p>
<p>새 탭: 새 탭을 열 때마다 가장 많이 방문한 웹사이트, 가장 많이 사용하는 검색 엔진, 최근 북마크한 페이지, 최근 닫은 탭 등을 직관적으로 확인할 수 있습니다.
앱 바로가기: 브라우저를 열지 않고도 웹 앱을 활성화할 수 있습니다. 애플리케이션 바로가기는 자주 사용하는 온라인 애플리케이션을 직접 로드합니다. </p>
</div>
<div 클래스="목록">
<p class="date">8월 <b>22</b></p>
<h2><a href="http://www.downcodes.com/article.asp?id=792">숨기고 슬라이드할 수 있는 멋진 CSS+JS 메뉴 예</a></h2>
<p class="meta">출처: <a href="http://www.downcodes.com/">www.downcodes.com</a> 편집자: <a href="#">downcodes.com </a> | <a href="#">응답이 없습니까?</a></p>
<p>새 탭: 새 탭을 열 때마다 가장 많이 방문한 웹사이트, 가장 많이 사용하는 검색 엔진, 최근 북마크한 페이지, 최근 닫은 탭 등을 직관적으로 확인할 수 있습니다.
앱 바로가기: 브라우저를 열지 않고도 웹 앱을 활성화할 수 있습니다. 애플리케이션 바로가기는 자주 사용하는 온라인 애플리케이션을 직접 로드합니다. </p>
</div>
</div>

* { 여백:0; 글꼴 크기:12px; 목록 스타일: 없음; 글꼴 계열:Arial, Helvetica, sans-serif;
본문{ 배경:#ebead1;}
a{ 색상:#514f42;텍스트 장식:없음;}
a:hover{ 색상:#669900;}

#wrap{ 너비:650px; 여백:30px 자동; 숨김;}
.list{ 너비:650px; 패딩:0 0 20px 0; 테두리 바닥:1px 점선 #666633;}

.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;

.list .meta{마진:0 0 25px 0;}
.list h2 a{글꼴 크기: 1.8em }
.list p{ 디스플레이:블록 높이:18px;}