4.4.3 順序付きリストの作成
ウェブページ HTML 順序付きリスト ol と順序なしリスト ul
|
データを整理するためのリスト Web ページの表示を制御する多数の HTML タグを学習した後、読者は純粋な記事ページを作成し始めることができます。このセクションでは、HTML のリスト要素について学習します。リストは、Web サイトのデザインにおいて比較的大きな割合を占めています。リストは情報を非常にわかりやすく直感的に表示し、ユーザーが理解しやすいようにしています。以降の CSS スタイルの学習では、リスト要素の高度な機能が広範囲に使用されます。
4.4.1 リスト構造 HTML リスト要素はリスト タグで囲まれた構造であり、含まれるリスト項目は <li></li> で構成されます。具体的な構造を図4.17に示します。 4.4.2 順序なしリストの作成 名前が示すように、順序なしリストは、リスト項目に順序がないリスト構造です。 Web アプリケーションのリストのほとんどでは順序なしリストが使用され、リスト タグには <ul></ul> が使用されます。記述方法は次のとおりです。 <ul> <li>リスト項目 1</li> <li>リスト項目 2</li> <li>リスト項目 3</li> <li>リスト項目 4</li> <li>リスト項目 5</li> </ul> 名前が示すように、順序付きリストは、リスト項目が特定の順序を持つリスト構造です。上から下に向かって、1、2、3、または a、b、c など、さまざまなシーケンス番号を持つことができます。 D:\web\ ディレクトリに Web ページ ファイルを作成し、ul_ol.htm という名前を付け、コード 4.17 に示すようにコードを記述します。 リスト設定: ul_ol.htm <html> <ヘッド> <title>リスト設定</title> </head> <本文> <font size="5"> Webフロントエンド技術 <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>フラッシュ</li> </ul> ウェブバックエンド学習 <オル> <li>ASP</li> <li>ASP.net</li> <li>PHP</li> <li>CGI</li> ルビー パイソン </ol> </font> </本文> </html> ブラウザのアドレスバーに http://localhost/ul_ol.htm と入力すると、図 4.18 のようなブラウジング効果が表示されます。
図4.18 リスト設定 |
推薦する
Mysql8.0はソート問題を解決するためにウィンドウ関数を使用する
MySQL ウィンドウ関数の紹介MySQL は MySQL 8.0 以降、ウィンドウ関数をサポートし...
jQueryは広告を上下にスクロールする効果を実現します
この記事では、広告を上下にスクロールする効果を実現するためのjQueryの具体的なコードを参考までに...
CentOS7.5にHarbor1.7をインストールして設定するプロセス全体
1. 必要なパッケージをダウンロードする wget -P /usr/local https://st...
React Native の基本原則の深い理解 (Bridge of React Native)
この記事では、React Native の基本をすでに理解していることを前提とし、ネイティブと Ja...
MySQL の遅いクエリ操作の例の分析 [有効化、テスト、確認など]
この記事では、MySQL のスロー クエリ操作について例を挙げて説明します。ご参考までに、詳細は以下...
Vueコンポーネントドキュメント生成ツールライブラリのメソッド
目次.vue ファイルの解析文書情報を抽出するコンポーネント名、説明、プロパティ、メソッド、モデルを...
弾幕効果を実現するためのjQuery
この記事では、弾幕効果を実現するためのjQueryの具体的なコードを参考までに共有します。具体的な内...
MySQL ビュー管理ビューの例の詳細説明 [追加、削除、変更、クエリ操作]
この記事では、例を使用して MySQL ビューの管理ビュー操作について説明します。ご参考までに、詳細...
VMware Workstation Pro が Win10 アップデートにより開けなくなる問題の解決方法
今夜の夕食後にノートパソコンの電源を入れたところ、問題が発生しました。通常、コンピューターがスリープ...
MySQL 5.7 の Docker バージョンを MySQL 8.0.13 にアップグレードし、データを移行する
目次1. 古いMySQL5.7データをバックアップする2. MySQL8.0.13のイメージをプルし...
Linux システムで httpd の自動インストールと構成を Ansible で実装する方法
1. Ansibleのプレイブックを使用してhttpdを自動的にインストールする1) まず、Ansi...
順序再構築に関する簡単な説明: MySQL シャーディング
目次1. 目的2. 環境整備1. 基本情報2. データベース環境の準備3. データベースを構築し、サ...
CSSは高さと幅を固定した要素の比例表示効果を実現します
padding-top パーセンテージを使用すると、固定幅と比例した高さの表示を実現できます。現在の...
JavaScript ツールチェーンの不完全なガイド
目次概要静的型チェックコードスタイルチェック（Linter）パッケージマネージャーモジュールローダー...
JavaScript に関する 6 つの奇妙で便利な点
目次1. 解体のヒント2. デジタルセパレーター3. try...catch...finally が...