CSS Webページレイアウトのヒント

フロントエンド Web ページ レイアウトに関するヒント:

(ビデオ チュートリアルの推奨: css ビデオ チュートリアル)

1. Mozilla の ul タグにはデフォルトでパディング値がありますが、IE ではマージンのみが値を持ちます。

2. 同じクラス セレクターはドキュメント内で繰り返し出現できますが、ID セレクターは 1 回しか出現できません。CSS 定義のラベルにはクラスと ID の両方を使用してください。定義が繰り返される場合は、ID の定義がID の重みが CLASS より大きいため、セレクターのは有効です。

3. 互換性を調整する愚かな方法 (IE と Mozilla):

初心者はこのような状況に遭遇する可能性があります: 同じラベル属性が設定されている場合、IE で同じラベル属性が表示されるのが通常です。 Mozilla では通常に表示するには B に設定する必要があり、そうでない場合は 2 つが逆になります。

一時的な解決策:

选择符{属性名:B !important;属性名:A}

4. ネストするタグのグループ間にスペースがある場合は、それを定義するのではなく、内部のタグの margin 属性に任せます。外側のラベルの

##5 と li ラベルの前のアイコンは、list-style-image の代わりに、background-image を使用することをお勧めします。

6. IE では継承関係と親子関係の違いが区別できず、どちらも継承関係です。

7. タグにセレクターを追加するときは、CSS でセレクターにコメントを追加することを忘れないでください。これを行う理由は、後で CSS を変更するときにわかります。

8. ラベルに暗い背景画像と明るいテキスト効果を設定した場合。現時点では、ラベルの背景色を暗い色に設定することをお勧めします。

9. リンクの 4 つの状態を定義する順序に注意してください:

Link Visited Hover Active

10. コンテンツと関係のない画像には背景を使用してください

11. 定義色は #8899FF =#89F

12 と省略できます。テーブルは、いくつかの点で他のタグよりもはるかに優れたパフォーマンスを発揮します。列揃えが必要な場合にご使用ください。

