ホームページ > 記事 > ウェブフロントエンド > collection_html/css_WEB-ITnose という名前の DIV+CSS 仕様
collection_html/css_WEB-ITnose という名前の DIV+CSS 仕様
- WBOYオリジナル
- 2016-06-24 11:52:381146ブラウズ
CSS+DIV Web ページ (Xhtml) を開発するとき、最も混乱し、複雑になるのは CSS の名前付けです。特に初心者にとっては、何に名前を付けるか、どのような名前を付けるのが最適なのかがわかりません。
命名規則の説明:
1)、すべての名前は小文字が最適です
2)、属性の値は二重引用符 ("") で囲む必要があり、class= のような値を持つ必要があります。 divcss5 ",id="divcss5"
3)、各タグには開始と終了があり、正しいレベルが必要です。また、レイアウトは規則正しくきちんとしていなければなりません
4)、空の要素には終了タグが必要ですまたは開始タグに「/」を追加します
5)、パフォーマンスと構造は完全に分離されており、コードにはスタイル、フォント、bgColor、ボーダーなどのパフォーマンス要素は含まれません。
6)、定義は次のとおりです。大から小への原則に従い、文書の構造を反映し、検索エンジンのクエリを容易にします。
7)、各テーブルとフォームに一意の構造タグ ID を追加します
8)、画像に alt タグを追加します
9)、英語の命名原則を使用するようにしてください
10)、単語が異なる場合を除き、省略しないようにしてください一目で分かりやすいです
Web ページの外層の重要な部分の CSS スタイルの名前:
コートラップ------最も外側のヘッダーに使用されます header-----ヘッダーのメインコンテンツに使用されます main----------ヘッダーの左側に使用されますメイン コンテンツ (中央) main-left-- -----------左レイアウト 右 main- right-----------右レイアウト ナビゲーション バー ナビゲーション---------- ------- ---Web ページのメニュー ナビゲーション バーのコンテンツ -------下部のフッターに使用 ------------ -------Web ページの中央部分に使用されます。下部
DIV+CSS 命名リファレンス テーブル:
以下は、CSS スタイルの命名と CSS ファイルの命名リファレンス テーブル、DIV CSS 命名コレクションです:
CSS スタイルの名前付け | 手順 | |
| Web ページの公開名付け | ||
| #wrapper | ページ周辺部は全体のレイアウト幅 | |
| #container または #content | 最外層に使用されるコンテナ | |
| #レイアウト | レイアウト | |
| #head,#header | ヘッダー部分 | |
| #foot,#footer | フッターセクション | |
| #nav | メインナビゲーション | |
| #subnav | レベル2ナビゲーション | |
| #menu | メニュー | |
| #submenu | サブメニュー | |
| #sideBar | サイドバー | |
| #sidebar_a ,#sidebar_b
| 左または右のサイドバー
|
|
| #メイン
| ページ本文
|
|
| #tag
| tag
|
|
| #msg#メッセージ
| メッセージ
|
|
| #ヒント
| ヒント
|
|
| #投票
| 投票
|
|
|
| フレンドリーリンク
|
|
|
| タイトル
|
|
|
| 概要
|
|
| ログインバー | | |
| 検索入力ボックス | | |
| ホットスポット | | |
| 検索 | | |
| 検索出力は検索結果と類似しています | ||
| #searchBar | SearchBar | |
| #search_results | 検索結果 | |
| #copyright | 著作権情報 | |
| #ブランディング | 商標 | |
| #ロゴ
| ウェブサイトのロゴ
|
|
| #siteinfo
| ウェブサイト情報
|
|
| #siteinfoLegal
| 法的通知
|
|
| #siteinfoクレジット
| 評判
|
|
| #joinus
| 参加してみませんか
|
|
| #パートナー
| パートナー
|
|
| #サービス
| サービス
|
|
| #regsiter
| 登録
|
|
| arr/arrow
| | #guild|
| ガイド | | #sitemap|
| サイトマップ |
| | #リスト
| リスト | | #ホームページ|
| ホームページ | | #subpage|
| セカンドページ サブページ |
| | #tool,#toolbar
| ツールバー | | #drop|
| ドロップダウン | | #dorpmenu|
| ドロップダウンメニュー | | #ステータス|
| ステータス | | #scroll|
| スクロール | | .tab|
| タブページ | | .left.right.center|
| 左、中央、右 | .news | |
| ニュース
|
ダウンロード |
|
| 電子貿易関連 |
製品価格 | |
| .products_description | 製品説明 | |
| .products_review | 製品レビュー |
|
|
| .editor_review
| エディターレビュー |
|
| .news_release
| 最新製品 |
|
| .publisher
| プロデューサー |
|
| .スクリーンショット
| サムネイル |
|
| .faqs よくある質問 | |
| .キーワード | キーワード | |
| .blog | ブログ | |
| .forum | フォーラム | |
| CSS ファイルの名前付け | 説明 | |
| master.css、style.css | メイン | |
| module.css | module | |
| base.css | 基本的な共有 | |
| layout.css | レイアウト、レイアウト | |
| 主題.css | テーマ | |
| columns.css | 列 | |
| font.css | テキスト、フォント | |
| forms.css | フォーム | |
| mend.css 。 .. Huiduでは【純正IDE共同プロモーションプラン】を提供しており、各種IDEを半額で販売しております（締切：2014/12/31）。さらに、50%オフのタイムセールやiPhone 6、iPad airなどの無料プレゼントもございます |
|