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

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

HTML:

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

<html>
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=gb2312" />
<link href="book.css" rel="スタイルシート" type="text/css">
</head>
<!--.author:svitter;-->
<本文>
<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プラグインを使用してワンクリックの自動デプロイを実現します

推薦する

MySQL データベースの基礎を始めるための一般的なコマンドの概要

この記事では、MySQL データベースの基礎を学ぶためによく使用されるコマンドを例を使って説明します...

負のz-indexを持つ要素がクリックできない問題の解決策

最近、ポップアップ広告に取り組んでいました。デフォルト ページには z-index が設定されていな...

古典的なスネークゲームの JavaScript 実装

この記事では、古典的なスネークゲームを実装するためのJavaScriptの具体的なコードを参考までに...

MySQLからデータをインポートする際の不正なフォーマット、インポートの遅延、データ損失などの問題を迅速に解決します。

遅い問題を完全に解決したい場合は、MySQL を MySQL 8.0 にアップグレードすることをお勧...

CSS スタイルをプログラムで処理するためのサンプル コード

プログラム的アプローチの利点1. スタイルの分散を避けるためのグローバルコントロール2. シンプルな...

iframe テクニックを使用して訪問者 QQ 実装のアイデアとサンプル コードを取得する

今日、仕事中に、一時的に追加した友人から、Web ページを使用して訪問者の QQ を取得する方法を尋...

Redis を Docker コンテナとして素早くデプロイする方法

目次はじめるデータストレージサーバーを構成するRedis セキュリティの管理Redisインストールの...

MySQL インストール図の概要

MySQL 5.5 のインストールと設定方法のグラフィックチュートリアルMySQL 5.5 のインス...

CSS3アニメーションジャミングソリューションについての簡単な説明

なぜ詰まっているのでしょうか?言及しなければならない前提があります。フロントエンド開発者は皆、ブラウ...

LinuxシステムにISOファイルをインストールする方法

Linux システムで iso ファイルをインストールするにはどうすればいいですか?インストール手順...

VMware での Linux CentOS6.9 インストール グラフィック チュートリアル

技術初心者として、初めて Linux システムをインストールするプロセスを記録しています。まず、Wi...

CSS3+HTML5+JSでブロックの縮小・拡大アニメーション効果を実現

最近、あるプロジェクトに取り組んでいたとき、自分のプロジェクトでは CSS3 のアニメーション技術を...

Linux SSHポートを転送する3つの方法

ssh は私が最も頻繁に使用する 2 つのコマンドライン ツールのうちの 1 つです (もう 1 つ...

MySQLデータベースインデックスの左端一致原則

目次1. 共同インデックスの説明2. ac はインデックスを使用できますか? 3. 考える4. 最左...