13. <script> 言語属性はありません。<p> は次のように記述する必要があります: <p><pre class='brush:php;toolbar:false;'>&lt;script type=”text/JavaScript”&gt;</pre>14. タイトルはタイトルであり、テキストのテキストです。 title はタイトルのテキストです。 <p>タイトルに必ずしもテキストを表示する必要がない場合もあるため、<h1>タイトルの内容は<h1><span>タイトルの内容<br/>に変更されます。 15. 完全な単一ピクセルのアウトライン テーブル (IE5、IE6、IE7、FF1.0.4 以降でテストに合格可能) <p><pre class='brush:php;toolbar:false;'>table{border-collapse:collapse;} td{border:#000 solid 1px;}</pre>16. 負のマージン値の場合、ラベルで絶対値を使用できます。配置する際の相対配置の役割を果たしますが、ページを中央に表示する場合、絶対配置を使用するレイヤーには left:XXpx 属性は適していません。このレイヤーを相対的に配置する必要があるラベルの隣に配置し、マージンに負の値を使用することをお勧めします。 <p>17. 絶対配置を使用する場合、マージン値配置を使用すると、ウィンドウの端を基準とした上や左などの属性の配置とは異なり、独自の位置を基準とした配置を実現できます。絶対配置の利点は、他の要素がその存在を無視できることです。 <p>18. テキストが長すぎる場合は、長い部分を省略記号に変更して表示します: IE5、FF は無効ですが非表示にすることができ、IE6 は有効です <p><br/><pre class='brush:php;toolbar:false;'>&lt;p STYLE=”width:120px;height:50px;border:1px solid blue;overflow:hidden;text-overflow:ellipsis”&gt; &lt;NOBR&gt;就是比如有一行文字，很长，表格内一行显示不下.&lt;/NOBR&gt;</pre> 19. IE コメントによってテキストの重複の問題が発生する可能性がある場合は、コメントを次のように変更できます: <p><br/><pre class='brush:php;toolbar:false;'>&lt;!–[if !IE]&gt;Put your commentary in here…&lt;![endif]–&gt;</pre>20. CSS を使用して外部フォントを呼び出す方法<p> 構文: <br/> <br/><pre class='brush:php;toolbar:false;'>@font-face{font-family:name;src:url(url);sRules}</pre>取得値: <p>name: フォント名。 font-family 属性の任意の値 <p>url(url): 絶対または相対 URL アドレスを使用して OpenType フォント ファイルを指定します <br/>sRules: スタイル シート定義 <br/>21. テキストの作成方法フォーム内のボックス内のテキストは垂直方向の中央に配置されていますか? <p>行の高さと高さのグループ化を使用しても FF で効果がない場合は、上下のパディングを定義して目的の効果を得ることができます。 <p>22. A タグを定義するときに注意すべき小さな問題: <p>{color:red;} を定義すると、それは A の 4 つの状態を表します。マウスオーバー状態を定義します。a:hover を定義するだけです。他の 3 つの状態は、A で定義されたスタイルです。 <p>a:link が 1 つだけ定義されている場合は、他の 3 つの状態も忘れずに定義してください。 <p>23. すべてのスタイルを省略する必要はありません: <p>スタイル シートが p{padding:1px 2px 3px 4px} のように定義されている場合、後続のプロジェクトに別のスタイルが追加されます。パディングは 5 ピクセル、下部のパディングは 6 ピクセルです。必ずしも p.style1{padding:5px 6px 3px 4px} と記述する必要はありません。 p.style1{padding-top:5px;padding-right:6px;} のように書くことができます。このように書くと元のものほど良くないと感じるかもしれませんが、それについて考えたことはありますか?メソッドは繰り返しスタイルを定義します。また、元の下部と左のパディング値が何であるかを調べる必要はありません。以前のスタイル P が将来変更されると、定義した p.style1 のスタイルも変更されます。 <p>24. ウェブサイトの規模が大きくなればなるほど、CSS スタイルの数も多くなりますので、命名ルールなど、事前に十分な準備と計画を立ててください。ページブロック分割、内部スタイル分類など<p>25. 一般的に使用されるいくつかの CSS スタイル: <p>1) 漢字の配置: <p><pre class='brush:php;toolbar:false;'>text-align:justify;text-justify:inter-ideograph;</pre>2) 固定幅の漢字の切り捨て: <p><pre class='brush:php;toolbar:false;'>overflow:hidden;text-overflow:ellipsis;white-space:nowrap;</pre>(ただし、テキストの切り捨ては 1 行でのみ処理でき、複数行では処理できません。) (IE5 以降) FF では処理できません。非表示にするだけです。 <p>3) 固定幅の漢字 (単語) の行折り返し: <p><pre class='brush:php;toolbar:false;'>table-layout:fixed; word-break:break-all;</pre> (IE5 以降) FF ではできません。 <p><p>4）<acronym title=”输入要提示的文字” style=”cursor:help;”>文字用鼠标放在前面的文字上看效果。这个效果在国外的很多网站都可以看到，而国内的少又少。<p>5）图片设为半透明：<br/><pre class='brush:php;toolbar:false;'>.halfalpha { background-color:#000000;filter:Alpha(Opacity=50)}</pre><p>在IE6及IE5测试通过，FF未通过，这是因为这个样式是IE私有的东西；<p>6）Flash透明：<p>选中swf,打开原代码窗口，在前输入<param name=”wmode” value=”transparent”> 以上是针对IE的代码。<p>针对FIREFOX 给<embed> 标签也增加类似参数wmode=”transparent”<p>7）在做网页时常用到把鼠标放在图片上会出现图片变亮的效果，可以用图片替换的技巧，也可以用如下的滤镜：<pre class='brush:php;toolbar:false;'>.pictures img { filter: alpha(opacity=45); } .pictures a:hover img { filter: alpha(opacity=90); }</pre><p>图文教程推荐：<a href="https://www.php.cn/css-tutorial.html" target="_blank">CSS教程</script>

以上がCSS Webページレイアウトのヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。