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

最新推荐文章于 2024-05-17 20:00:04 发布
原创 最新推荐文章于 2024-05-17 20:00:04 发布 · 624 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#css #html #前端
本文介绍如何利用HTML5和Bootstrap构建全国公安机关互联网管理服务平台的登录页面。内容包括利用container、row等栅格系统布局，使用表单元素和btn类创建登录与搜索功能，以及展示最终的运行效果。


需求说明
使用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>

Meryoufdd
关注
Bootstrap登录注册表单特效代码
03-20
Bootstrap登录注册表单代码是一款基于html5 css3 bootstrap创建的响应式登录注册页面模板。
公安网站源代码
10-07
一个不错的公安网站源代码，下载可以学习一下
网站底部添加公安备案HTML代码
热门推荐
佛系豪豪
01-12 1万+
参考HTML代码： <div style="width:300px;margin:0 auto; padding:20px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=41102402000277" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;
毕业季，作为程序员（it软件开发工程师），如何培养强大的解决问题的能力
南北极之间
08-12 2226
例如，如果一个孩子试图弄清楚如何打开一个玩具盒，他或她可能会尝试各种方法（例如，拉，推，举），直到找到正确的方法。良好的解决问题的能力包括能够创造性地和分析性地思考，将问题分解成更小的部分，并使用系统的方法找到解决方案。递归涉及将问题分解为较小的子问题，解决每个子问题，然后将子问题的解决方案组合在一起以解决更大的问题。另一个常见的例子是使用算法，例如快速排序算法，它将问题分解成更小的部分，解决每个部分，然后将解决方案组合到各个部分以解决更大的问题。如果你想成功，你需要有很强的解决问题的能力。........
【Bootstrap】使用Bootstrap制作简单的登陆页面
Alan的博客
03-23 9889
效果图: 代码: <div class="container"> <div class="col-md-4"></div> <div class="col-md-4" style="background-color:#eee;;margin-top:200px;"> <center> ...
制作表单练习
qq_46178261的博客
02-14 1146
制作如图所示表单 1.完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti...
上级练习3--制作全国公安机关互联网管理服务平台
天元白手的博客
04-18 3832
练习的架构： Boostrap的css样式代码需要自己下载，并且引入到项目里面 css样式页面： body { font-family: "Helvetica Neue",Helvetica,Microsoft Yahei,Hiragino Sans GB,WenQuanYi Micro Hei,sans-serif!important; } .head_form{ mar...
el-table 列鼠标悬停显示内容
sophialise的博客
03-25 6968
效果 代码
前端使用bootstrap实现一个简单的小案例，重点是关注响应式布局
qq_43064077的博客
11-24 5614
1.案例的效果展示 我们使用的是响应式布局，所谓的响应式布局就是可以使得同一套页面可以兼容不同分辨率的设备。可以看到苹果的官网当你将浏览器的串口放的很小的时候网站的布局也会随这页面大小发生变化，当我们在手机或者pad上面去访问网站的时候还是会有一个不错的体验的。 当浏览器的页面变小以后首先可以看到的就是，导航栏进行了折叠，还有就是这些图片也还是可以完全显示出来的，这就是响应式布局一个明显的效果 2 主要的知识点 之前我做这个网页的时候使用的是table里面嵌套table，虽然可以实现效果但是，没有使用
bootstrap响应式栅格布局
qq_55299191的博客
06-04 900
需求说明： 1.使用container、row等栅格系统的知识布局一个响应式的网页，需要适配中等屏幕、小屏幕、超小屏幕 2.对于“2000+全球师资 100%欧美外教”等部分的字体大小颜色需要自己写CSS样式 3.页面上的图片部分可以作为背景图片引入进来
公安网站源码
08-04
派出所网站源码,公安网站源码,适合于县乡镇派出所内部信息发布使用，
前端 代码 登录页面
weixin_65459869的博客
07-12 546
邮箱：
bootstrap html5登录界面,基于Bootstrap的时尚登录界面设计
weixin_36289211的博客
06-05 1769
这是一款基于bootstrap的时尚登录界面设计效果。该登录界面使用了bootstrap的表单元素，整个设计简洁时尚，值得推荐。使用方法在页面中引入bootstrap.min.css文件。HTML结构该登录界面的HTML结构如下：登录 记住我CSS样式该登录界面的主要CSS样式如下：body {background:url(../images/login_bg_0.jpg) #f8f6e9 0 0...
html 栅格表单,bootstrap-栅格布局系统-表单-组件
weixin_29119475的博客
06-26 1081
一. bootstrap-全局css样式-栅格布局系统-重点难点1. 所有的行必须放在容器中.container或container-fluidcontainerscreen>1200px(超大PC显示器-lg) 容器宽1170pxscreen>992px(普通PC显示器-md) 容器宽970pxscreen>768px(平板显示器-sm) 容器宽750pxscre...
四十五、使用bootstrap制作导航条
付之一笑的专栏
01-06 2727
使用bootstrap制作导航条 参考链接：https://v3.bootcss.com/components/#navbar 项目结构 工具使用： Bootstrap Button Generator 通过Bootstrap Button Generator，你只需输入你想指定给新按钮的样式的CSS类，并简单调整图标的颜色，即可获得新的图标，然后复制代码，粘贴在任意你想要的地方即可。 最终效果 中等屏幕 桌面显示器 (≥992px) 、大屏幕 大桌面显示器 (≥1200px)： 桌面显示器 (&lt
bootstrap 详细教程笔记
呵呵哒!的博客
04-07 2522
BootStrap 1.主要内容 2.BootStrap的安装和使用 2.1. BootStrap介绍 中文网:https://www.bootcss.com/ BootStrap是一套现成的CSS样式集合（做的还是很友好的），是两个推特的员工干出来的。BootStrap是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目。 2011年，twitter的"一小撮"工程师为了提高他们内部的分析和管理能力，用业余时间为他们的产品构建了一套易用、优雅、灵活、可
前端--bootstrap(v3)课上笔记+作业
qq_56508310的博客
03-09 1226
第一次课–Boostrap v3 一、Boostrap的文件基本引入 1.在head标签中引入 boostrap的css文件 2.在body的最后引入Jquery文件和Boostrap的js文件 来加载其所有的插件，两者顺序不可颠倒，Jquery引入在前（因为Bootstrap 的所有 JavaScript 插件都依赖 jQuery） 二、导航栏 ...
公安大数据 python公安警情数据可视化分析大屏 公安分析系统 公安数据 可视化 Flask框架 计算机毕业设计（源码）✅
q_3375686806的博客
05-17 1738
公安大数据 python公安警情数据可视化分析大屏 公安分析系统 公安数据 可视化 Flask框架 计算机毕业设计（源码）✅
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值