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

CSS_HTML/Xhtml_Web ページ制作で画像を使用して HTML の番号なしリストの箇条書きを作成する方法

WBOY
リリース： 2016-05-16 16:37:36
オリジナル
2171 人が閲覧しました

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

HTML:

コードをコピーします
コードは次のとおりです:



"book.css" rel="stylesheet" type="text/css">
;

/h1>

;

    Brother Niao の Linux プライベート キッチンの基本 li id="book2">Niao Ge の Linux プライベート キッチン サーバーの記事
  • Linux コマンド ラインとシェル スクリプト プログラミングの百科事典
  • Linux の運用とメンテナンス


;/div>



book.css:


コードをコピーします


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


.diffentcolor{color:green;}
#differcolor{color:green}
body , td, div, .p, a {
font-family: arial,sans-serif; } h1,h2{ font-family: color:グレー;
}
.author{
by:svitter;
h1{
border-bottom:1px ; >黒一色;
}
div#container{width:500p}
div#menu {width:150px;float:left;}
div#content {float:left;}
li#book1{
リストスタイルイメージ:url(pic/popularBook.jpg);
}
li#book2{
リストスタイルイメージ: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);

関連ラベル：
html 順序なしリスト
ソース：php.cn
前の記事：HTML選択オプション デフォルト選択の作り方_HTML/Xhtml_Webページ制作 次の記事：無効入力不可の値はアクションレイヤーに渡せません_HTML/Xhtml_Webページ制作
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
PX から REM への自動変換エラー <style>html { font-size: calc(100vw / 3.75); }body { font-size: 0.16rem; }</style...
から 2024-04-16 09:34:16
0
0
4687
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
CSSでページ下部の謎の空白を解決する方法 Bootstrap と D3 を使用して単純な Web ページを構築しようとしていますが、下部の空白をすべて削除する方法がわかりません。それをなくしたいのです。 bodyとhtml...
から 2024-04-06 20:22:15
0
1
454
livewire遅延プレースホルダーでlaravelコンポーネントを使用する方法 laravel コンポーネントのスケルトンを livewire3 プレースホルダー内に追加したい これまでに試したこと: Laravel コンポーネントを含めることによる Live...
から 2024-04-06 20:02:10
0
2
543
文字列を HTML コード (配列から生成) に置き換えるトップレベルのメソッド 次のような文字列があるとします... $htmlPattern="Usernameis:#name#andusercompanyis#company#"; 部分...
から 2024-04-06 17:40:41
0
2
410
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート