少なくとも 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 データベースの基礎を学ぶためによく使用されるコマンドを例を使って説明します...
最近、ポップアップ広告に取り組んでいました。デフォルト ページには z-index が設定されていな...
この記事では、古典的なスネークゲームを実装するためのJavaScriptの具体的なコードを参考までに...
遅い問題を完全に解決したい場合は、MySQL を MySQL 8.0 にアップグレードすることをお勧...
プログラム的アプローチの利点1. スタイルの分散を避けるためのグローバルコントロール2. シンプルな...
今日、仕事中に、一時的に追加した友人から、Web ページを使用して訪問者の QQ を取得する方法を尋...
導入最近、Docker の ARM バージョンがあることを知りました。 hub.docker.com...
目次はじめるデータストレージサーバーを構成するRedis セキュリティの管理Redisインストールの...
MySQL 5.5 のインストールと設定方法のグラフィックチュートリアルMySQL 5.5 のインス...
なぜ詰まっているのでしょうか?言及しなければならない前提があります。フロントエンド開発者は皆、ブラウ...
Linux システムで iso ファイルをインストールするにはどうすればいいですか?インストール手順...
技術初心者として、初めて Linux システムをインストールするプロセスを記録しています。まず、Wi...
最近、あるプロジェクトに取り組んでいたとき、自分のプロジェクトでは CSS3 のアニメーション技術を...
ssh は私が最も頻繁に使用する 2 つのコマンドライン ツールのうちの 1 つです (もう 1 つ...
目次1. 共同インデックスの説明2. ac はインデックスを使用できますか? 3. 考える4. 最左...