ホームページ > 記事 > ウェブフロントエンド > 10日間で学ぶDiv+CSS 4日目 [縦ナビゲーションと副メニュー]_html/css_WEB-ITnose
10日間で学ぶDiv+CSS 4日目 [縦ナビゲーションと副メニュー]_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:29:31919ブラウズ
1. 垂直リスト
垂直リスト、または垂直ナビゲーションは、淘宝網の左側にあるタオバオ サービスなどのウェブサイトの商品リストで広く使用されています。今日は垂直ナビゲーションの作成方法を学びます
まず、新しいページ 、メニューの ID を持つ div を挿入し、デザイン ビューでテキストを選択し、ツールバーの ul アイコンをクリックすると、ul と li が自動的に挿入され、テキストの内容を必要に応じて変更します。
<div id="menu"><ul><li>首页</li><li>网页版式布局</li><li>div+css教程</li><li>div+css实例</li><li>常用代码</li><li>站长杂谈</li><li>技术文档</li><li>资源下载</li><li>图片素材</li></ul></div>
プレビュー効果から、周囲に大きな隙間があり、各行の前にドットがあります。これは、ラベルのデフォルトのスタイルが原因で発生します。 次に、スタイルを作成する必要があります。ラベルのデフォルト スタイルはクリアされます
CSS コードは次のとおりです:
<style type="text/css">#menu ul { list-style: none; margin: 0px; padding: 0px; }</style> 完全な HTML コードは次のとおりです:
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style type="text/css">body { font-family: Verdana; font-size: 12px; line-height: 1.5; }a { color: #000; text-decoration: none; }a:hover { color: #F00; }#menu { width: 100px; border: 1px solid #CCC; }#menu ul { list-style: none; margin: 0px; padding: 0px; }#menu ul li { background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; }</style></head></p><p><body><div id="menu"><ul><li><a href="#">首页</a></li><li><a href="#">网页版式布局</a></li><li><a href="#">div+css教程</a></li><li><a href="#">div+css实例</a></li><li><a href="#">常用代码</a></li><li><a href="#">站长杂谈</a></li><li><a href="#">技术文档</a></li><li><a href="#">资源下载</a></li><li><a href="#">图片素材</a></li></ul></div></body></html> 2. ラベルのデフォルト スタイル
ほとんどのラベルには2 番目のような独自のデフォルト スタイル。さらに、この例では、ul の前にドットがあり、左側に内側のマージンが付いています。また、フォント サイズは h1- です。 h6 は異なります。em のデフォルトは斜体であり、strong は太字を意味します。これらのデフォルト スタイルのおかげで、スタイルが読み込まれていない場合でも、適切にデザインされたページをユーザーが簡単に読むことができます。ただし、これらのデフォルトのスタイルは現時点では役に立たないため、便宜上、グローバル スタイルを簡単に統一できるタグの再定義を使用することをお勧めします。さらに、ページ上の画像にリンクを追加すると、デフォルトで境界線がリストの前に追加されます。これらは削除する必要があります。
body, ul, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd { margin: 0px; padding: 0px; font-size: 12px; font-weight: normal; }ul { list-style: none; }img { border-style: none; } 3. CSS 派生セレクター
CSS 初心者は、サブセレクターの使用が効率に影響を与える原因の 1 つであることを知りません。派生セレクターは、多くのクラス定義を保存するのに役立ちます。上の例では、次のような派生セレクターの CSS コードを使用しました
#menu ul { list-style: none; margin: 0px; padding: 0px; }#menu ul li { background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; } #menu ul と #menu ul li は、先頭の #menu を削除すると、ul タグの逆になります。再定義すると、再定義された属性がグローバルに適用され、先頭に #menu を追加すると、メニュー要素で ID が ul として定義されているスタイルになります。そのスタイルの設定は、#menu の下の ul にのみ有効になり、その後では無効になります。これはプログラミングにおけるローカル変数に似ており、ul を直接定義することはグローバル変数と同等です。 #menu ul li は、メニュー要素内の ul の下の li として定義されます。派生セレクターを使用すると、スタイルを定義するために各 li のスタイル名を定義する必要がなくなり、派生セレクターを使用してスタイルを選択するだけで済みます。これで効率が大幅に向上します。
4. CSS セレクターのグループ化
グループ化されたセレクターが同じステートメントを共有できるように、セレクターをグループ化できます。グループ化する必要があるセレクターを区切るにはカンマを使用します。以下の例では、すべての見出し要素をグループ化しています。すべてのタイトル要素は緑色で、p 段落、div パーティション、およびスパンはすべて 20 ピクセルのフォントです。
h1,h2,h3,h4,h5,h6 { color: green; } p,div,span{ font-size:20px; } 5. 垂直セカンダリ リスト
セカンダリ メニューとは、マウスを第 1 レベルのメニューに置くと、対応するセカンダリ メニューがポップアップし、マウスを離すと自動的に消えることを意味します。上記の例を変更すると、コードは次のようになります:
<div id="menu"><ul><li><a href="@#">首页</a></li><li><a href="#">网页版式布局</a><ul><li><a href="#">自适应宽度</a></li><li><a href="#">固定宽度</a></li></ul></li><li><a href="#">div+css教程</a><ul><li><a href="#">新手入门</a></li><li><a href="#">视频教程</a></li><li><a href="#">常见问题</a></li></ul></li><li><a href="#">div+css实例</a></li><li><a href="#">常用代码</a></li><li><a href="#">站长杂谈</a></li><li><a href="#">技术文档</a></li><li><a href="#">资源下载</a></li><li><a href="#">图片素材</a></li></ul></div>
All HTML+JS+CSS:
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><script type="text/javascript"><!--//--><![CDATA[//><!--startList = function() {if (document.all&&document.getElementById) {navRoot = document.getElementById("menu");var allli = navRoot.getElementsByTagName("li")for (i=0; i<allli.length; i++) {node = allli[i];node.onmouseover=function() {this.className+=" current";}node.onmouseout=function() {this.className=this.className.replace(" current", "");}}}}window.onload=startList;//--><!]]></script><style type="text/css">body { font-family: Verdana; font-size: 12px; line-height: 1.5; }img { border-style: none; }a { color: #000; text-decoration: none; }a:hover { color: #F00; }#menu { width: 100px; border: 1px solid #CCC; border-bottom:none;}#menu ul { list-style: none; margin: 0px; padding: 0px; }#menu ul li { background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; position:relative; }#menu ul li ul { display:none; position: absolute; left: 100px; top: 0px; width:100px; border:1px solid #ccc; border-bottom:none; }#menu ul li.current ul { display:block;}#menu ul li:hover ul { display:block;}</style></head></p><p><body><div id="menu"><ul><li><a href="#">首页</a></li><li><a href="#">网页版式布局</a><ul><li><a href="#">自适应宽度</a></li><li><a href="#">固定宽度</a></li></ul></li><li><a href="#">div+css教程</a><ul><li><a href="#">新手入门</a></li><li><a href="#">视频教程</a></li><li><a href="#">常见问题</a></li></ul></li><li><a href="#">div+css实例</a></li><li><a href="#">常用代码</a></li><li><a href="#">站长杂谈</a></li><li><a href="#">技术文档</a></li><li><a href="#">资源下载</a></li><li><a href="#">图片素材</a></li></ul></div></body></html>
6. 相対配置と絶対配置
配置タグ:position
属性を含むs: 相対 (相対) 絶対 (絶対)
1.position:relative; 要素が相対的に配置されている場合、最初にその位置に表示されます。次に、垂直または水平位置を設定して、元の開始点を「基準にして」要素を移動します。 (もう 1 点、相対的な配置に関しては、要素を移動するかどうかに関係なく、要素は元のスペースを占有します。したがって、要素を移動すると、要素は他のボックスを覆うことになります)
2.position:absolute;は絶対位置を意味し、位置はブラウザの左上隅に基づいて計算が開始されます。 絶対配置では要素をドキュメント フローから取り出すため、スペースを占有しません。通常のドキュメント フロー内の要素は、絶対配置された要素が存在しないかのようにレイアウトされます。 (絶対に配置されたボックスはドキュメント フローとは関係がないため、ページ上の他の要素をカバーでき、その階層順序は Z インデックスによって制御できます。Z インデックスの値が大きいほど、より高い位置に表示されます。)
3 . 親コンテナが相対配置を使用し、子要素が絶対配置を使用すると、子要素の位置はブラウザの左上隅を基準とするのではなく、親ウィンドウの左上隅を基準にするようになります
4。相対位置と絶対位置は、上、右、下、左と調整する必要があります。これらの 4 つの属性は、要素が配置された後にのみ有効になり、その他の場合は無効になります。また、これら 4 つの属性は同時に使用できるのは隣接する 2 つだけです。上下を同時に使用したり、左右を同時に使用したりすることはできません。