ホームページ > 記事 > ウェブフロントエンド > CSSを使用して画像を使用したHTMLの番号なしリストの箇条書きを記述する方法
CSSを使用して画像を使用したHTMLの番号なしリストの箇条書きを記述する方法
- 高洛峰オリジナル
- 2017-03-02 14:55:225822ブラウズ
このような要件があります。リスト内の箇条書きをサムネイルにしたい。この記事は、以下を参照してください。
少なくとも 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中国語ウェブサイトに注意してください!
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。