使用HTML+CSS設(shè)計(jì)一個(gè)容易的用戶注冊(cè)頁(yè)面【示例】

那么下面我們就通過(guò)具體的HTMLcss代碼示例，詳細(xì)的給小白們介紹，用戶注冊(cè)功能界面的實(shí)現(xiàn)方法。

一段簡(jiǎn)單的用戶注冊(cè)頁(yè)面HTML代碼示例如下：

<form>
    <div style="width:500px;float:left;margin:0 20px;">
        <div style="font-size:28px;">新用戶注冊(cè)界面</div>
        <br/>
        <span class="p">*</span>
        <label for="username" class="l">用戶名:</label>
        <div style="height:35px;width:300px;position:relative;display:inline;">
            <input id="username" type="text" style="height:30px;width:250px;padding-right:50px;">
            <span style="position:absolute;right:18px;top:2px;height:16px;width:16px;display:inline-block;" ></span>
        </div>
        <br/><br/>
        <span class="c">*</span>
        <label for="login_password" class="l">登錄密碼:</label>
        <div  class="d">
            <input id="login_password" type="text" class="i">
        </div>
        <br/><br/>
        <span class="c">*</span>
        <label for="confirm_password" class="l">確認(rèn)密碼:</label>
        <div  class="d">
            <input id="confirm_password" type="text" class="i">
        </div>
        <br/><br/>
        <input type="submit" value="點(diǎn)擊注冊(cè)" style="margin-left:100px;height:30px;width:150px;background-color:#1094f2; color:#fff; display:inline-block;"/>
    </div>
</form>

style.css代碼示例如下：

.p{
    color:red;
    margin-left:20px;
    display:inline-block;
}
.c{
    color:red;
    margin-left:4px;
    display:inline-block;

}
.l{
    font-size:18px;
}
.d{
    height:35px;
    width:300px;
    display:inline;
}
.i{
    height:30px;
    width:300px;
}

上述代碼我們通過(guò)瀏覽器訪問(wèn)如下圖：

如圖所示，這就是利用HTML和css設(shè)計(jì)的一個(gè)非常簡(jiǎn)單的注冊(cè)頁(yè)面。我們通過(guò)上述代碼可以發(fā)現(xiàn)，注冊(cè)頁(yè)面的實(shí)現(xiàn)主要是利用了HTML中的form標(biāo)簽，那么這個(gè)標(biāo)簽就是用來(lái)制作表單的。而且表單中是包含好幾種元素的。比如文本字段，復(fù)選框，單選框，提交注冊(cè)按鈕等,也就是重要的input的標(biāo)簽元素！這個(gè)元素標(biāo)簽規(guī)定了用戶能在其中輸入數(shù)據(jù)的輸入字段。

還有上述代碼中出現(xiàn)的label標(biāo)簽元素。這個(gè)標(biāo)簽則是為 input 元素定義標(biāo)注也就是標(biāo)記的。其實(shí)只要掌握了form中相關(guān)元素標(biāo)簽，你就可以制作不同要求的注冊(cè)界面。比如你就可以添加郵箱注冊(cè)項(xiàng)，驗(yàn)證碼注冊(cè)項(xiàng)，住址注冊(cè)項(xiàng)等等。

然后再給對(duì)應(yīng)的元素設(shè)置css樣式屬性，就可以制作出一個(gè)簡(jiǎn)單的HTML用戶注冊(cè)頁(yè)面。

以上就是關(guān)于一個(gè)簡(jiǎn)單的HTMLcss注冊(cè)頁(yè)面功能的實(shí)現(xiàn)方法介紹。本篇文章具有一定的參考價(jià)值，希望對(duì)有需要的朋友有一定的幫助！

以上就是利用HTML+CSS設(shè)計(jì)一個(gè)簡(jiǎn)單的用戶注冊(cè)頁(yè)面【示例】的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！