コンピュータープログラミング

サイトあなた自身のために水平方向のメニューを作ります

水平方向のメニュー、ほぼすべてのサイトを持っている - それは、その外観と使いやす誘致や、逆に、訪問者を追い払うためにでできるよう、重要な部分です。 作成の基本的なスキルを習得するために、HTMLに「スケルトン」を作る:さんは素の水平メニューを作成する方法を学びましょう。 あなたは確かに準備ができて、メニューを見つけることができますが、非常に良く、それを自分で開発する方法を学ぶために。 それはかなり楽しいです。

メニューを作ることを学びます

私たちは、レイアウトの主要な人物に密着意味論から逸脱しないようにしてください。 まず、あなたは自分の横のメニューを作るための基本的なスキルを学び、HTMLへの私たちのメニューの「スケルトン」を確認する必要があります。 そして、それはスタイルシートを使用して、飾るます。 私たちの横のメニューは5つの項目が含まれてみましょう。 最初の項目は、ホームページにリダイレクトされます。 第二の点 - 「私たちについて」。 第三 - 「私たちの賞」。 第四 - 「それは楽しみです。」 第五 - 「お問い合わせ」。

HTMLコードは次のようになります。

知らない人:ULタグが使用され、弾丸、その要素は、Liで始まります。 李タグは、ULに適用されるスタイルを継承します。

UL - リストのブロック要素は、それが幅に引き伸ばされます。 李はまたブロックです。

だから、index.htmlを作成します。 私たちは、コードを集めます。 この時点で、ブラウザは垂直ではなく水平方向のメニューが表示されます。 しかし、あなたの目標を持つ私たちは - サイトの横のメニューを作ります。 このために我々はCSSを必要としています。

CSSとは何ですか?

あなたがサイトの開発をマスターするためには至っていない場合は、カスケーディングスタイルシートの概念に慣れることが必要です。 実際には、これらのウェブサイトのページ上の異なる要素に適用される書式設定、処理のためのルールです。 我々は、標準的なHTMLの要素のプロパティを記述した場合、あなたは、コードの同じ部分の重複を取得し、これを数回繰り返す必要があります。 ユーザーのコンピュータ上のページのロード時間が大きくなります。 これを避けるために、CSSがあります。 それは一度だけ特定の要素を説明し、特定のスタイルのプロパティを使用する場合に、単に示すために十分です。 ページ自体のテキストだけでなく、別のファイルだけでなくの説明を行うことが可能です。 これは、サイトのすべてのページに異なるスタイルの説明を適用することができます。 CSSファイルを変更し、いくつかのページを変更することも便利です。 スタイルシートを使用すると、サイトのグラフィックスページの悪化を避けるために貢献し、HTMLよりも良いレベルでのフォントで作業することができます。

メニュー開発のためのスタイルシートを使用して

メニューのCSSコード:

  1. #My_1menu {リストスタイル:なし。 パディング:6; 幅:800ピクセル; マージン:自動;}
  2. #My_1menu李{フロート:左; フォント:イタリック18pxのArial;}
  3. #My_1menu {色:#756。 表示:ブロック; 高さ:55×; 行の高さ:55×; パディング:0PX 15ピクセル15ピクセル0PX。 背景:#dfc。 テキスト装飾:なし;}
  4. #My_1menu A:ホバー{色:#foa。 背景:#788;}

それでは、その結果、水平CSSメニューを見てみましょう。

- スケジュールされたアイテムによって残されたマークを削除するには、このコマンドなし: - #My_1menuので、ID = my_1menu、リスト形式でUL-要素のスタイルの割り当てがあります。

幅:800ピクセル - 私たちのメニューの幅は800個のピクセルです。

パディング:0 - これは内部パディングを削除します。

マージン:オート - ページの中央にある水平メニューをvyravnivnie。

#My_1menuのリチウム - スタイルリチウム要素を割り当てます。

高さ:55× - メニューの高さ。

#My_1menu:ホバー - 要素にスタイルを割り当て、それが誘導されるマウス。

すべての開発者は、ここにそのパラメータを指定することができるよう私たちは、詳細にすべての行を記述しません。 ウェブサイト上のメニューのスタイルを使用するためにこの基礎。 あなたは写真を使用して、それをより完成し、美しい外観を与えることができます。 URL(img1.png)繰り返し-X:要素はなく、例えば、背景を割り当てます。 繰り返し-XをするためのURL(img2.png)::ホバー背景もありましょう。

あなたの想像力、創造的な環境設定を使用します。 その後、ウェブサイト上で簡単なメニューを作成する方法について、その知識をもとに、あなたには、独自のユニークなデザインのページを開発することができます。

Similar articles

 

 

 

 

Trending Now

 

 

 

 

Newest

Copyright © 2018 ja.atomiyme.com. Theme powered by WordPress.