以下は私が日々の勉強で蓄積したものです。かなり複雑ですので、修正や追加を歓迎します
1. CSSリセット(cssリセット)
これは私が単にまとめたものであり、そうではありません。必要に応じて追加を続けることができます:body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0;font-size:12px;}
ol,ul{ margin:0;padding:0;list-style: none;}
a{text-decoration:none;}
img{border:none;}
2. フルスクリーンマスク
ページのドキュメント構造は次のとおりです: body 3. インライン要素とブロック要素
インライン要素: コンテンツは幅を拡張します。幅と高さはサポートされません。上部と高さはサポートされません。マージンとパディングの下マージン、左右のサポート、コードの折り返しはスペースとして解析されます (つまり、行に表示されず、行ごとに 1 つずつ表示されます)。これはスペースとして解析されるギャップです。本文など、ページ内のテキストの半分のサイズ font-size を 12px に設定すると、ギャップは 6 ピクセルになります
Block 属性タグ: 幅がない場合、デフォルトで行を埋めます。幅をサポートしますと高さ、およびすべての CSS コマンドをサポートしますimg はインラインでもブロックでもありませんが、インラインです。ブロックインラインブロック要素
inline-block の機能は次のとおりです: 幅がない場合、コンテンツは幅を拡張します
ie6 と ie7 はインラインをサポートしません- ブロック属性タグのブロック (解決策: float を使用)
4: カーソル属性
cursor: url(xxx.cur)、ポインタ; 意味: jpg、gif、png などを使用できますが、互換性がある可能性があります.cur 形式を使用するのが最善です。前の画像に問題があり、再現できない場合は、ポインタを使用します。
5. 幅が異なる場合。設定しても、幅は引き続きコンテンツによってサポートされます2. フロートに設定した後、ドキュメント フローから外れます
6. 配置
配置:
1. 絶対配置はフローティングと同じで、要素が作成されます。幅が設定されていない場合、ブロック属性ラベルのコンテンツは幅と高さをデフォルトでサポートします。前者はレベルが高くなります (スタックレベルですが、常に 1 未満です)。固定位置で幅が設定されない場合は、ブロック要素のコンテンツの幅を拡張できます。これは基本的に絶対配置と同じです。違いは、IE6 では固定配置がサポートされていないため、js 5 で解決できます。親の overflow: hidden は子セットをカバーできません。 toposition:relative (これは、子要素の高さが親要素よりも高い場合、通常の状況では、相対に設定しても要素自体には影響しません)、この問題を解決する方法は、位置決めを追加することです。6. IE6 では、以下のように、配置された要素の親要素の幅と高さが奇数の場合、配置された要素の右と下により良い解決策が見つからない場合は、奇数の幅と高さを持つ親要素を回避します
7. float をクリアします
1. 親に float を追加しますが、親にも親が必要な場合はどうすればよいですか?レイヤーごとに追加しますか?スケーラビリティが低いと、次のような問題が発生します。ページ内のすべての要素がフローティングになり、左右のマージンが自動的に無効になります (フロート状態が悪くなります!)。結論: 適用できません。あきらめてください。 !
2. フローティング要素の親に display: inline-block を追加します。 結論: ダメです。margin:0 auto は無効です。
3. 浮動要素の後に空の div を追加します。height: 0px ですが、IE6 では最小の高さは 19px ですが、すべての要素に最小要素があるわけではありません。この問題を解決するには、 font-size: 0; を追加します。ただし、IE6 で残っている 2px の問題は解決できません (スタイルは: 空の div を追加、クラスはクリア、スタイルは: clear: Both; font-size: 0; height: 0;) を聞いてください。次回の分解
4. 浮動要素の後に
を追加します。br には left、right などの値が含まれます。br には同じ効果があります。明確に: 両方同じです。IE6/7 で動作し、トラブルが軽減されます。このソリューションを使用することはできますが、構造、スタイル、動作の分離という w3c 標準を満たしていません (私は br タグを書きました)。
5. after 疑似クラスはドキュメント構造を変更せず、content: "content content" は構造を変更しません (F12 を押すと、ドキュメント構造内の単語 "content content" が変更することがわかります)存在しませんが、ページに追加することはできます)、たとえば、 style: p:after{content:"content",background:red;width:10px;height:10px;} 次に、背景が配置されている場所赤への色変更は「コンテンツ」のみです。つまり、コンテンツ内のテキストの背景色と p は変更されません。また、幅と高さもコンテンツ内の内容に影響し、p 要素には影響しません。 , IE6/7 では、a タグの 4 つの疑似要素のみがサポートされます。クラスは after 疑似クラスをサポートしませんが、IE6/7 では浮動要素の親にwidth の場合、float をクリアする必要はありません。after 疑似クラスがサポートされていない場合は問題ありません。親が width を持っている場合、float をクリアする必要がないのはなぜですか?これは、IE に haslayout という機能があるためです (Baidu Encyclopedia だけです)。デフォルトは false で、これを true に設定できます (Haslayout はサイズに基づいてトリガーされます)。要素の内容または親のサイズを再計算するには、親が幅を指定しない場合はどうすればよいでしょうか。このとき、zoom:1 を使用します (Baidu Encyclopedia には、通常以外のズーム値が haslayout を true にするトリガーになる可能性があると記載されています)。したがって、通常は次のように使用されます。浮動要素.clear{zoom:1 };.clear:after{conetent:"";display:block;clear:both;} (前者はie6/7の下でclear floatを解決し、後者は他の下でclear floatを解決します。ブラウザ)、これが現在推奨されています。 クリアフローティングメソッド、推奨、推奨! !
6. オーバーフローには浮動要素が含まれる可能性があるため、オーバーフローは明確な浮動要素の錯覚を作成し、浮動要素の親に追加されます。ただし、IE6 では問題が発生します。要素を上位レベルに引き上げる関数です。次に、zoom:1 を使用して haslayout をアクティブにします。表示されるべきコンテンツが非表示になる可能性があるため、このメソッドはほとんど使用されません。
注: clear 属性はブロック要素にのみ追加でき、インライン要素には影響しません。 !

webdevelopmentReliesOnhtml、css、andjavascript:1)htmlStructuresContent、2)cssStylesit、および3)Javascriptaddsinteractivity、形成、

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

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

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

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

メニューで点線のラインセグメンテーション効果を設計する方法は?メニューを設計するときは、通常、皿の名前と価格の間に左右に合わせることは難しくありませんが、真ん中の点線またはポイントはどうですか...


ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

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

DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

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

mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません
