CSS 導覽列

使用CSS你可以轉換成好看的導覽列而不是枯燥的HTML選單。

使用html和css製作水平導覽列

#li設定float:left;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
  <title>php.cn</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        ul{
            list-style-type:none;
            margin:100px 50px;/*margin:100px auto无效,不能使ul左右居中*/
            text-align:center;
            font-size:14px;
        }
        li{
            float:left;/*改动的地方*/
            width:80px;
            padding:10px;
            background-color:#ff9137;
        }
        a:link,a:visited,a:hover,a:active{
            color:#fff;
            text-decoration:none;
        }
        a{
            display:block;/*整体变为可点击区域，而不只是字*/
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
    </ul>
</body>
</html>

備註：

#①可對ul設定margin，但設定為margin:100px auto時無法讓ul居中
②ul所佔高度為0。
③可為li設定width，自由調整寬度。
④可為li設定margin，使li之間有空白。
⑤可為a設定display:block；使整體變成可點選區域。
⑥如果想要讓連結有相同的大小，就必須用浮動，不能用display:inline;

li設定display:inline-block;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
  <title>php.cn</title>
    <style type="text/css">
          *{
            margin:0;
            padding:0;
        }
        ul{
            list-style-type:none;
            margin:100px;
            text-align:center;
            font-size:14px;
        }
        li{
            display:inline-block;/*改动的地方*/
            width:80px;
            padding:10px;
            background-color:#ff9137;
        }
        a:link,a:visited,a:hover,a:active{
            color:#fff;
            text-decoration:none;
        }
        a{
            display:block;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
    </ul>
</body>
</html>

備註：
①對ul設定margin:100px auto；讓ul左右居中。
②即使li沒有margin，各個li之間還是會有空白。
③可對a設定display:block;使整體變成可點選區域。

使用html和css製作垂直導覽列

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
  <title>php.cn</title>
   <style type="text/css">
     body{margin:50px;}
     ul{list-style:none; margin:5px; padding:2px; width:250px; font-size: 19px;}
     li { background: #ddd url(fasfas.gif) no-repeat 10px center; margin: 0; padding: 2px 35px; border-left: 1px solid #fff; 
     border-top: 1px solid #fff; border-right: 1px solid #666; border-bottom: 1px solid #aaa;}
   </style>
<body>
<div>
  <ul>
     <li><a href="#">Drubjs Menu</a></li>
     <li><a href="#">Beer</a></li>
     <li><a href="#">Spirits</a></li>
     <li><a href="#">Cola</a></li>
     <li><a href="#">Lemonade</a></li>
     <li><a href="#">Tea</a></li>
     <li><a href="#">Coffee</a></li>
  </ul>
</div>
</body>
</html>

內聯清單：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
  <title>php.cn</title>
   <style type="text/css">
     body{margin:50px;}
        ul{list-style:none; margin:0; padding:0;}
        li{display:inline;}
   </style>
<body>
<div>
  <ul>
     <li>奇才</li>
     <li>村村</li>
     <li>天干</li>
     <li>才工</li>
     <li>雪原</li>
  </ul>
</div>
</body>
</html>

繼續學習

新建檔案

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> <style type="text/css"> body{margin:50px;} ul{list-style:none; margin:5px; padding:2px; width:250px; font-size: 19px;} li { background: #ddd url(fasfas.gif) no-repeat 10px center; margin: 0; padding: 2px 35px; border-left: 1px solid #fff; border-top: 1px solid #fff; border-right: 1px solid #666; border-bottom: 1px solid #aaa;} </style> <body> <div> <ul> <li><a href="#">Drubjs Menu</a></li> <li><a href="#">Beer</a></li> <li><a href="#">Spirits</a></li> <li><a href="#">Cola</a></li> <li><a href="#">Lemonade</a></li> <li><a href="#">Tea</a></li> <li><a href="#">Coffee</a></li> </ul> </div> </body> </html>

重置程式碼

自動運行

提交

預覽 Clear