CSS_HTML/Xhtml_웹 페이지 제작에서 이미지를 사용하여 HTML 비순차 목록 글머리 기호를 작성하는 방법

최소 5권의 베스트셀러 도서를 순서 없이 나열한 HTML 페이지를 만듭니다. 각 도서 앞의 글머리 기호는 표지 개요를 나타내는 썸네일이어야 합니다. 이 정보는 웹에서 얻을 수 있습니다. 레이아웃을 위해서는 CSS 방식을 사용해야 합니다.

HTML:

코드 복사

코드는 다음과 같습니다.

< ;html>

"book.css" rel="stylesheet" type="text/css">

;

Linux 베스트셀러

;

• Brother Niao의 Linux 개인 주방
li id="book2">Niao Ge의 Linux 개인 주방 서버 기사

• Linux 명령줄 및 쉘 스크립트 프로그래밍 백과사전
id="book4">Linux 운영 및 유지 관리

• Linux/Unix 시스템 프로그래밍 매뉴얼
;/div>

book.css:


코드 복사


코드는 다음과 같습니다.

.diffentcolor{color:green;}
#differcolor{color:green}

body , td, div, .p, a {

글꼴-가족: arial,sans-serif } h1,h2{ 글꼴-가족:sans-serif 색상: grey;

}

.author{

by:svitter;
}
h1{
border-bottom:1px solid black;
border-bottom:1px ; >단색 검정색;
}
div#container{width:500p}
div#menu {width:150px;float:left;}
div#content {float:left;}
li#book1{
list-style-image:url(pic/popularBook.jpg)
}
li#book2{
list-style-image:url(pic/popularBook2 .jpg) ;
}
li#book3{
list-style-image:url(pic/popularBook3.jpg)
}
li#book4{
list-style -image: url(pic/popularBook4.jpg);
}
li#book5{
list-style-image:url(pic/popularBook5.jpg)
}