배경스타일을 이용한 목록의 표현.
예제) 다음의 내용을 만들어 보자. (첨부파일의 이미지 활용할 것)
--------------------------------------------------------------------
<style type="text/css">
*{margin:0;padding:0;font-family:Dotum,Hevetica,Sans-serif}
body{font-size:12px}
li{list-style:none}
.news{width:283px;margin:50px}
.news .list1{margin-left:6px}
.news h1{margin-bottom:10px;padding-left:14px;line-height:31px;background:url(images/tab_guide_bg.gif);font-size:1.2em}
.news li{margin-bottom:7px;padding-left:9px;background:url(images/news.gif) no-repeat 0 50%}
.news a{text-decoration:none}
</style>
<body>
<div class="news">
<h1>웹 접근성 콘텐츠 개발 가이드 라인</h1>
<ul class="list1">
<li><a href="#">fieldset을 사용하여 유사 컨트롤을 ..</a></li>
<li><a href="#">PDF 문서에 삽입된 이미지에 대체 텍스트..</a></li>
<li><a href="#">제품 번호 입력시 테이블을 잘못 사용한 예</a></li>
<li><a href="#">회원가입 필수 입력 사항을 색상만으로 구분..</a></li>
</ul>
</div>
</body>
-----------------------------
<style type="text/css">
*{margin:0;padding:0;font-family:Dotum,Helvetica,Sans-serif}
body{font-size:12px}
li{list-style:none}
.comment{
width:200px;
border:1px solid #b3cbda;
margin:50px
}
.comment h1{
width:184px;
margin:7px 0 9px 7px;
background:url(images/bg_title.gif);
font-size:1.1em;
line-height:27px;
text-align:center
}
.comment ul{
margin-left:9px
}
.comment li{
background:url(images/dot_lt.gif) no-repeat 0 50%;
padding-left:8px;
margin-bottom:5px
}
.comment a{
text-decoration:none
}
</style>
<body>
<div class="comment">
<h1>최근코멘트</h1>
<ul>
<li><a href="#">메일함이 꽉 찼다고 그러..</a></li>
<li><a href="#">제가 가진 폰트중에선 Fut..</a></li>
<li><a href="#">AvantGarde - Regular 입..</a></li>
<li><a href="#">Myriad - Semibold 대략..</a></li>
<li><a href="#">다음에서 나눠주는 무료폰..</a></li>
<li><a href="#">메인에 컨텐츠부분이 클릭..</a></li>
<li><a href="#">며칠 동안 그려야 저 일..</a></li>
</ul>
</div>
</body>
</html>
'html' 카테고리의 다른 글
| 1월19일 수업 (0) | 2011.01.20 |
|---|---|
| 배경색상, 배경이미지 지정 (0) | 2011.01.16 |
| 박스모델 편집 예제 (0) | 2011.01.16 |
| 박스모델 (0) | 2011.01.16 |
| FONT, TEXT 관련 스타일 예제 (0) | 2011.01.16 |