30の前端部:シーナナビゲーションを模倣します

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            height: 1500px;
        }
        .navigation{
            border-top:3px solid #FF8500;
            border-bottom: 1px solid #EDEEF0;
            height:41px;
            background-color: #FCFCFC;
        }

        a{
            color:#4C4C4C;
            text-decoration: none;
            height: 41px;
            display: inline-block;
            padding: 0 15px;
            line-height: 41px;
            font-size: 12px;
        }

        a:hover{
            color:#FF8500;
            background-color: #EDEEF0;
        }

        .banxin{
            width: 1000px;
            height: 41px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="navigation">
        <div class="banxin">
             <a href="#">设为首页</a>
            <a href="#">手机新浪网</a>
            <a href="#">移动客户端</a>
        </div>
        
    </div>
</body>
</html>

 

概要:この模造HTML、ラベルの使用は、擬似クラスラベルを置きます。divタグ。

            これは、2個のdivタグを使用しています。前記幅クラス=「banxin」divタグは、一般的に1000pxに設定されています。

            この例では、花火のツールを使用するように、このツールは非常に強力です。

          

            

おすすめ

転載: blog.csdn.net/m0_37564426/article/details/91491618