讓該網站自己的水平菜單

橫向菜單有幾乎所有的網站 - 這是一個重要的組成部分，因為它可以與它的外觀和易用性吸引，或者反過來，嚇跑遊客。 讓我們來學習如何創建一個基本水平的菜單：使“骨架”，以HTML，掌握創造的基本技能。 你當然可以找到一個現成的菜單，但更漂亮，學習如何自己開發。 這是很有趣的。

學習，使菜單

我們盡量不從語義，其堅持佈局的領軍人物偏離。 首先，你必須讓我們的菜單HTML中的“骨架”，學習基本技能，使自己的水平菜單。 然後它將裝飾，使用樣式表。 讓我們的水平菜單包含5個項目。 第一個項目將被重定向到首頁。 第二點 - “關於我們”。 第三 - “我們的獎項”。 四 - “這很有趣。” 第五 - “聯繫我們”。

HTML代碼如下所示：

誰不知道：UL標籤用於子彈，它的元素開始與李。 李標籤繼承應用到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像素; 填充：0像素15像素15像素0像素; 背景：#dfc; 文字修飾：無;}
4. ＃My_1menu：懸停{顏色：#foa; 背景：＃788;}

現在，讓我們來看看所產生的水平CSS菜單。

＃My_1menu - 因此對於使用id = my_1menu，列表樣式UL-元素風格分配：無 - 此命令刪除由計劃項目留下的痕跡。

寬度：800像素 - 我們的菜單的寬度為800像素。

填充：0 - 這裡面去除填充。

保證金：汽車 - 在我們頁面的中心vyravnivnie水平菜單。

＃My_1menu李 - 分配方式鋰元素。

高度：55像素 - 菜單高度。

＃My_1menu：懸停 - 指定樣式元素，當它被誘導的小鼠。

我們不會詳細描述了每行，每個開發人員都可以在這裡指定它的參數。 這種基礎的網站在菜單中使用的樣式。 你可以給它一個更完美和漂亮的外觀，使用的圖片。 分配元件，而且，例如，背景：網址（img1.png）重複 - X。 要有背景：網址（img2.png）重複-X為：懸停。

用你的想像力，創造力的偏好。 在此基礎上如何建立網站一個簡單的菜單知識，你可以開發出自己獨特的設計頁面。