本文主要講述HTML常用例項，如需HTML和CSS基礎請到菜鳥教程自己補習。

bootstrap響應式導航條，需要自行引入BootStrap相關檔案。

效果如圖

html

<div class="mx-nav container-fluid">
    <nav class="navbar navbar-default" role="navigation" id="navbar">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse" id="btn">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#" id="logo"></a>
        </div>
        <div class="collapse navbar-collapse navbar-ex1-collapse" id="nav-right">
            <ul class="nav navbar-nav navbar-right" id="mx-navigation">
                <li class="select"><a href="javascript:void(0)">首頁</a></li>
                <li><a href="javascript:void(0)">關於公司</a></li>
                <li><a href="javascript:void(0)">產品展示</a></li>
                <li><a href="javascript:void(0)">招商加盟</a></li>
                <li><a href="javascript:void(0)">聯絡我們</a></li>               
            </ul>
        </div>
    </nav>
</div>
 

css

.mx-nav {
    width: 80%;
    margin: 0 auto;
}
#logo {
    display: inline-block;
    width: 241px;
    height: 80px;
}
#navbar {
    padding: 0;
    margin: 0;
    background-color: #fff;
}
.navbar-header>a {
    display: inline-block;
    width: 241px;
    height: 80px;
    background: url("../images/logo0.png") no-repeat center center;
}
.select {
    border-bottom: 2px solid #2dae36;
}
#nav-right a {
    padding-top: 30px;
    padding-bottom: 30px;
    border-bottom: 2px solid rgba(0, 0, 0, 0);
}
.mx-nav .navbar-default .navbar-toggle .icon-bar {
    background-color: #2dae36;
}
.mx-nav .navbar-default .navbar-toggle {
    border-color: #2dae36;
    margin: 23px auto;
}
.mx-nav .navbar {
    border: none;
}
 

Web全棧技術交流