• 在自學網頁設計路上:[2]如何制作簡單導航欄

    時間:2022-07-14 00:52:05 設計 我要投稿
    • 相關推薦

    在自學網頁設計路上:[2]如何制作簡單導航欄

    一個網頁必不可少的元素之一,導航,雖然各種創新已經逐漸把導航欄的“欄”給去掉了,以非欄架的形式制作出導航。所以,導航是一個網頁友好的入口,要學習網頁制作,制作導航欄是必須的。

    工具/原料

    DW

    調試瀏覽器

    方法/步驟

    制作導航欄的一般思想是通過無序標簽ul來實現的,由li來加入各個欄目,加入超鏈接,同時可以在其中加入ID標簽,方便下步操作。

    通過外鏈樣式表導入基本的CSS代碼,可以實現導航欄初步效果

    通過padding內補白拉開距離。在這里也可以使用margin做出距離,但是margin有時候在計算中會出現疊加現象。所以個人習慣使用padding

    然后使用偽類實現兩個效果:a、去掉超鏈接下劃線;b、鼠標經過變換顏色。應注意顏色的取值應該接近但有明暗區別。

    CSS代碼匯總(方便復制嘗試)

    #container{margin:0 auto; width:800px;}

    #nav ul{list-style:none;}

    #nav ul li{float:left;}

    #nav li a{padding:7px 10px;}

    #nav li a:link,#nav li a:visited{background-color:#393; text-decoration:none;

    color:#FFF;}

    #nav li a:hover{background-color:#360;color:#999;}

    注意事項

    以上代碼屬于基本的導航欄代碼,應該加上一些調整以適應頁面內容。

    推薦使用firebug等調試工具

    在自學網頁設計路上 (共3篇) 上一篇:如何使網頁自動居... | 下一篇:如何布局網頁主體


    [在自學網頁設計路上:[2]如何制作簡單導航欄]相關文章:

    1.大學生網頁制作實訓報告心得

    【在自學網頁設計路上:[2]如何制作簡單導航欄】相關文章:

    網頁設計制作教程《實例》207-14

    網頁制作教學設計07-28

    網頁設計與制作報告01-04

    制作網頁教學設計04-20

    網頁設計與制作心得12-12

    網頁制作教學設計10-01

    網頁制作教學設計02-25

    為什么APP導航欄的放置?07-10

    【熱】網頁設計與制作心得01-15

    黄频国产免费高清视频_富二代精品短视频在线_免费一级无码婬片aa_精品9E精品视频在线观看