div+css 命名規則_html/css_WEB-ITnose-htmlチュートリアル-php.cn

div+css 命名規則_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:32:13

オリジナル

928 人が閲覧しました

div+css 命名規則

2009-04-15 11:48

共通のコード構造:

div: 主にレイアウト、分割ページ構造に使用されます
ul/ol: unordered /Ordered に使用されますリスト
span: には特別な意味はなく、組版の補助として使用できます。例:

(4.23)Hermit Tofu Shop

次に定義します。 CSSでspanを使用して右にフローティングし、日付とタイトルを両側に表示する効果を実現します

h1-h6: タイトル
h1-h6を重要度に応じて降順に並べます
h1は最も重要なタイトルです

label: Inフォームをより使いやすくし、フォームのレイアウトにも役立つ便利な機能:

passwordパスワード" name=" パスワード" id="user-password" /> フィールドセットと凡例: フィールドセットはフォームの外側に設定され、凡例はフォームの内容を説明するために使用されます。例:

title >

dl,dt,dd: ページの最初の行がタイトル/簡単な説明のように表示され、その後に詳細が表示されます。例:

CSS とは?
XHTML とは何ですか?

C #content

S #subcol

M #maincol

X #xcol

これは、Web ページがc-sm は 2 つの列があることを意味し、c-mx は 2 つの列がありそのうち 1 つが取り付けられていることを意味し、c-m は 1 つの列を意味します。

3 列のレイアウトは 2 つの層に分割する必要があります。最初の層は #subcol と #main で、2 番目の層は #maincol と #xcol です。

カスタムの名前付け:

w3c Web サイトによると、意味のある名前を付けるのが最善です
例: 重要なニュースが強調表示されます (赤など)
2 つのタイプがあります

.red{color:red} . important -news{ color:red}

明らかに 2 番目の方がより明確な意味を伝えているため、不明瞭な意味を独自のカスタム名として使用しないようにしてください

よく使用される CSS 命名規則:

Header: header Content: content /container Tail: footer Navigation: nav サイドバー: サイドバー

コラム: コラムページ周辺コントロール全体レイアウト幅: ラッパー左右中央: 左右中央

ログインバー: ログインバーロゴ: ロゴ広告: バナーページ本文: メインホットスポット: ホット

ニュース: ニュースダウンロード: ダウンロードサブナビゲーション: subnav メニュー: menu

サブメニュー: submenu 検索: 検索フレンドリーリンク: friendslink フッター: footer

著作権: copyright スクロール: スクロールコンテンツ: content タブ: tab

記事リスト: list プロンプト情報: msg Tips:tips Column title:title

Join:joinus Guide:guild Service:service Registration:regsiter

Status:status Vote:vote Partner:partner

(2) Comments:

/* Footer */

Content area

/* End Footer */

(3) IDネーミング:

(1) ページ構造

Container:container Header: header Content: content/container

Navigation:

サイドバー：mainbav サブナビゲーション: subnav

トップナビゲーション: topnav サイドナビゲーション: サイドバー左側のナビゲーション: leftsidebar

右ナビゲーション: rightsidebar メニュー: メニューサブメニュー: サブメニュー

タイトル: タイトル概要: 概要

(3) 機能

ロゴ：ロゴ広告：バナーログイン：ログインログインバー：loginbar

登録：regsiter 検索：検索リボン：shop

タイトル：タイトル参加：joinus ステータス：ステータスボタン：btn

スクロール：scrollタブページ: タブ記事リスト: リストヒント情報: msg

現在: 現在のヒント: ヒントアイコン: アイコン注: note

ガイド: ギルドサービス: サービスホットスポット: ホットニュース: ニュース

ダウンロード: ダウンロード投票: vote パートナー:パートナー

フレンドリーリンク: link 著作権: copyright

(4) クラス命名:

(1) 色:

.red { color: red }

などの色の名前または 16 進コードを使用します。 f60 { color: #f60; }

.ff8600 { color: #ff8600; }

(2) フォントサイズは、

.font12px { font-size : など、名前として直接使用します。 12px; }

.font9pt {font-size: 9pt; }

(3) 配置スタイル、

.left { float:left; }

.bottom { float; など:bottom ; }

(4) タイトルバーのスタイル。名前には 'カテゴリ + 関数' メソッドを使用します。例:

.barnews { }

.barproduct { }

Notes::

1. 常に小文字。

2 . 英語を使うようにしましょう

3. ダッシュやアンダーラインは付けないでください

Main master.css モジュール module.css 基本的に。共有base.css

レイアウト、レイアウトレイアウト.css テーマ.css 列列.css

テキスト font.css フォーム.css パッチ mend.css print print.css