htmlタグとCSSタグの命名規則のまとめ

このフォルダーは主に次のフォルダーを作成します: 1. 画像は Web サイトでよく使用される画像を保存します。 2. CSS はいくつかの CSS ファイルを保存します。
4. PSD はいくつかの PSD ソース ファイルを保存します。 5、Tempはすべての一時画像とその他のファイルを保存します
6.著作権著作権情報（オプション）
8.Readme記述ファイル
統一CSS命名
注：このCSS命名規則はオブジェクトテーブル本番モードにのみ適しています
1.統一CSSファイルを css フォルダーの下に配置します。 css.css と名付けます。 2. メインのスタイル定義: body、table、td、tr、a
3. リンクのスタイル定義: link_white (白); link_black (黒); 、などなど;
注: 重複がある場合は、link_red01 などのアラビア数字と linkred のような下線を追加します
4. テキスト スタイル定義: font_red (赤); font_red_14 (赤色の 14 ポイント フォント)。 font_red_14b (赤色の 14 ポイントの太字)
5. ボーダーのスタイル定義: border_red_tblr (左右 3 つの赤色); border_red_lr (左右 2 つの赤色);サイド）など;
6. フォームスタイル定義: text_100 (テキストフィールドの幅は 100); textarea_200_red (テキストエリアの幅は 200、赤い枠線付き); button_150 (ボタンの幅は 150);
注: フォームは幅で定義され、最長の単語が名前に書き込まれます: "text_100_red"
7. 線スタイル定義: line_X (水平線) line_X_red (赤い水平線); line_X_red2 (2 ピクセルの赤い水平線); 注: line でのみ定義されています 点線と実線は境界線で定義されています
8. その他のスタイル定義: ここでは主にいくつかの個人用スタイルを定義します
article_channel.asp Article_channel ページ
article_list.asp Article_list page
article_detail.asp Article_display page
注: 複数の記事チャンネルがある場合は、article01、article02、article03 などを使用します。
exhibit_channel .asp 展覧会情報_チャンネルページ
exhibit_list.asp 展覧会情報_リストページ
exhibit_detail.asp 展覧会information_displayページ
product_channel.asp product center_channelページ
product_list.asp product center_listページ
product_detail.asp product center_表示ページ
corporation_channel.asp 会員チャンネルページ
corporation_list.asp 会員_一覧ページ
corporation_detail.asp 会員_表示ページ
information_channel.asp ビジネスチャンス情報_チャンネルページ
information_list.asp ビジネスチャンス情報_リストページ
information_detail.asp ビジネスチャンス情報_表示ページ
job_channel.asp Recruitment_Channelページ
job_list.asp Recruitment_listページ
job_detail.asp Recruitment_Displayページ
hr_channel.asp Job search_Channelページ
hr_list.asp Job search_listページ
hr_detail.asp 求人検索_表示ページ
job_hr_channel.asp タレントセンター_チャンネルページ
job_hr_lisr.asp タレントセンター_一覧ページ
job_hr_detail.asp タレントセンター表示ページ
copyright.asp 著作権ページ
画像の命名
1. ナビゲーションの命名: menu.gif 例: menuubg .gif (ナビゲーション背景画像)
2. メンバーログイン:login.gif 例:loginbg.gif (メンバーログイン背景画像)
3.検索の名前付け:search.gif 例:search_bg.gif (検索背景画像)
4小さなアイコン: ico_number.gif 例: ico_001.gif
5. ラインの名前: line_X_color.gif 例: line_X_red.gif (赤い水平点線) 説明: ラインは点線のみの名前
Line_Y_red.gif (赤い垂直点線) ）
6. 広告名：ad_number.gif 例：ad001.gif
7. 他の列の画像：列名の最初の文字.gif
例：xwzx_bg.gif (ニュースセンターの背景) cpzx_l.gif (製品中央左側の図)
8. 製品と列のホットスポット画像: pic_number.gif 例: pic_001.gif
注: 上、下、左、右は T、B、L、R と省略できます
CSSで統一されたデザインのネーミング
1. クラスの命名規則例
ヘッド: header
コンテンツ: content/container
Tail: footer
Navigation: nav
Sidebar: sidebar
Column: column
ページ周辺コントロール全体のレイアウト幅: Wrapper
左右センター: 左 右センター
ログインバー: ログインバー
ロゴ: ロゴ
広告: バナー
ページ本文: メイン
ホットスポット: ホット
ニュース: ニュース
ダウンロード: ダウンロード
サブナビゲーション: subnav
メニュー: メニュー
サブメニュー: サブメニュー
検索: 検索
フレンドリーリンク: friendslink
フッター: footer
著作権: copyright
スクロール: スクロール
コンテンツ: content
タグページ: タブ
記事リスト: list
プロンプトメッセージ: msg
ヒント: ヒント
列タイトル: title
Join: joinus
Guide: guild
Service: service
Registration: regsiter
Status: status
Vote: vote
Partner: Partner
2. コメントの書き方
/ Footer /
コンテンツエリア
/ End Footer /
3. IDの命名規則の例IN IN ID IN ID IN ID IN ID IN IN IN IN ID IN IN IN IN IN IN IN IN IN IN IN IN IN IN IN IN IN IN IN IN IN ID column：PAGE PERIPHERAL CONTROL全体レイアウト幅：左右の中心：左右中央部（2）ナビゲーションナビゲーション：NAV
MAINナビゲーション:mainbav
サブナビゲーション:subnav
トップナビゲーション:topnav
サイドナビゲーション:sidebar
左ナビゲーション:leftsidebar
右ナビゲーション:rightsidebar
メニュー:menu
サブメニュー:submenu
タイトル:title
サマリー:summary
(3) 機能
ロゴ:ロゴ
広告:バナー
ログイン:login
ログインバー:loginbar
登録:regsiter
検索:search
リボン:shop
タイトル:title
参加:joinus
ステータス:status
ボタン:btn
スクロール:scroll
タブ: タブ
記事リスト: list
プロンプトメッセージ: msg
現在: 最新
ヒント: ヒント
アイコン: icon
注: note
ガイド: ギルド
サービス: service
ホットスポット: ホット
ニュース: ニュース
ダウンロード: ダウンロード
Vote: vote
Partner: Partner
Friendly link: link
Copyright: copyright
4. クラスの仕様記述例
(1) Color:

.red { color： red； }
　　.f60 { color： #f60； }
　　.ff8600 { color： #ff8600； }

などの色の名前や16進コードを使用する (2)フォント サイズ、

.font12px { font-size： 12px； }
　　.font9pt {font-size： 9pt； }

など、「font font size」を名前として直接使用します。 (3) 配置スタイル、

.left { float：left； }
　　.bottom { float：bottom； }

など、配置ターゲットの英語名を使用します。 (4) タイトル バー スタイル、

.barnews { }
　　.barproduct { }

などの「カテゴリ関数」メソッドに名前を付ける 5. CSSファイルの命名例
Main master.css
Module module.css

基本的にbase.css

Layout、layout.css
Themes.css

Columns.cssを共有

Text font.css
Form Forms.css

Patch mend.css

Print print. css
6. 注意事項

(1) 全て小文字にする

(2) できるだけ英語を使用する
(3) ダッシュは付けない。そして下線を引く
(4) 一目で理解できる単語でない限り、単語を省略しないようにしてください

以上がhtmlタグとCSSタグの命名規則のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。