HTML 順序なしリスト箇条書き画像を使用した CSS の記述

少なくとも 5 冊のベストセラー書籍の順序なしリストを含む HTML ページを作成します。各書籍の前の箇条書きは、表紙を要約したサムネイルにする必要があります。この情報はWeb上で入手できます。レイアウトには CSS アプローチが必要です。

HTML:

コードをコピー

コードは次のとおりです。

<html>
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=gb2312" />
<link href="book.css" rel="スタイルシート" type="text/css">
</head>

<本文>
<div>
<h1 class="diffentcolor">Linux ベストセラー</h1>
<div id="メニュー">

</div>
<div id="コンテンツ">
<ul>
<li id="book1">Bird Brother の Linux プライベートレシピの基礎</li>
<li id="book2">Bird Brother の Linux プライベートキッチンサーバーエディション</li>
<li id="book3">Linux コマンドラインおよびシェルスクリプトプログラミング百科事典</li>
<li id="book4">Linux の運用と保守</li>
<li id="book5">Linux/Unix システムプログラミングマニュアル</li>
</ul>
</div>
</div>
</本文>

ブック.css:

コードをコピー

コードは次のとおりです。

.diffentcolor{色:緑;}
#differcolor{色:緑}
本文、td、div、.p、a {
フォントファミリ: Arial、サンセリフ;
}
h1、h2{
フォントファミリー:sans-serif;
色:グレー;
}
。著者{
著者:svitter;
}
h1{
border-bottom:1px 黒一色;
下境界線:1px;
黒一色
}
div#コンテナ{幅:500p}
div#メニュー {幅:150px;フロート:左;}
div#content {float:left;}
li#book1{
リストスタイルの画像:url(pic/popularBook.jpg);
}
li#book2{
リストスタイルの画像:url(pic/popularBook2.jpg);
}
li#book3{
リストスタイルの画像:url(pic/popularBook3.jpg);
}
li#book4{
リストスタイルの画像:url(pic/popularBook4.jpg);
}
li#book5{
リストスタイルの画像:url(pic/popularBook5.jpg);
}

<<: CSS でより美しいリンクプロンプト効果をカスタマイズする方法

>>: アイデアはDockerプラグインを使用してワンクリックの自動デプロイを実現します