前端导航条

作者: _Clown_ | 来源:发表于2018-10-31 10:31 被阅读0次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航条</title>
    <style type="text/css"> 
        *{margin:0 auto; 
            list-style: none;
            text-decoration: none;
        }
        .box{
            width:960px;
            height:40px;
            background-color:#50a7ee;
            margin-top:50px;
        }
        .nav{ line-height: 40px;
            margin-left:32px; 
            margin:0; 
            padding:0; 
            text-align: center;
        }
        img{
            position:absolute;
            left:725px;
            top:40px;
        }
        a{font:14px 微软雅黑; 
            display: block; 
            color:#fff; 
            float:left;
            width:100px;
            padding-top: 9px;
            height:31px; 
        } 
        .box a:hover{
            background-color: #00619f;
        }
    </style>
</head>
<body>
    <div class = "box">
        <div class = "nav">
            <a href = "#">首页</a> 
            <a href = "#">网站建设</a> 
            <a href = "#">程序开发</a>
            <a href = "#">网络营销</a> 
            <a href = "#">企业VI</a> 
                <img src="img/www.jpg">
            <a href = "#">案例展示</a>
            <a href = "#">联系我们</a>
        </div>
    </div>   
</body>
</html>

image.png