分享

【筆記】 純CSS導覽列 - 直行

純CSS導覽列從這邊看來的,正在學習中<(_ _)>
稍微修改了一部分,不過縮寫還不是很熟等等去試看看 (巴頭)
http://swf.com.tw/?p=16
另一篇參考用:
LINK < 對岸網站注意
LINK < 對岸網站注意 (應該是改a:hover的顯示,還沒看完)
網頁        
//id 一個網頁只能夠有一個,class可以有多個。
  • 項目一
  • 項目二
使用
  • 這東西包起來=w=
    說真的想出來的人好聰明,到現在還用不熟的我好笨...      
    CSS           
    #navi{width:100%;} //設定寬度,我喜歡用%,用像素真的好討厭 :o
    #navi ul li {  
    width:100%;
    text-align:center;
    list-style-type:none; // 讓項目符號前面的.消失,如果要用圖片取代項目符號也要用他
    background-color:#3471B0;
    }
    #navi ul li a:link, a:visited, a:active {
    color:#FFF;
    text-decoration:none;
    }
    #navi ul li a:hover {
    color:#000;  //滑鼠經過的時候,文字顏色與背景顏色改變。
    text-decoration:none;
    background-color:#AFB8E0;  
    }
    #navi ul li a {
    display:block; //讓有背景色採的地方由文字範圍擴展到整個block。
    padding:5px; //將整個block變大 :D < padding無能研究中 Orz
    }
    #navi ul li{
    border-bottom:#CCC solid 3px;
    margin-right:3px; //這是美化用的陰影w 把陰影指定在下,3像素 OAO?
    }  
    /*加入以下這串會變成橫的*/
    #navi ul li{
    width:20%;
    text-align:center;
    list-style-type:none;
    background-color:#FF9900;
    float:left; /* 讓各個清單元素靠左對齊 */  border-bottom:#CCCCCC solid 3px;
    margin-right:1px;/* 右邊留白1像素 */
    }  
     * 紅色是不懂部份。
     * padding 跟 margin大人的解釋:HERE        
分類:學習

偶爾畫畫寫文看看動畫。Plurk:https://www.plurk.com/ChantMoon

評論
上一篇
  • 下一篇
  • 更多文章
    載入中... 沒有更多了