前端三十:模仿新浪的导航

<!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中,用到了a标签,hover伪类标签。div标签。

            用到了两个div标签。其中class="banxin"的div标签一般设置的width都为1000px.

            这个实例中,要用到fireworks工具,这个工具功能很强大。

          

            

猜你喜欢

转载自blog.csdn.net/m0_37564426/article/details/91491618