bootstrap仿魔乐科技导航栏

bootstrap仿魔乐科技导航栏_第1张图片
以下的是代码

```
<html>
<head>
    <title>下拉列表title>
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width,initial-scale=1">
    
    <script type="text/javascript" src="js/jquery-1.11.2.min.js">script>
    
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js">script>
    
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
    
    <link rel="stylesheet" href="css/main.css">
head>
<body>
<div class="navbar " id="site-navbar"  >
<div class="container">

            <div class="navbar-header">
                <a class="navbar-brand">
                a>
            div>
<!-搜索框+搜索按钮->
            <form class="navbar-form navbar-left hidden-sm hidden-xs clearfix" role="search" action="/search">
                <div class="form-group">
                    <input type="search" class="form-control" placeholder="请输入感兴趣的课程名" name="q">
                div>
                <button type="submit" class="btn"><span class="glyphicon glyphicon-search">span>button>
            form>
    
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="/login?goto=/"> <span class="glyphicon glyphicon-user">span>登录a>li>
                <li><a href="/register?goto=/"> <span class="glyphicon glyphicon-plus">span>注册a>li>
            ul>
        div>
div>
div>



<div class="navbar  navbar-default" style="background: Orange">
    <div class="container ">
        <div class="hidden-xs">
            <ul  class="nav navbar-nav " >
                <li ><a href="index.html" class="active">首页a>li>
                <li><a href="#">李兴华3月5日面授班a>b>li>

                <li class="dropdown">
                        <a class=" dropdown-toggle" data-toggle="dropdown">
                            极限IT网校培训<b class="caret">b>
                        a>
                        <ul class="dropdown-menu">

                            <li><a href="#">极限IT-【0计划】免费参加JAVA+ORACLE+HTMLa>
                            li>
                            <li><a href="#">
                                极限IT-JAVA工程师训练营 主流技术就业课程
                            a>li>
                            <li><a href="#">
                                极限IT 互联网架构师 进阶提升薪水翻倍
                            a>li>
                            <li><a href="#">
                                JAVAEE框架实战班SSM 2017版
                            a>li>
                            <li><a href="#">
                                JAVA框架SSH班
                            a>li>
                        ul>
                li>

                <li class=" dropdown ">
                    <a href="/course/explore" class=" dropdown-toggle "   data-toggle="dropdown" >在线视频课程  <b class="caret">b>a>
                    <ul class="dropdown-menu">
                        <li><a href="#"  >互联网架构a>li>
                        <li><a href="#"  >大数据a>li>
                        <li><a href="#"  >编程语言a>li>
                        <li><a href="#"  >开源框架a>li>
                        <li><a href="/course/explore/project"  >项目案例a>li>
                        <li><a href="/course/explore/database"  >数据库a>li>
                        <li><a href="/course/explore/webui"  >前端开发a>li>
                        <li><a href="/course/explore/transmission"  >数据传输a>li>
                        <li><a href="/course/explore/os"  >操作系统a>li>
                        <li><a href="http://www.mldn.cn/course/explore/mobile"  >Android开发a>li>
                        <li><a href="http://www.mldn.cn/course/explore/os"  >Linux系统开发a>li>
                        <li><a href="http://www.mldn.cn/course/explore/tools"  >开发工具a>li>
                        <li><a href="http://www.mldn.cn/course/explore/ver"  >版本控制a>li>
                        <li><a href="http://www.mldn.cn/course/explore/Enterprise"  >EE商业体系a>li>
                    ul>
                li>
                <li><a href="#" >Java学习顺序a>li>
                <li><a href="#" >书籍a>li>
                <li><a href="#" >APP客户端a>li>
            ul>
        div>

    div>
div>
<div class="footer">
    Powered by EduSoho v8.2.11 ©2014-2018
div>
body>
html>

你可能感兴趣的:(HTML)