CSSナビゲーションバー

CSS を使用すると、退屈な HTML メニューの代わりに美しいナビゲーション バーに変換できます。

htmlとcssを使って水平ナビゲーションバーを作成します

li set float:left; margin: 100px autoの場合、ulは中央に配置できません②ulが占める高さは0です。 ③ リの幅を設定でき、幅を自由に調整できます。 ④liの間にスペースができるように、liにマージンを設定できます。

⑤display:blockを設定すると、エリア全体がクリック可能なエリアになります。

⑥リンクを同じサイズにしたい場合は、display:inline;ではなくfloatを使用する必要があります

li set 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 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マージンを設定します: 100px auto; ul を左右の中央に配置できます。
② li にマージンがない場合でも、各 li の間にスペースが残ります。

③ aにdisplay:blockを設定すると、エリア全体をクリック可能になります。

HTMLとCSSを使用して垂直ナビゲーションバーを作成します

<!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>



インラインリスト:

学び続ける
||
<!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>
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!