ulとliの基本的な使用法の分析

ulとliの基本的な使用法の分析
ナビゲーション、少量のデータテーブル、中央揃え
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<ヘッド>
<title>ul および li アプリケーション</title>
<スタイル タイプ="text/css">
#menu{幅:1000px;高さ:35px;フロート:右;マージン:0px;クリア:両方;垂直位置揃え:下;}
#ul li{リストスタイルタイプ:なし; クリア:両方;幅:100px;ディスプレイ:インライン; フォントサイズ:大きい;}
#ミウル・リ{float:left;width:100px;}
</スタイル>
</head>
<本文>
<div id="メニュー">
<ul id="ul">
<li><a title="" href="http://localhost:1435/BookShop/index.aspx">ホーム</a></li>
<li><a title="" href="http://localhost:1435/BookShop/hybooks.aspx">業界書籍</a></li>
<li><a title="" href="http://localhost:1435/BookShop/Clothing.aspx">ファッショントレンド</a></li>
<li><a title="" href="http://localhost:1435/BookShop/">ビューティーショップ</a></li>
<li><a title="" href="http://localhost:1435/BookShop/">マミーベイビー</a></li>
<li><a title="" href="http://localhost:1435/BookShop/">ギフトブック</a></li>
<li><a title="" href="http://localhost:1435/BookShop/">ニュース情報</a></li>
<li><a title="" href="http://localhost:1435/BookShop/">ユーザーコメント</a></li>
<li><a title="" href="http://localhost:1435/BookShop/">お問い合わせ</a></li>
</ul>
</div>
デフォルトでは、<div>は垂直でドットがあります
<ul>
<li>こんにちは</li>
<li>こんにちは</li>
<li>こんにちは</li>
<li>こんにちは</li>
</ul>
</div>
<div>
<ul>
<li style="list-style-type:none;">ドットを削除します</li>
<li style="display:inline;">こんにちは</li>
<li>こんにちは</li>
<li style="display:inline;">こんにちは</li>
</ul>
</div>
<!-- 水平方式の場合、中央に配置する場合は幅を設定する必要があり、この幅は内部の li の合計長さと同じである必要があります。 -->
<div style="text-align:center;background:#def">
<ul style="width:150px;background:#eee;">
<li style="float:left;">こんにちは</li>
<li style="float:left;">こんにちは</li>
<li style="float:left;">こんにちは</li>
<li style="float:left;">こんにちは</li>
<li style="float:left;">こんにちは</li>
</ul>
</div>
<!-- テーブルを作成する原則、ul 幅は 300 ピクセル、li 幅は 100 ピクセル、列は 3 つになります -->
<div style="text-align:center;background:#eef">
<ul id="myul" style="width:300px;background:#eee">
<li>こんにちは</li>
<li>こんにちは</li>
<li>こんにちは</li>
<li>こんにちは</li>
<li>こんにちは</li>
<li>こんにちは</li>
<li>こんにちは</li>
<li>こんにちは</li>
<li>こんにちは</li>
</ul>
</div>
</本文>
</html>

<<:  データベースインデックスの知識ポイントの概要

>>:  CSS の一部のプロパティの前には「*」または「_」が付きます。

推薦する

mysqlreplicate を使って MySQL マスタースレーブを素早く構築する方法

導入mysql-utilities ツールセットは、DBA のツールボックスとも言えるさまざまなツー...

jsを使用してシンプルな弾幕スクリーンシステムを実装する

この記事では、弾幕効果を実現するためのネイティブjsの具体的なコードを参考までに共有します。具体的な...

Linux 仮想メモリ設定のチュートリアルと実践

仮想メモリとは何ですか?まずはWikipediaからの紹介文をそのまま引用します。仮想メモリは、コン...

1 つ以上のフィールドに基づいて重複データを検索する MySQL SQL ステートメント

SQLはテーブル内の重複レコードをすべて見つけます1. テーブルには id と name の 2 つ...

MySQLデータベースを別のマシンに移行する方法の詳細な説明

1. まず、移行サーバー上のデータ ファイルを見つけます。MySQL 5.7 とデフォルトのインスト...

例によるMySql CURRENT_TIMESTAMP関数の分析

時間フィールドを作成するときデフォルトのCURRENT_TIMESTAMPデータを挿入する際、このフ...

Vueで親子コンポーネント通信を実装する方法

目次1. 親コンポーネントと子コンポーネントの関係2. 小道具3. $エミット4. $親V. 結論 ...

Linux システム ディレクトリ sys、tmp、usr、var の詳細な説明。

Linux 初心者から Linux マスターへの成長の道: Linux システム ディレクトリ s...

JavaScriptのURLオブジェクトとは何かについて話しましょう

目次概要ハッシュプロパティホストプロパティホスト名属性Href属性起源のプロパティユーザー名とパスワ...

HTMLデータ送信投稿_PowerNode Java Academy

HTTP/1.1 プロトコルで指定されている HTTP リクエスト メソッドには、OPTIONS、...

JavaScript の基礎: エラーキャプチャメカニズム

目次序文エラーオブジェクト投げる試して…捕まえて…最後に最終ルールトライ/キャッチパフォーマンスウィ...

WeChatアプレットは画像コントロールを選択します

この記事の例では、WeChatアプレットで画像コントロールを選択するための具体的なコードを参考までに...

Mysqlデータベースの文字化けに対処する方法

MySQL では、データベースの文字化けは一般的に文字セットを設定することで修正できますが、文字化け...

VUEはトークンログイン認証を実装

この記事では、トークンログイン認証を実装するためのVUEの具体的なコードを例として紹介します。具体的...

1 つの記事で Nginx の現在の制限を理解する (簡単な実装)

Nginx は現在、最も人気のあるロード バランサーの 1 つです。インターネット トラフィックの...