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 リスト設定 |
推薦する
HTML と CSS を書くための 6 つの最も効果的な方法
この記事では、効率を向上させ、時間を節約することを願って、最も効果的な 6 つの方法を紹介します。 ...
カルーセルカルーセルケースのJS実装
この記事の例では、カルーセルカルーセルを実装するためのJSの具体的なコードを参考までに共有しています...
Linux サーバーに SSH パスワードなしでログインする方法
テスト サーバーにログインするたびに、必ず ssh ログインのパスワードを入力する必要があります。ロ...
IDEA2020.1.2 Webプロジェクトの作成とTomcatの設定に関する詳細なチュートリアル
この記事は、IDEA で Web プロジェクトを作成し、Tomcat を構成する方法についての統合記...
DIV、テーブル、XHTML のウェブサイト構築の違いの分析と説明
簡単に言えば、ウェブサイト構築とは、「この人はどんな外見をしているのか」と「この人はどんな内面を持っ...
JavaScript のアンチシェイクとスロットリングの違いと実装
目次1. 手ぶれ補正2. スロットリング3. まとめ序文：フロントエンド開発者には、次の 2 つの要...
HTML テーブル マークアップ チュートリアル (30): セルの暗い境界線の色属性 BORDERCOLORDARK
セルでは、暗い境界線の色を個別に定義できます。基本的な構文<TD ボーダーコロダーク=colo...
JSはBaidu Newsナビゲーションバーの効果を実現
この記事では、Baidu News Navigation Barの効果を実現するための具体的なJSコ...
アイデアがWebプロジェクトを公開した後、Tomcatサーバーがプロジェクトとそのソリューションを見つけることができません
概要プロジェクトは正常に作成され、正常にデプロイされましたが、以下に示すように、Tomcat サーバ...
CSS3 はクールな 3D 回転遠近法効果を実現します
CSS3はクールな3D回転パースペクティブを実現します3D アニメーション効果はますます人気が高まっ...
Vant+postcss-pxtoremはブラウザ適応機能を実装します
Remレイアウトの適応Vant のスタイルでは、デフォルトで px を単位として使用します。rem ...
MySQLデータベースの数千万件のデータクエリとストレージの詳細な説明
目次百万レベルのデータ処理ソリューションデータストレージ構造設計クエリステートメントの最適化1000...
画像をハイパーリンクとして使用したときに表示される青いボックスを削除する方法
最近、Dreamweaver を使用して製品プレゼンテーションを作成し、画像にハイパーリンクを追加し...
Windows での Apache+Tomcat7 負荷分散構成方法の詳細な説明
準備Windows Server 2008 R2 Enterprise (2.40GH、8GB、64...
Alibaba Cloud ECS サーバーでポート 8080 を開く方法
セキュリティ上の理由から、Alibaba Cloud Server ECS にはデフォルトで独自のセ...