SOURCE

 <nav>
        <ul>
          <li><a href="#" title="首页" target="_blank">首页</a></li>
          <li><a href="#" title="下载" target="_blank">下载</a></li>
          <li><a href="#" title="论坛" target="_blank">论坛</a></li>
          <li><a href="#" title="APP" target="_blank">APP</a></li>
          <li><a href="#" title="直播" target="_blank">直播</a></li>
          <li><a href="#" title="VIP会员" target="_blank">VIP会员</a></li>
        </ul>
        <div class="anniu">
            <input type="text" placeholder="请输入您要搜收的内容...." size="25">
            <button type="submit">搜索</button>
        </div>
      </nav>
      <div class="article-title-boc">
            <h1>使用bootstrap搭建后台管理系统页面《二》</h1>
      </div>
      <div class="article-info-box">
            <h2>1.使用bootstrap搭建后台管理系统页面《二》</h2>
            这次不需要另外写css。直接完全引用bootstrap下的样式。
            <br>完成以后的效果：
            <img src="https://img-blog.csdn.net/20180324131223877?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUQmlnR29k/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" width="100%" height="300px">
            <p>源代码：</p>
            <div class="box">
               <pre class="prettyprint">
                   <code class="numbering" style="position: unset;">
                    <code class="prism language-html has-numbering" style="position: unset;" onclick="mdcp.signin(event)">&lt;%@ page language="java" contentType="text/html; charset=utf-8"
                        <%@ page language="java" contentType="text/html; charset=utf-8"
                            pageEncoding="utf-8"%>
                        <%
                            String path = request.getContextPath();
                        %> 
                   </code>
                <span class="token doctype" style="color: blue;">
                    < !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
                </span>
                <span class="token tag">
                    < html>
                </span>
                <span class="token tag">
                    < head>
                </span>
                
                
               </pre> 

            </div>
        </div>

 nav{
            float: left;
            width:100%;
            height:40px;
            background-color: rgb(115, 243, 164);
        }
        nav ul {
            float:left;
            margin: 0px;
            width: 920px;
            list-style: none;
        }
        nav ul li {
            display: inline;
        }
        nav ul li a {
            float: left;
            padding: 11px 30px; 
            font-size: 17px;
            text-align: center;
            text-decoration: none;
            color: #fff;    
            font-family: Tahoma;
            outline: none;
        }
        nav li a:hover {
            color: #2a5f00;
        }
       input{
            height: 20px;
            margin-top: 10px;
        }
        .prettyprint{
           
            width: 100%;
            height: 800px;
            display: block;
            font-size: 15px;
            font-weight: bolder;
            color: rgb(240, 87, 87);
           margin-bottom: -10px;
        }