navbar导航栏

时间：2015-12-21 23:43:50 阅读：250 评论：0 收藏：0 [点我收藏+]

效果

技术分享

1.HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="header">
        <div class="navbar">
            <img class="navbar-left" src="assets/images/navbar_logo.png">
            <ul class="narbar-right">
                <li>
                    <a class="active" href="">Home</a>
                </li>
                <li>
                    <a class="" href="">product</a>
                </li>
                <li>
                    <a class="" href="">About</a>
                </li>
                <li>
                    <a class="" href="">JoinUs</a>
                </li>
                <li>
                    <a class="" href="">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

2.CSS

body{
    background-color: #f9f9f9;
    margin: 0;
    padding: 0;
}

#header{
    background-color: #ffffff;
    width: 100%;
    height: 52px;
    border-bottom: 1px solid #e9e9e9;
    position: fixed;
    top: 0;
    left: 0;
}

.navbar{
    margin: 4px 20px;
    display: block;
}

.navbar-left{
    float: left;
    width: 44px;
}

.narbar-right{
    float: right;
}

.navbar li{
    list-style-type: none;
    margin-left: 20px;
    display: inline-block;
}

.navbar li .active{
    color: #ff7d0a;
}

.navbar a{
    font-size: 16px;
    font-weight: 800;
    color: #636363;
    text-decoration: none;
}

.navbar a:hover{
    color: #ee7204;
}

navbar导航栏

原文：http://www.cnblogs.com/xinjiebi/p/5065186.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)