H5前端開發(fā)學(xué)習(xí)筆記——0x16實(shí)戰(zhàn)：163注冊界面

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>163注冊界面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
    <style>
        /* 首先，清空默認(rèn)邊距 */

        blockquote,
        body,
        code,
        dd,
        div,
        dl,
        dt,
        fieldset,
        form,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        input,
        legend,
        li,
        ol,
        p,
        pre,
        td,
        textarea,
        th,
        ul {
            margin: 0;
            padding: 0;
        }

        /* 清空一些標(biāo)簽的默認(rèn)樣式 */

        /* 
利用body設(shè)置整個(gè)界面的文字信息
例如：文字大小 文字字體 文字顏色
*/

        a {
            text-decoration: none;
            font-size: 12px;
            color: #ccc;
        }

        .header {
            height: 80px;
            width: 960px;
            margin: 0 auto;
            box-sizing: border-box;
            padding-top: 28px;
        }

        .header .logo {
            width: 644px;
            height: 27px;
            background: url("images/glb_v2.png") no-repeat 0 0;
            float: left;
        }

        .header .logo a {
            width: 130px;
            height: 27px;
            display: inline-block;
        }

        .header .links {
            height: 27px;
            width: 200px;
            float: right;
            text-align: right;
            font-size: 12px;
            color: #ccc;
            line-height: 27px;
        }

        .header .links a {
            line-height: 27px;
        }

        .centent {
            width: 960px;
            height: 600px;
            margin: 0 auto;
        }

        .centent .top {
            width: 960px;
            height: 38px;
            background: url("images/line-center.png") repeat-x;
        }

        .centent .left {
            width: 960px;
            height: 38px;
            background: url("images/line-left.png") no-repeat left 0;
        }

        .centent .right {
            width: 960px;
            height: 38px;
            background: url("images/line-right.png") no-repeat right 0;
        }

        .centent .right h1 {
            font-family: "宋體";
            color: white;
            font-size: 12px;
            line-height: 38px;
            text-indent: 2em;
        }

        .centent .bottom {
            width: 960px;
            height: 562px;
        }

        .centent .bottom .article {
            width: 642px;
            height: 562px;
            float: left;
            padding-top: 50px;
            padding-left: 80px;
            box-sizing: border-box;
            background-color: #f9f9f9;
            border: 1px solid #ccc;
            border-top: none;
        }

        .centent .bottom .article .articleTop {
            width: 560px;
            height: 60px;
        }

        .centent .bottom .article .articleTop ul {
            width: 412px;
            height: 34px;
            list-style: none;
            line-height: 34px;
            text-align: center;
            background: url("images/tab.jpg") no-repeat 0 0;
        }

        .centent .bottom .article .articleTop ul li {
            float: left;
            width: 137px;
            height: 34px;
            line-height: 34px;
        }

        .centent .bottom .article .articleBottom {
            width: 560px;
            height: 373px;
        }

        .centent .bottom .article .articleBottom p {
            font-size: 12px;
            margin-left: 80px;
            line-height: 28px;
        }

        .centent .bottom .article .articleBottom .line {
            width: 413px;
            height: 28px;
        }

        .centent .bottom .article .articleBottom .line input {
            width: 214px;
            height: 24px;
        }

        .centent .bottom .article .articleBottom .line select {
            width: 90px;
            height: 24px;
        }

        .centent .bottom .article .articleBottom .line span {
            float: left;
            height: 28px;
            width: 60px;
            font-size: 12px;
            line-height: 28px;
            text-align: right;
        }

        .centent .bottom .article .articleBottom .line span .star {
            color: red;
            width: 0;
        }

        .centent .bottom .article .articleBottom .line div {
            float: right;
            height: 28px;
            width: 333px;
        }

        .centent .bottom .article .articleBottom .line .sp1 {
            width: 324px;
        }

        .centent .bottom .article .articleBottom .line .sp2 {
            float: left;
            /* 在企開中，想讓多個(gè)盒子頂部對(duì)齊，就讓他們浮動(dòng)起來 */
        }

        .centent .bottom .article .articleBottom .line img {
            width: 100px;
            height: 28px;
            float: left;
            margin-left: 10px;
        }

        .centent .bottom .article .articleBottom .sp3 {
            font-size: 12px;
            color: gray;
        }

        .centent .bottom .article .articleBottom input[type=submit] {
            width: 119px;
            height: 37px;
            background: url("images/glb_v2.png") no-repeat -144px -360px;
            border: none;
            font-size: 20px;
            color: white;
            margin-left: 80px;
            margin-top: 20px;
        }

        .centent .bottom .aside {
            width: 318px;
            height: 562px;
            background-color: #f5f5f5;
            float: right;
            padding-top: 105px;
            padding-left: 45px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-top: none;
        }

        .footer {
            width: 960px;
            height: 48px;
            margin: 0 auto;
        }

        .footer p {
            font-size: 12px;
            color: #ccc;
            text-align: center;
            line-height: 48px;
        }
    </style>
