집 > 기사 > 웹 프론트엔드 > CSS 이미지를 사용하여 HTML 순서 없는 목록 글머리 기호를 작성하는 방법

CSS 이미지를 사용하여 HTML 순서 없는 목록 글머리 기호를 작성하는 방법

高洛峰원래의: 2017-03-02 14:55:225886검색

그런 요구사항이 있습니다. 목록의 글머리 기호를 썸네일로 표시하고 싶습니다. 이 문서에서는 레이아웃 구현을 위해 다음을 참조할 수 있습니다. 최소 5권의 베스트셀러 도서를 순서 없이 나열한 HTML 페이지를 만듭니다. 각 도서 앞의 글머리 기호는 표지 개요를 나타내는 썸네일이어야 합니다. 이 정보는 웹에서 얻을 수 있습니다. 레이아웃에는 CSS 메소드가 필요합니다.

HTML:

코드는 다음과 같습니다.

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<link href="book.css" rel="stylesheet" type="text/css"> 
</head> 
<!--.author:svitter;--> 
<body> 
<p> 
<h1 class="diffentcolor">Linux畅销书</h1> 
<p id="menu"> 

</p> 
<p id="content"> 
<ul> 
<li id="book1">鸟哥的Linux私房菜基础篇</li> 
<li id="book2">鸟哥的Linux私房菜服务器篇</li> 
<li id="book3">Linux命令行与shell脚本编程大全</li> 
<li id="book4">Linux运维之道</li> 
<li id="book5">Linux/Unix系统编程手册</li> 
</ul> 
</p> 
</p> 
</body>

book.css:

코드는 다음과 같습니다. 다음:

.diffentcolor{color:green;} 
#differcolor{color:green} 
body, td, p, .p, a { 
font-family: arial,sans-serif; 
} 
h1,h2{ 
font-family:sans-serif; 
color:gray; 
} 
.author{ 
by:svitter; 
} 
h1{ 
border-bottom:1px solid black; 
border-bottom:1px; 
solid black; 
} 
p#container{width:500p} 
p#menu {width:150px;float:left;} 
p#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); 
}

이미지의 CSS 작성 방법을 사용하는 HTML 비순차 목록 글머리 기호 기호에 대한 자세한 내용은 PHP 중국어 웹사이트를 참고하세요!

성명：

이전 기사：HTML이 긴 길이의 데이터를 표시할 때 처리다음 기사：HTML이 긴 길이의 데이터를 표시할 때 처리

CSS 이미지를 사용하여 HTML 순서 없는 목록 글머리 기호를 작성하는 방법

관련 기사