利用
  • 製作直式的Menu選單
  • 利用CSS製作選單通常都是利用
  • 來製作,作法上幾呼都是大同小異,這裡要注意的是瀏覽器的相容性,由於IE與FF對於區塊間隙的解譯不同,在設定屬性使一定要多注意。

    這裡,以巧雲製作的網頁作一說明:


    HTML:



    CSS:

    #menu {
    font-family: Arial, Helvetica, sans-serif, "新細明體";
    font-size: 15px;
    width: 201px;
    text-align: left;
    margin: 0px;
    padding: 0px;
    }
    #menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    #menu li {
    padding: 0px;
    height: 38px;
    margin: 0 0 3px 0;
    }

    #menu .level_1 a {
    background-image: url(images/menu_bg.gif);
    background-repeat: no-repeat;
    height: 38px;
    width: 201px;
    padding-left: 20px;
    padding-top: 10px;
    text-align: left;
    display: block;
    }
    #menu .level_1 a:link ,#menu .level_1 a:visited {
    color: #075694;
    text-decoration: none;
    }
    #menu .level_1 a:hover ,#menu .level_1 a:active {
    color: #000000;
    text-decoration: underline;
    }
    #menu .level_3 a {
    background-image: url(images/menu_top.gif);
    background-repeat: no-repeat;
    height: 36px;
    width: 201px;
    color: #075694;
    padding-top: 10px;
    padding-left: 20px;
    text-decoration: none;
    display: block;
    font-weight: bold;
    padding-right: 0px;
    padding-bottom: 0px;
    margin: 0;
    }
    #menu .level_2 {
    font-size: 12px;
    color: #075694;
    text-decoration: none;
    height: 24px;
    font-weight: normal;
    background-repeat: repeat-y;
    background-image: url(images/menu_nc.gif);
    margin: 0;
    padding: 0px;
    vertical-align: middle;
    }
    #menu .level_2 a {
    color: #075694;
    text-decoration: none;
    font-weight: normal;
    padding: 5px 0 0 40px;
    background-image: url(images/menu_nc.gif);
    background-repeat: repeat-y;
    height: 24px;
    display: block;
    margin-top:-5px!important; margin-top:-1px; margin-top:-5px!important; margin-top:-1px; /*-5px!important;主要是針對firefox的設定*/
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    }
    #menu .level_2 a:hover {
    color: #000000;
    height: 24px;
    font-weight: normal;
    background-image: url(images/menu_c.gif);
    background-repeat: no-repeat;
    display: block;
    padding: 5px 0 0 40px;
    margin:-1px 0 0 0;
    }
    #menu .level_2bg {
    font-size: 12px;
    color: #FFFFFF;
    text-decoration: none;
    padding-top: 5px;
    padding-left: 40px;
    background-repeat: no-repeat;
    height: 23px;
    background-image: url(images/menu_c.gif);
    display: block;
    padding-bottom: 0px;
    padding-right: 0px;
    margin: -5px 0 0 0;
    }
    #menu .leve2_bg {
    height: 17px;
    vertical-align: bottom;
    background-image: url(images/menu_down.gif);
    background-repeat: no-repeat;
    background-position: bottom;
    margin: -12px 0 3px 0;
    padding: 0px;
    }
  • 張貼留言

    這個網誌中的熱門文章

    互補色與對比色解惑

    [讀書心得] 設計思維 Design Thinking

    龍岡手繪地圖製作有感