</head>

<body>
    <!-- 頭部 開始 -->
    <div class="header">
        <div class="logo">
            <a href="#" title="網(wǎng)易163免費(fèi)郵"></a>
            <a href="#" title="網(wǎng)易126免費(fèi)郵"></a>
            <a href="#" title="網(wǎng)頁Yeah.net免費(fèi)郵"></a>
        </div>
        <div class="links">
            <a href="#">了解更多</a>
            |
            <a href="#">反饋意見</a>
        </div>
    </div>
    <!-- 頭部 結(jié)束 -->

    <!-- 內(nèi)容 開始 -->
    <div class="centent">
        <!-- 內(nèi)容頂部 開始 -->
        <div class="top">
            <div class="left">
                <div class="right">
                    <h1>歡迎注冊無限量的網(wǎng)易郵箱！郵箱地址可以登錄使用其他網(wǎng)易旗下產(chǎn)品。</h1>
                </div>
            </div>
        </div>
        <!-- 內(nèi)容頂部 結(jié)束 -->

        <!-- 內(nèi)容底部 開始 -->
        <div class="bottom">
            <div class="article">
                <div class="articleTop">
                    <ul>
                        <li>注冊字母郵箱</li>
                        <li>注冊手機(jī)郵箱</li>
                        <li>注冊VIP郵箱</li>
                    </ul>
                </div>
                <div class="articleBottom">
                    <div class="line">
                        <span>
                            <span class="star">*</span>郵件地址</span>
                        <div>
                            <input type="text" value="建議使用手機(jī)號(hào)注冊">@
                            <select name="" id="">
                                <option value="163.com">163.com</option>
                                <option value="126.com">126.com</option>
                                <option value="lnj.net">lnj.net</option>
                            </select>
                        </div>
                    </div>
                    <p>6~18個(gè)字符，可以使用字母、數(shù)字、下劃線，需要字母開頭</p>
                    <div class="line">
                        <span>
                            <span class="star">*</span>密碼</span>
                        <div>
                            <input type="password" value="" class="sp">
                        </div>
                    </div>
                    <p>6~16個(gè)字符，區(qū)分大小寫</p>
                    <div class="line">
                        <span>
                            <span class="star">*</span>確認(rèn)密碼</span>
                        <div>
                            <input type="password" value="" class="sp1">
                        </div>
                    </div>
                    <p>請(qǐng)?jiān)俅翁顚懨艽a</p>
                    <div class="line">
                        <span>
                            <span class="star">*</span>手機(jī)號(hào)碼</span>
                        <div>
                            <input type="number" value="" class="sp1">
                        </div>
                    </div>
                    <p>忘記密碼時(shí)，可以通過手機(jī)號(hào)碼快速找回密碼</p>
                    <div class="line">
                        <span>
                            <span class="star">*</span>驗(yàn)證碼</span>
                        <div>
                            <input type="text" value="" class="sp2">

                            <img src="images/vcode.jpg" alt="">
                            </select>
                        </div>
                    </div>
                    <p>請(qǐng)?zhí)顚憟D中字符，不區(qū)分大小寫</p>
                    <p>
                        <input type="checkbox"> 同意
                        <a href="#" class="sp3">“服務(wù)條款”</a>和
                        <a href="#" class="sp3">“隱私權(quán)保護(hù)和個(gè)人信息利用政策”</a>
                    </p>
                    <input type="submit" value="立即注冊" class="sp4">
                </div>
            </div>
            <div class="aside">
                <img src="images/wy_right.jpg" alt="">
            </div>
        </div>
        <!-- 內(nèi)容底部 結(jié)束 -->
    </div>
    <!-- 內(nèi)容 結(jié)束 -->

    <!-- 尾部 開始 -->
    <div class="footer">
        <p>
            <a href="#">關(guān)于網(wǎng)易</a>
            <a href="#">關(guān)于網(wǎng)易免費(fèi)郵</a>
            <a href="#">郵箱官方博</a>
            <a href="#">客戶服務(wù)</a>
            <a href="#">隱私政策</a>
            | 網(wǎng)易公司版權(quán)所有 ? 1997-2018
        </p>
    </div>
    <!-- 尾部 結(jié)束 -->
</body>

</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容