需求说明

使用container、row等栅格系统的知识布局网页结构

使用表单元素制作登录页面

使用btn-success制作“搜索”按钮，用btn-danger制作“登录”按钮

运行效果

新梦想技术分享

参考代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>

    <title>全国公安机关互联网管理服务平台</title>

    <link rel="stylesheet" href="css/bootstrap.min.css"/>

    <link rel="stylesheet" href="css/myCSS.css"/>

</head>

<body>

<header>

    <div>

        <div>

            <h1><img src="image/logo.png" alt=""/></h1>

        </div>

        <div class="col-md-6 col-md-offset-2 text-right">

            <form action="#" class="form-inline head_form ">

                <input type="search" placeholder="请输入要搜索的内容"/>

                <input type="button" class="btn btn-success" value="搜索"/>

            </form>

            <ul>

                <li><a href="#">首页</a></li>

                <li><a href="#">公共查询</a></li>

                <li><a href="#">常见问题</a></li>

                <li><a href="#">政策法规</a></li>

                <li><a href="#">通知公告</a></li>

                <li><a href="#">备案须知</a></li>

                <li><a href="#">备案展厅</a></li>

            </ul>

        </div>

    </div>

</header>

<section>

    <div>

        <div>

            <div>

                <img src="image/xcy.png" style="margin-top: 20px;" alt=""/>

                <br/>

                <img src="image/liucheng.png" style="margin-top: 40px; margin-left: 80px;" alt=""/>

            </div>

            <div class="col-md-4 formMain">

                <h2>普通用户</h2>

                <form action="#">

                    <div class="form-group form-horizontal">

                        <span class="col-md-3 text-center">用户名：</span>

                        <div>

                            <input type="text"/>

                        </div>

                    </div>

                    <br/>

                    <div class="form-group form-horizontal">

                        <span class="col-md-3 text-center">密码：</span>

                        <div>

                            <input type="text"/>

                        </div>

                    </div>

                    <div style="margin-top: 30px;">

                        <div class="col-md-6 col-md-offset-3">

                            <input type="checkbox"/>

                           记住密码

                        </div>

                    </div>

                    <div class="form-group ">

                        <div class="col-md-8 col-md-offset-3">

                            <a href="#" class="btn btn-danger form-control">登录</a>

                        </div>

                    </div>

                    <div class="form-group ">

                        <div class="col-md-6 col-md-offset-3">

                            <p><a href="#">没有账号，注册</a></p>

                        </div>

                    </div>

                </form>

            </div>

        </div>

    </div>

</section>

<footer>

    <p>Copyright2015 公安部网络安全保卫局 All Rights Reserved</p>

    <p>邮箱：support@beian.gov.cn</p>

    <p> 京公网安备 11010102002019号   建议使用1024*768以上分辨率浏览</p>

</footer>

</body>

</html>

myCSS.css

body {

    font-family: "Helvetica Neue",Helvetica,Microsoft Yahei,Hiragino Sans GB,WenQuanYi Micro Hei,sans-serif!important;

}

.head_form{

    margin: 20px;

}

.active a{

    color: #da001c;

}

section{

    background: url("../image/adbg.png") 0 0 no-repeat;

    width: 100%;

    height: 385px;

}

h2{

    font-size: 16px;

}

.formMain{

    margin-top: 50px;

    background: #fff;

    border-radius: 8px;

}

.form-group{

    padding-top: 20px;

}

footer{

    background: rgba(204, 204, 204, 0.6);

    padding: 20px;

}