ホームページ ウェブフロントエンド htmlチュートリアル DIV+CSS_html/css_WEB-ITnoseの6つのポイント

DIV+CSS_html/css_WEB-ITnoseの6つのポイント

Jun 24, 2016 pm 12:33 PM

DIV+CSS は初めてですか?注意が必要な質問が 6 つあります。 DIV+CSS の初心者として、コードを記述する前に Web ページの全体的な構造を明確に理解していれば、半分の労力で 2 倍の結果が得られます。ただし、執筆プロセス中には常に何らかの問題が発生するため、立ち止まって情報を探したり、属性の定義を明確にしたりする必要があります。
実際、DIC+CSS をより深く理解しながら効率を向上させる方法はたくさんあります。以下にいくつかの点を示します。

1. CSS 命名規則:

1. ファイル命名規則
グローバル スタイル: global.css;
フォント スタイル: font.css;
リンク スタイル: link . css;
印刷スタイル: print.css;
2. 共通のクラス/ID 命名規則
ヘッダー: ヘッダー
コンテンツ: コンテナー
フッター: フッター
著作権: copyright
ナビゲーション: メニュー
メイン ナビゲーション: mainMenuサブナビゲーション:subMenu
ロゴ:logo
スローガン:banner
タイトル:title
サイドバー:sidebar
アイコン:アイコン
注記:note
検索:search
ボタン:btn
ログイン:login
リンク:リンク
情報ボックス:manage
……

2. ブラウザの BUG 問題への対処
この点に関しては、あの専門家が CSS BUG をジングルにしたのかな!ここに引用すると覚えやすいです!
1. IE の境界線が境界線がないように見える場合は、高さの設定が忘れられている可能性があることに注意してください。

2. フロートが生成されるのには理由があります。親レイヤーがフロートを含めたい場合は、フロートを含めます。すぐにクリアする必要があります。コンテナはその中に自然に表示されます。 3. ピクセル テキストの動きが遅い場合でもパニックにならないでください。高さの設定が役に立ちます。 4. デフォルトはすべてのブラウザーと互換性があることに注意してください。行の高さの設定はキラーになる可能性があります。

5. フローティングを個別に解除し、行の高さをなしに設定し、高さをゼロに設定することを忘れないでください。これにより、デザイン効果が向上します。
6. レイアウトの学習には思考が必要です。自然で直線的なレイアウト原則、制御しやすい HTML、ハッキングの少ない合理化されたレイアウト、クリーンなコード、優れた互換性、フレンドリーなエンジンが歓迎されます。

3. すべてのタグがアクティブです
デフォルトが異なるだけです。Span は Wji です。Wji はインラインとブロック レベルの 2 つのインストゥルメントを生成します。img はより特殊ですが、法的原則にも準拠しています。その他は単に異なる変更です。 、1 つの * 記号はすべてを返します。すべてが規則的であるため、カスケード スタイルにはさらに練習が必要であることがわかりました。

4. 画像リンクのレイアウトに注意してください
画像リンクのテキストリンクを揃える場合は、多少の違いでも問題ありませんので、padding とvertical-align:middle を設定する必要があります。

5. IE フローティング二重マージン
表示: インラインを使用してください。そして造花メーカー

6. リストの水平レイアウト
リストのコードは互いに近くなければならず、ギャップは記憶されなければなりません。

DIC+CSS の学習は長い道のりであり、それを本当に続けるには敬虔な新しい心を持たなければなりません。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

< Progress>の目的は何ですか 要素? < Progress>の目的は何ですか 要素? Mar 21, 2025 pm 12:34 PM

この記事では、HTML< Progress>について説明します。要素、その目的、スタイリング、および< meter>との違い要素。主な焦点は、< Progress>を使用することです。タスクの完了と< Meter> statiの場合

< datalist>の目的は何ですか 要素? < datalist>の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

この記事では、HTML< Datalist>について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

< meter>の目的は何ですか 要素? < meter>の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

この記事では、html< meter>について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化< Meter> < Progress>およびex

ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? Mar 20, 2025 pm 05:56 PM

この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

HTMLは初心者のために簡単に学ぶことができますか? HTMLは初心者のために簡単に学ぶことができますか? Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1)HTMLの学習曲線はスムーズで簡単に開始できます。 2)基本タグをマスターして、Webページの作成を開始します。 3)柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用​​できます。 4)豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

< iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? < iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? Mar 20, 2025 pm 06:05 PM

この記事では、< iframe>外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

HTML、CSS、およびJavaScriptの役割:コアの責任 HTML、CSS、およびJavaScriptの役割:コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLでの開始タグの例は何ですか? HTMLでの開始タグの例は何ですか? Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

See all articles