HTML5 7 日目のメモ

HTML5 の新しいタグ H5 はセマンティクスを非常に重視しています

1aa9e5d373740b65a0cc8f0a02150c53ab946e7546ab66a280dd9c9f9310ecd5 ヘッダー (div に相当、H5 と互換性のないブラウザではデフォルトは div の効果です)

c787b9a589a3ece771e842a6176cf8e97286434eb5627577b7359d2b1c8c856484122da5b51c58ef54d7045814144010

ブロックレベルの要素はフローティングされた後は幅がないため、それに幅を追加する必要があります。

background:none; 背景画像をクリアします。

Positioning:

position:

static: static

fixed: 固定位置 (ブラウザに対して相対的に変更) は独自の位置を保持しません

relative: 相対位置それ自体に対して相対的に変更されます)、それ自体の位置を保持し、通常は絶対位置指定とともに使用されます。

absolute: 絶対位置 (親要素に対して相対的に変更) はその位置を保持しません。

left:20px/50%

top:20px/50%

bottom:20px/50%

right:20px/ 50%

要素が絶対配置されている場合、その親要素に対して相対配置を設定する必要があります。

位置関係要素がある場合、カスケード関係が存在します。

z-index: カスケード関係を設​​定します

z-index:-0 1 2 3 ...99999 (値が大きいほど上位に表示されます)

要素の表示モード

display:block;/inline;/inline- block;/none

display:block ブロックレベル要素のデフォルトの表示モード

display:inline インライン要素のデフォルトの表示モード

display:inline-block デフォルトインラインブロックレベル要素の表示モード

display:none ラベルを非表示にします。スペースを取りません

visibility:hidden スペースを非表示

ナビゲーション ドロップダウン メニューの作成

ドロップダウン メニュー

<nav class="nav">
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">新闻</a>
<div>
<p>本地</p>
<p>国内</p>
<p>国际</p>
<p>政府</p>
</div> 
</li>
<li><a href="#">娱乐</a></li>
<li><a href="#">军事</a></li>
<li><a href="#">头条</a></li>
</ul> 
</nav>
li div{
display: none;
position: absolute;
background:darkgreen;
}
li:hover div{
display: block;
}
.nav ul{
position: relative;
}

上記は HTML5 ノートの 7 日目の内容です。その他の関連コンテンツについては、こちらをご覧ください。 PHP 中国語 Web サイト (www.php .cn) に注意してください。