LOFTER for ipad —— 让兴趣,更有趣

点击下载 关闭
基于HTML5的移动Web应用——Bootstrap 样式案例
hnxmx2019 2023-04-23



需求说明

使用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;

}


推荐文章
评论(0)
联系我们|招贤纳士|移动客户端|风格模板|官方博客|侵权投诉 Reporting Infringements|未成年人有害信息举报 0571-89852053|涉企举报专区
网易公司版权所有 ©1997-2024  浙公网安备 33010802010186号 浙ICP备16011220号-11 增值电信业务经营许可证:浙B2-20160599
网络文化经营许可证: 浙网文[2022]1208-054号 自营经营者信息 工业和信息化部备案管理系统网站 12318全国文化市场举报网站
网信算备330108093980202220015号 网信算备330108093980204230011号
分享到
转载我的主页