ホームページ > 記事 > ウェブフロントエンド > HTMLの基礎(5) - CSSスタイルシートのスタイル属性の形式とレイアウト
HTMLの基礎(5) - CSSスタイルシートのスタイル属性の形式とレイアウト
- WBOYオリジナル
- 2016-07-11 08:43:561747ブラウズ
1. 位置: 固定
ロック位置 (ブラウザーに対する相対的な位置)。一部の Web サイトの右下隅にあるポップアップ ウィンドウなど。
例:
2番目、位置: 絶対
絶対位置:
1. 外側のレイヤーには、position:Absolute (または相対) がない場合、b に示すように、div はブラウザーを基準にして配置されます (ブラウザーの右端から 50 ピクセル、下端から 20 ピクセル)。
2. 外側のレイヤーの位置: 絶対 (または相対) の場合、下の図に示すように、div は外側の境界線を基準に配置されます (d の右境界線から 50 ピクセル、d の下境界線から 20 ピクセル)。 ）。
例:
3、位置: 相対
相対位置:
以下に示すように、この div を含む div の特定の位置に対して相対的に固定されます。外層にそれが含まれていない場合、相対位置はブラウザを基準にして固定されます。
例:
4. レイヤー化 (z-index)
z軸方向のレイヤー化は、紙の山に分割することとして理解でき、レイヤーの数が多いほど、それらは上位になります。
上記の相対的な例では、aa が a をカバーしていることがわかります。これは、後で記述されたコードの表示レベルが高いためです。では、コードの順序を変更せずに、どうすれば aa をカバーできるでしょうか。以下の通り:例:
5、フロート: 左、右
Left、rightの位置（left、top）を指定する必要はなく、ブラウザに対して直接相対的です。外側を折り返した場合は、外側のdivの左上または右上の位置が1行を除いて表示されます。
追加: 1. オーバーフロー: 非表示; 余分な部分を非表示にし、スクロール バーを表示します。
2. カーソル: ポインター マウスがポイントしたときの形状3. 半透明効果:
スタイルシートのコードは次のとおりです:
.ボックス
{
不透明度:0.5; -moz-opacity:0.5; フィルター:alpha(opacity=50)
}
上記の実践例を要約すると: 麻薬暴君のウェブサイトリストのフォーマットレイアウトの一部を作成する
htmlコード:
リーリー
コードを表示
