Div+CSSレイアウト入門チュートリアル(4)_html/css_WEB-ITnose-htmlチュートリアル-php.cn

Div+CSSレイアウト入門チュートリアル(4)_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

リリース： 2016-06-24 12:31:32

オリジナル

987 人が閲覧しました

作者:番茄红了

三、页面顶部制作(2)----使用列表

制作菜单

　　开始此节的学习前，请确认你已经参照之前的几节内容写入了DIV、CSS到index.htm和css.css文件中。
　　这一节我将告诉大家如何用列表

来制作菜单。

程序代码

上記の 2 つの HTML 要素

については、該当する内容をご自身で参照してください。重要この機能は、HTML のリスト形式でいくつかの情報を表示することです。

HTML で id="divID" として定義されている場合、CSS での対応する設定構文は、HTML で class="divID" として定義されている場合、もう 1 つ注意しなければならない点があります。、CSS の対応する設定構文は .divID です。
id="divID" のレイヤーにが含まれる場合、CSS でのこの img の対応する設定構文は、同様に class=" divID に含まれる場合は #divID img {} となります。 " このレイヤーでは、設定構文は .divID img {} である必要があります。これを皆さんが明確に理解できることを願っています。
さらに、table、tr、td、th、form、img、input...など、HTML内のすべての要素を定義できます。 CSSで設定したい場合は、要素の名前を直接記述するだけで追加できます一対の中括弧 {}。すべての CSS コードは中括弧 {} 内に記述する必要があります。

上記の紹介に従って、まず css.css に次のコードを書きます。

プログラムコード

#menu ul {list-style:none;margin:0px;}
#menu ul li {float:left; }

説明:
#menu ul {list-style:none;margin:0px;}
list-style:none, この文は、リストの前のポイントが必要ないので、それらのポイントをキャンセルします。
Margin:0px、この文はULのインデントを削除するものです。これにより、リストの内容がすべてインデントされなくなります。

#menu ul li {float:left;}
ここでのfloat:leftの左右は同じ行に内容を表示するため、float属性（float）を使います。

このステップでは、最初にプレビュー効果を保存してから、次のコンテンツを追加することをお勧めします。効果は次のとおりです:

この時点では、リストのコンテンツは 1 行に配置されており、追加します#menu ul li {} のコードマージン :0 10px:

プログラムコード

#menu ul {list-style:none;margin:0px;}
#menu ul li {float:left;margin:0 10px}

Margin:0 10px の機能は、リストの内容の間に 20 ピクセルの距離を作成します (左: 10px、右: 10px) プレビュー効果は次のとおりです:

これでプロトタイプが完成しました。メニューの位置を修正して、コードを次のように変更しましょう:

プログラムコード

#menu {padding:20px 20px 0 0}
/*メニューの位置を修正するには、padding:20px 20px 0 0 を使用します*/
#menu ul {float:right;list-style:none;margin:0px ;}
/*メニューがページの右側に表示されるように float:right を追加*/
#menu ul li {float:left ;margin:0 10px}

この時点で位置は決まりましたが、概念図ではまだメニューオプションの間に縦線が残っているのですがどうすればよいでしょうか？
忘れないでください。すでに空の

が残されています。垂直線を追加したい場合にのみ使用してください。
上記の方法に続いて、次のコードを追加します:

プログラムコード

.menuDiv {width:1px;height:28px;background:#999}

、保存してプレビューしてみると、縦線は出ていますか？このコードについては多くは言いませんが、簡単に理解できるはずです。

ただし、メニューオプションのテキストが一番上にあるので、次のコードに修正します。

Program code

#menu ul li {float:left;margin:0 10px;display:block; line-height:28px }

display:block;line-height:28px についてはマニュアルを参照してください。詳細は説明しません。

効果は基本的に達成されています。あとは、メニューのハイパーリンクスタイルを変更し、次のコードを css.css に追加するだけです。

プログラムコード

#menu ul li a:link,#menu ul li a :visited {font-weight:bold;color:#666}
#menu ul li a:hover{}

これについてはもう言うことはありません、これ以上言うことはありません、最終的な効果は次のとおりです：

このセクションはここまでです、ちなみに、資料は皆さんに提供します：
概念図：クリックしてダウンロード
HTML および CSS ソースファイル: クリックしてダウンロード

関連記事:
Div+CSS レイアウト入門チュートリアル (1) # -- ページのレイアウトと計画
Div+CSS レイアウト入門チュートリアル (2) # -- の書き方全体のレイヤー構造とCSS
Div+CSS レイアウト入門チュートリアル (3) # -- ページの先頭を作る (1)
Div+CSS レイアウト入門チュートリアル (4) # -- ページの先頭を作る (2) ----list

を使ってメニューを作成する
Div+CSS レイアウト入門チュートリアル (5) # -- ボーダーとクリアを上手に活用する
CSS コードを最適化する #