よく使われる CSS テクニック集_html/css_WEB-ITnose-htmlチュートリアル-php.cn

よく使われる CSS テクニック集_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:40:22

オリジナル

1060 人が閲覧しました

1. ブラウザのフォントサイズをリセットします

ブラウザのデフォルトをリセットしてからブラウザのフォントサイズをリセットします 9MB ファイルをダウンロードしたくない場合は、Yahoo のユーザーインターフェイスを使用して CSS スキームをリセットできます。コードは次のとおりです。

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p, blockquote,th,td {margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } q:before,q:after { content:”; } abbr,acronym { border:0; }

ログイン後にコピー

次に、以下を使用して、ブラウザのフォントサイズを 10 ピクセルにリセットします:

html {font-size: 62.5%;}

このサイズは基本的に適切です。その後、調整できます。タイトル 1 は 120 ピクセルなど、必要に応じてサイズを指定します。
h1 {font-size: 2em;}

2. 水平方向の中央揃えを設定します
現在、ほとんどの Web サイトは固定幅です。 CSS コードは次のとおりです:
div#container {margin: 0 auto;}

3. 制御位置: 絶対位置、相対位置
div が 2 つある場合

<div id='parent'> <div id='son'></div> </div>

ログイン後にコピー

div に left 属性と top 属性がある場合、

内部 div の位置属性が絶対値の場合、それはドキュメントの左上隅を基準とします。

内部 div (息子の ID を持つもの) の位置属性が相対、その後の位置左と上の値は外側の div の左上隅からの距離に相対します

4. 必要に応じて、重要な要素を画面の中央に配置します。中央に必要なものを配置するには、次の CSS を使用できます:

div.popup { height:400px; width:500px; position: absolute; top: 50%; left: 50%;} div.popup { margin-top: -200px; margin-left: -250px;}

ログイン後にコピー

幅と高さを明示的に指定し、この部分を元に戻せるように、top プロパティと left プロパティをそれらの半分に設定する必要があります。画面の中央。

5. 再利用可能なルール

.left {float: left;} .right {float: right;} img .left { border:2px solid #aaaaaa; margin: 0 10px 0 0;} img .right { border:2px solid #aaaaaa; margin: 0 0 0 10px; padding: 1px;}

ログイン後にコピー

独自の CSS スタイルシートを設定すると、必要なときにタグを直接追加できます。

6. IE6 の浮動要素の二重マージン問題を解決する

div に float:left と margin-left:100px を設定すると、このバグが IE6 で発生します。もう 1 つのディスプレイを設定するだけで済みます。コードは次のとおりです:

div {float:left;margin:40px;display:inline;}
7. シンプルなナビゲーションメニュー

デザインにナビゲーションバーをプリセットします。非常に役立ちます。これにより、他の人があなたの Web ページの主要なコンテンツを大まかに理解できるようになります。初めての XHTML:

<div id=”navbar”> <ul> <li><a href=”http://www.peakflowdesign.com”>Peakflow Design</a></li> <li><a href=”http://www.google.com”">Google</a></li> <li><a href=”http://zenhabits.net/”>Zen Habits</a></li> </ul> </div>

ログイン後にコピー

CSS コード:

#navbar ul li {display:inline;margin:0 10px 0 0;} #navbar ul li a {color: #333;display:block;float:left;padding:5px;} #navbar ul li a:hover {background:#eee;color:black;}

ログイン後にコピー

8. 現在、テーブルのない Web サイトをデザインしているため、Put it on に重点を置きます。 DIV を使用します。テーブルの列とフィールドには制約がなくなったので、JeddHowden.com にある便利な CSS が必要です

それはページの下部に残ります

会社のバージョン情報は常にページの下部に保持されますページのこの部分の情報を実装するにはどうすればよいですか?これは非常に古いテクニックですが、すべて The Man in Blue のおかげです。 内部 CSS オプション。要素は多くのクラスを適用できます。例: .red {color: red;}

.bold {font-weight: Strong;}

それを使用できます:

Thisテキストは赤色で太字になります。