経験豊富なドライバーが互換性の高いページの書き方を教えます

互換性の高いページを作成する前に、まず HTML と HTML5 を学習し、次に CSS と CSS3 をある程度理解する必要があります。

通常、さまざまな種類の Web サイトを注意深く植字した後、フロントエンドをある程度習得しており、静的なページを書くことは大きな問題ではありません。その数としては、完成したウェブサイトが 3 つ以上あります。

注意事項: 互換性の高いページを書きたい場合は、フロントエンドを学ぶのは少し難しいですが、臆病にならずに学習の進捗に合わせて学習してください。まずはHTML+CSSを学び、次にHTML5+CSS3を学び、あるプログラムを学んでからJavaScriptに触れるという流れで、独学でもHTML+CSSは2ヶ月程度、JavaScriptは1ヶ月程度で確実に習得できます。 。

上記の内容がまだわからない場合は、HTML ビデオ チュートリアル、HTML5 チュートリアル、CSS ビデオ チュートリアル、CSS3 ビデオ チュートリアル、javascript をご覧ください。ビデオチュートリアル。

言い過ぎたので、互換性の高い Web ページの書き方について話しましょう:

1. ドキュメント宣言は必須です:

実際、これは直接関係ありません。 WCAG とはまったく関係ありませんが、互換性、特に下位互換性を高めるには、次のように記述する必要があります:

2. 互換性タグがある場合は、

その過程で、タグの効果が特定のブラウザー、特に H5 でのみ有効になるようにする必要があります。

3. CSS を記述する前に必ずフォーマットをクリアしてください

ほとんどのタグは互換性がありますが、使用する必要があるため、タグのフォーマットをクリアする必要があります。たとえば、IE6 および 7 ではデフォルトでマージンが付いています。はい、パディングです。 IE8、Firefox、Google ではデフォルトで提供されます。

4. 一般的なブラウザのバグは避けるべきです

例: ネストされた p で、外側の p が境界線を設定しない場合、内側の p の margin-top は無効になり、外側の p に直接影響します。 DIV (これは、外側の p margin-top の効果です)

5. 子要素はフローティングであり、親要素はデフォルトで子要素をラップできません

この状況は通常、if メソッドで処理されます:

1. 親要素に overflow:hidden を追加します。ただし、この場合、将来表示できる要素がないことを確認する必要があります。そうしないと表示されません。

<style type="text/css">
.p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden}
.p2{background:#800080;border:1px solid red;height:100px;width:98%;}
.left{float:left;width:20%;height:200px;background:#DDD}.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<p class="p1">
<p class="left">Left</p>
<p class="right">Right</p>
</p>
<p class="p2">
p2 
</p>

2. 最後のフローティング子要素の後にクリアフローティング要素を追加します

<style type="text/css">
.p1{background:#000080;border:1px solid red}
.p2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
/*清除浮动代码*/
.clearfloat{clear:both}
</style>
<p class="p1">
<p class="left">Left</p>
<p class="right">Right</p>
<p class="clearfloat"></p>
</p>
<p class="p2">
p2 
</p>

3. 親 p は疑似クラスを定義します: after とzoom

/*清除浮动代码*/ 
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} 
.clearfloat{zoom:1}

原則: IE8 以降および非 IE ブラウザーのみサポート: after 、原理は方法 2 と似ていますが、zoom (属性で変換された IE) は ie6 と ie7 の浮動問題を解決できます

4。親要素も float5 です。親 p は、overflow:auto 6 を定義します。親 p は、display を定義します。 table

<style type="text/css"> 
.p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;display:table;margin-bottom:10px;} 
.p2{background:#800080;border:1px solid red;height:100px;width:98%;} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
</style> 
<p class="p1"> 
<p class="left">Left</p> 
<p class="right">Right</p> 
</p> 
<p class="p2"> 
p2 
</p>

6. 組版の構造の問題

ウェブサイトに良い互換性を持たせたい場合は、家をしっかりと建てたい場合は、しっかりしたフレームが基礎になります。 Web サイトの互換性を良くするには、フレーム構造も良くなければなりません。つまり、スケーラブルかどうかに関係なく、フロントエンドとバックエンドの両方で同じです。

フロントエンドフレームワークはどのように確立されるべきでしょうか?次の点に注意することができると思います:

階層構造を簡単に分析する必要があります。つまり、上、中、下、左、中の概念があります。 、右側のレイヤー

最初に構造を大きくしてから、小さくする必要があります。たとえば、Web ページの中央に左側と右側がある場合は、中央を表す大きなレイヤーを作成するのが最善です。 、次に左、次に右

ベストな順序は、最初に上、次に下、最初に左、次に右、最初に外側、次に内側、最初に全体、次に部分です

7. 位置決め、フローティングなどについて

とき一部の学生は写植をしていて、構造に逸脱がある場合、要素に配置属性や浮動属性を自由に追加し、突然それを見つけます。私が言えることは、それは彼が視覚効果であると考えているものを達成しているということだけですが、彼はWeb ページの互換性が良いかどうかはわかりません。

これは、鶏を殺すために肉屋のナイフを使用するのと少し似ています。それは過剰であり、非常に不適切に使用されます。そのため、使用すべきものを使用し、常に配置したり、浮かせたりしないでください。

8. CSS 記述の問題

親子関係を使用して、たとえば #top .left img{} を定義してみてください。将来的には、スケーラビリティが向上し、新しい class="left になります。 "はこの左と競合しません。IDが重複しなければOKです。