基于HTML5的移动Web应用——Bootstrap 样式案例：制作全国公安机关互联网管理服务平台登录页面

最新推荐文章于 2023-06-04 18:49:59 发布

sem00000

最新推荐文章于 2023-06-04 18:49:59 发布

阅读量6.5k

点赞数 12

分类专栏：移动WEB开发前端文章标签： html5 bootstrap 前端

本文链接：https://blog.csdn.net/sem00000/article/details/105801853

版权

前端同时被 2 个专栏收录

16 篇文章 5 订阅

订阅专栏

移动WEB开发

14 篇文章 0 订阅

订阅专栏

需求说明

使用container、row等栅格系统的知识布局网页结构
使用表单元素制作登录页面
使用btn-success制作“搜索”按钮，用btn-danger制作“登录”按钮

运行效果
在这里插入图片描述
参考代码


<!DOCTYPE html>
<html>
<head lang="en">
    <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 class="container">
        <div class="col-md-4">
            <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" class="form-control" placeholder="请输入要搜索的内容"/>
                <input type="button" class="btn btn-success" value="搜索"/>
            </form>
            <ul class="list-inline">
                <li class="active"><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 class="container">
        <div class="row">
            <div class="col-md-8">
                <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 class="col-md-9">
                            <input type="text" class="form-control"/>
                        </div>
                    </div>
                    <br/>
                    <div class="form-group form-horizontal">
                        <span class="col-md-3 text-center">密码：</span>
                        <div class="col-md-9">
                            <input type="text" class="form-control"/>
                        </div>
                    </div>
                    <div class="form-group" 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 class="text-center">
    <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;
}

超全面的测试IT技术课程，0元立即加入学习！有需要的朋友戳：

腾讯课堂测试技术学习地址

欢迎转载，但未经作者同意请保留此段声明，并在文章页面明显位置给出原文链接。

sem00000

关注

12
点赞
踩
52

收藏

觉得还不错? 一键收藏
3
评论
基于HTML5的移动Web应用——Bootstrap 样式案例：制作全国公安机关互联网管理服务平台登录页面

需求说明使用container、row等栅格系统的知识布局网页结构使用表单元素制作登录页面使用btn-success制作“搜索”按钮，用btn-danger制作“登录”按钮运行效果参考代码<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> &...
复制链接

扫一扫