基於HTML5的移動Web應用

新夢想IT發表於2023-04-23
HTMLWeb




需求說明

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

}


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69940641/viewspace-2947890/，如需轉載，請註明出處，否則將追究法律責任。

相關文章