拋開用表格做導覽列的傳統作法吧
用列表語法ul和li結合CSS樣式控制
輕鬆做出語法與畫面同樣簡潔的web2.0導覽選單


現在流行製作非常簡潔的網頁導覽選單
尤其在部落格性質的網站更是如此
其實這些選單早已不再是利用表格排版製作
而是用HTML的列表語法先訂結構
再透過CSS樣式表將畫面表現呈現出來
範例網頁
1.首先我們先寫出導覽列的內容架構

<div id="menu">
<ul>
<li class="menudeco"></li>
<li><a href="#">部落格</a></li>
<li class="menudeco"></li>
<li><a href="#">相簿</a></li>
<li class="menudeco"></li>
<li><a href="#">留言板</a></li>
<li class="menudeco"></li>
<li><a href="#">名片</a></li>
<li class="menudeco"></li>
</ul>
</div>

這是用ul和li列表做出的導覽列內容
整個架構包在id為menu的div之中

2.再來撰寫將列表變成橫向的樣式表

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

在#menu ul中的語法意義:
float:right----將直向列表變成橫向,且向右對齊
list-style:none----不要顯示項目符號
在#menu ul li中的語法意義:
float:left----每一個列表項目由左開始排列
margin:0px 10px 0px 0px----每一個列表項目彼此的右變間距為10px
此時可以預覽看看,原本的列表項目以變成頗具雛形的導覽列



3.製作分隔線樣式表
.menudeco{
width:1px;
height:18px;
background:#7A3719;
}

4.製作menu樣式表定位選單位置
#menu{
padding:10px 0 0 0;
background:url(images/css-menubg-image.jpg) no-repeat;
width:800px;
height:300px;
text-align:center;
margin:auto;
}

在#menu中的語法意義:
padding:10px 0 0 0----使導覽選單距頂端10px
background:url(images/css-menubg-image.jpg) no-repeat----底圖不重複出現
text-align:center----使div的內容置中
margin:auto----自動調整div與邊界的距離
這裏使用的div居中的技巧,各位可要好好記住,是非常簡單的居中語法
margin:auto這個語法如果漏掉就沒有居中效果囉
此時不妨再預覽一下,整個像是部落格banner兼導覽列已經完成了


5.製作連結樣式
當然學了CSS最重要的就是修飾連結效果
#menu ul li a{
color:#000;
text-decoration:none;
}
#menu ul li a:hover{
color:#fff;
text-decoration:none;
}


連結部份就不再多說囉
其實有興趣學習的人可以嘗試變化menu的位置和樣式
作出不同的感覺喔
置下選單風格

 

創作者介紹

木笛雅設

fennser 發表在 痞客邦 PIXNET 留言(3) 人氣()


留言列表 (3)

發表留言
  • 三三
  • 謝謝你
    複製了語法修改屬性和直套在練習的網頁裡
    真方便
    也感受到CSS的威力啦!
  • 複製語法是學習CSS的開始
    很高興我的教學能對你有幫助
    繼續加油
    (我已好久沒有碰CSS了....汗)

    fennser 於 2011/01/07 09:24 回覆

  • S
  • 哈囉..
    我想請問 為什麼 我的menu 距上方都設定是0 了
    可是他還是跑不上去呢

    http://www.hhk-skin.com/about.php
  • 從你的連結網頁看不出來有甚麼異樣耶
    你指得menu是指哪裡?

    fennser 於 2011/02/13 12:12 回覆

  • 燒味鮮
  • 哈囉您好 打擾了 我想請教您 如果我的導覽列 想加入{菜單照}{食譜分享}{客人物語}{交通資訊} 這類的資訊在頁首....{類似知名部落客紫色微笑頁首的作法} 該怎麼更動呢 是不是一樣去後台打語法
    <div id="menu">

    <ul>

    <li class="menudeco"></li>

    <li><a href="#">燒味鮮菜單</a></li>

    <li class="menudeco"></li>

    <li><a href="#">燒味鮮主廚食譜</a></li>

    <li class="menudeco"></li>

    <li><a href="#">燒味鮮客人物語</a></li>

    <li class="menudeco"></li>

    <li><a href="#">名片</a></li>

    <li class="menudeco"></li>

    </ul>

    </div>

    -------------------------------------------
    接下來該怎麼讓導覽列跟其他網頁可以連再一起呢

    謝謝您耐心看完 感恩
找更多相關文章與討論
【 X 關閉 】

【痞客邦】大學生網路社群使用習慣調查

親愛的讀者,痞客邦希望能了解大學生的網路社群使用習慣,
填問卷即可抽獨家好禮喔!
(注意:關閉此視窗將不再出現)