コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > CSSを使用して画像を使用したHTMLの番号なしリストの箇条書きを記述する方法

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

高洛峰
リリース： 2017-03-02 14:55:22
オリジナル
5912 人が閲覧しました

このような要件があります。リスト内の箇条書きをサムネイルにしたい。この記事は、以下を参照してください。 少なくとも 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中国語ウェブサイトに注意してください!


関連ラベル：
HTML 无序列表 项目符号
ソース：php.cn
前の記事：htmlで長さの長いデータを表示する場合の処理 次の記事：HTML でアンカーの位置を設定する一般的な方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ルート ノードのリスト項目シンボル (<ul> および <ol>) は CSS で表示および削除できず、overflow-x: hidden の問題は解決できません。 現在、Web ページの作成に取り組んでいますが、リスト項目に問題があります。通常、各リスト項目の横に表示されるドットと数字は表示されません。また、CSS プロパティの overfl...
から 2024-04-04 16:38:22
0
1
3617
SQL テーブルから順序なしマップの欠損値を埋める効率的な方法 (SQL/C++) 質問 現在、一意の識別子 (ID) とそれに関連付けられたデータセットを SQL テーブルから順序なしマップに読み取るシステムがあります。データセットは id1 から始まりましたが...
から 2024-04-04 11:47:44
0
1
345
国を並べ替えるための複数の開始文字 現在、高校のクラスでは MySQL と、特定の基準に基づいて項目を選択および並べ替える方法について学習しています。たとえば、Select CountryCodefrom Count...
から 2024-03-30 22:35:22
0
2
391
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート