簡(jiǎn)單小程序：登錄頁(yè)面（html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登錄頁(yè)面</title>
    /*總體的樣式*/
    <style>
    	/*盒子樣式*/
        #box{
            width: 350px; //寬
            height: 450px; //高
            border: 1px solid black; //邊框
            border-radius: 10px; //邊框弧度
            font-family: 黑體; //字體
            letter-spacing:8px; //段間距
            word-spacing: 10px; //字間距
            line-height: 40px; //行高
            font-size: 18px; //字大小
            padding: 20px; //內(nèi)邊框
        }
        /*給'注冊(cè)'賦予樣式*/
        .register{
            width:280px ; //寬
            height: 50px; //高
            background-color: skyblue; //背景顏色
            border-radius: 10px; //邊框弧度

        }
        /*將所有邊框都改變*/
        *{
            border-radius: 5px; 邊框弧度
        }
        /*使用class選擇器，賦予number寬高和邊框*/
        .number{
            width: 185px; //寬
            height: 27px; //高
            border-width: 1px; //邊框?qū)挾?
        }
        /*id選擇器*/
        #two{
            width: 55px; //寬
            border-width: 1px; 邊框?qū)挾?        }
        /*id選擇器*/
        #phone{
            width: 103px; //寬
        }
        /*class 選擇器*/
        .boxs{
            zoom: 75%; //清除浮動(dòng)
            color: darkgray; //顏色
        }
        /*class選擇器*/
        .box_a{
            width: 50px; //寬
            height: 50px; //高
            background-image: url("../image/04.jpg "); //背景圖片
            background-repeat: no-repeat; // 是否平鋪
            background-size: 50px 25px; //背景尺寸
            position: relative; //定位 相對(duì)定位
            left: 310px; //定位后左移
            bottom: 32px; //定位后下移

        }
    </style>
</head>
<body>
<div id="box">
    <h1>請(qǐng)注冊(cè)</h1>
<p style="color: darkgray">已有帳號(hào)?<a href="https://im.qq.com/index">登錄</a></p>
<form action="" method="post">
    <label for="name">用戶名</label>
    <input type="text" placeholder="請(qǐng)輸入用戶名" id="name" class="number"> <br>
    <label for="phone">手機(jī)號(hào)</label>
    <select name="" id="two" class="number">
    <optgroup>
        <option style="" class="">+86</option>
    </optgroup>
    </select>
    <input type="text" placeholder="請(qǐng)輸入手機(jī)號(hào)" id="phone" class="number"> <br>
    <label for="mima">密?碼</label>
    <input type="password" placeholder="請(qǐng)輸入密碼" id="mima" class="number"> <br>
    <label for="mima">驗(yàn)證碼</label>
    <input type="password" placeholder="請(qǐng)輸入驗(yàn)證碼" id="is" class="number">
    <div class="box_a"></div>
    <div class="boxs">
        <input type="radio" id="" class="accept">閱讀并接受協(xié)議<br>
    </div>
    <input type="submit" value="注冊(cè)" class="register" >

    </form>
</div>


</body>
</html>
在這里插入圖片描述

有半年之久沒(méi)有更新新作品了，但這個(gè)小小領(lǐng)地我并沒(méi)有忘記，我會(huì)堅(jiān)持下去，一直在這等你，等你的每次回眸，感恩你的每次駐足，這已經(jīng)足夠成為我堅(jiān)守的動(dòng)力和理由，盡管現(xiàn)在有很多不足和不盡人意，也沒(méi)很多的時(shí)間管理，我會(huì)盡量讓它保持足夠的新鮮感，每次的作品都投入足夠的用心，否則寧愿選擇缺省，當(dāng)某些東西成為寄托之后，就不能容許隨意的成分。

謝謝大家的支持，我會(huì)盡力做好每一頁(yè)的代碼，今天和大家分享的主題是《周末の玉玲》，誰(shuí)的青春沒(méi)有一個(gè)故事，僅以此篇祭祀那些逝去的青春，珍惜當(dāng)下，畢業(yè)不是終點(diǎn)，不要再錯(cuò)過(guò)。

該主題包含一張index.html，后面預(yù)留了3頁(yè)，留給你們自己設(shè)計(jì)，因?yàn)槊總€(gè)人的青春都不一樣，html5+css3設(shè)計(jì)，支持手機(jī)端。

導(dǎo)語(yǔ)

青澀的時(shí)光，情竇初開(kāi)，那是學(xué)生時(shí)代，一個(gè)男孩心系一個(gè)女孩，每到課間休息都會(huì)在走廊上等你經(jīng)過(guò)，只為看你一眼，你的一顰一笑，都印記在心里，至今無(wú)法抹去，如今的生活常常在夢(mèng)中遇見(jiàn)你，如若歲月可以回去那一年，我能否向你表明心聲和堅(jiān)持的決心，而不是讓懊悔和思念成為了不可逆轉(zhuǎn)的結(jié)局。

主題

《周末の玉玲》

圖摘

文件目錄結(jié)構(gòu)

lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>nw百度首頁(yè)</title>

<style>

.w1, .w2, .w3, .w4, .w5, .w6 {

width: auto;

}

.bk {

border: 1px solid red;

width: auto;

}

.w1 {

height: 46px;

}

.w1_1 {

width: 463px;

height: 46px;

float: right;

}

.w1_2 img {

margin-top: 15px;

margin-left: 391px;

}

.w2 {

height: 201px;

}

.w2 img {

margin-top: 90px;

margin-left: 690px;

}

.w3 {

height: 35px;

margin-left: 480px;

}

.w3_2 img {

position: relative;

right: 36px;

top: -5px;

}

.w4 {

height: 337px;

}

.w5 {

height: 64px;

}

.w5_1, .w5_2, .w5_3, .w5_4, .w5_5 {

float: left

}

.w5_1 {

font-size: 12px;

margin-left: 480px;

width: 642px;

}

.w5_2 {

}

.w5_3 p {

width: 93px;

margin-left: 8px;

line-height: 20px;

}

.w5_4 {

}

.w5_5 {

line-height: 22px;

}

.w5_5 p {

width: 93px;

margin-left: 8px;

line-height: 20px;

}

.w5_6{line-height:19px;}

.w5_6_1 span{margin-right:11px;}

ul {

list-style-type: none;

margin: 0px;

padding: 0px;

}

li {

float: left;

margin-right: 20px;

margin-top: 24px;

font-size: 13px;

font-weight: bold;

}

a {

color: #333333

}

</style>

</head>

<ul>

</ul>

</div>

<p></p>

</div>

<input style="width:536px;height:35px;border:1px solid #ccc; position: relative;

top:-13px" type="text">

</div>

</div>

</div>

<div class="w5_6_1"> <span>把百度設(shè)為主頁(yè)</span> <span>關(guān)于百度</span> <span>About Baidu</span> <span>百度推廣</span> </div>

<div class="w5_6_2">?2016 Baidu 使用百度前必讀意見(jiàn)反饋京ICP證030173號(hào) </div><img src="images/777.jpg" alt="" style="vertical-align:middle;">

</div>

</body>

</html>

在線咨詢

上一篇：前端常用meta標(biāo)簽的作用以及全面整理
下一篇：整理關(guān)于html子頁(yè)面刷新父頁(yè)面的功能說(shuō)明

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

簡(jiǎn)單小程序：登錄頁(yè)面（html）

您的項(xiàng)目需求