CSSを使用して画像を使用したHTMLの番号なしリストの箇条書きを記述する方法-htmlチュートリアル-php.cn

CSSを使用して画像を使用したHTMLの番号なしリストの箇条書きを記述する方法

高洛峰

リリース： 2017-03-02 14:55:22

オリジナル

5874 人が閲覧しました

このような要件があります。リスト内の箇条書きをサムネイルにしたい。この記事は、以下を参照してください。少なくとも 5 冊のベストセラー書籍の順序なしリストを含む HTML ページを作成します。各書籍の前の箇条書きは、表紙の輪郭を示すサムネイルである必要があります。この情報は Web 上で入手できます。レイアウトには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中国語ウェブサイトに注意してください!