用html語(yǔ)法寫(xiě)QQ郵箱登錄頁(yè)面

任務(wù)要求：

寫(xiě)?個(gè)簡(jiǎn)易的QQ郵箱登錄??（這個(gè)簡(jiǎn)易是個(gè)什么程度??看著來(lái)），要?上JavaScript

首先我們先看看網(wǎng)頁(yè)前端開(kāi)發(fā)需要用到什么

  • HTML
  • CSS
  • JavaScript
    其實(shí)前兩天雙十一我買(mǎi)了本書(shū) 《從0到1HTML+CSS+JavaScript》 這本書(shū)真心不錯(cuò)，至少這周的學(xué)習(xí)任務(wù)這本書(shū)對(duì)我?guī)椭艽蟆?/li>

先看看QQ郵箱登錄頁(yè)面長(zhǎng)什么樣？


目標(biāo).png

有些難點(diǎn)，登錄頁(yè)面應(yīng)該分成四個(gè)部分，頂部一排，中間的文字和表單，最后下方的一排超鏈接.......
頂部和底部我就先不寫(xiě)了，之后補(bǔ)充。
但是任務(wù)目標(biāo)擺在那里，我仍是技術(shù)有限就決定分幾步寫(xiě)這個(gè)網(wǎng)頁(yè)

第一步寫(xiě)出登錄的表單
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>QQ Eamil</title>
<style type="text/css"></style>
</head>
<body>
<span class="login">微信登錄</span>
&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
<span class="pas">QQ登錄</span>
<input type="text" placeholder="支持QQ號(hào)/郵箱/手機(jī)號(hào)登錄"/><br />
<input type="text"  placeholder="QQ密碼"  /><br/>
<input type="checkbox" "/>
<span ="tnext">下次自動(dòng)登錄</span></br>
<input type="button" value="登&nbsp;&nbsp;&nbsp;錄" >
<span>忘了密碼？</span>
<span>注冊(cè)新賬戶(hù)</span>
</body>
</html>

表單預(yù)覽結(jié)果如下：


image.png

制作表單時(shí)使用指令

  • <meta charset="utf-8" />編程系統(tǒng)自動(dòng)輸出的，但是必須要有，不然就是一堆亂碼。
  • placeholder 屬性提供可描述輸入字段預(yù)期值的提示信息（hint）。該提示會(huì)在輸入字段為空時(shí)顯示，并會(huì)在字段獲得焦點(diǎn)時(shí)消失。
  • value屬性其實(shí)可以做到和placeholder屬性相似的操作但是value屬性顯示的預(yù)填文本是無(wú)法在輸入字后自動(dòng)消失的故使用placeholder

........與目標(biāo)差距較大，下一步寫(xiě)左側(cè)文本

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <h1>QQ郵箱，常聯(lián)系！</h1>       
        <p>1987年9月14日21時(shí)07分</p>
        <p>中國(guó)第一封電子郵件</p>
        <p>從北京發(fā)往德國(guó)</p>
        <p>“越過(guò)長(zhǎng)城，走向世界”</p>
    </body>
</html>

沒(méi)什么好說(shuō)的，但是這個(gè)效果還是不行，，，


image.png

下一步就是通過(guò)頁(yè)面布局把左右側(cè)分開(kāi)，讓網(wǎng)頁(yè)初步成型。

  • 在網(wǎng)上參閱一些材料后，前人的經(jīng)驗(yàn)告訴我們，可以用CSS語(yǔ)法來(lái)寫(xiě)這個(gè)分頁(yè)和修飾
    使用函數(shù)如下
  • <style type="text/css">，調(diào)用css進(jìn)行修飾所必須的，放在head里面1
  • Border 在一個(gè)聲明中聲明所有文字的格式
  • padding函數(shù)定義內(nèi)邊距
也通過(guò)使用下面四個(gè)單獨(dú)的屬性，分別設(shè)置上、右、下、左內(nèi)邊距：
padding-top，padding-right，padding-bottom，padding-left
  • float 規(guī)定框是否應(yīng)該浮動(dòng)

最后成型的代碼

<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <title>登錄qq郵箱</title>
    <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        body{
            font-size:12px;
        }
        .content{
            width:1100px;
            height:500px;
            margin:auto;
            margin-top:80px;
        }
         .content .text{
            float:left;
            margin-top:40px;
            margin-left:70px;
            line-height: 200%;
        }
        .content .text h1{
            color:#1d5494;
            margin-bottom:20px;
        }
        .content .text p{
            font-size:13px;
        }        .content .pic{
            float:left;
            margin-top:25px;
            margin-right:60px;
        }
        .content .login{
            float:left;
            width:350px;
            height:400px;
            border:1px solid #1d5494;
        }
        .content .login .sidebar{
            border-bottom:1px solid #1d5494;
            height:50px;
            line-height: 50px;
        }
        .content .login ul li{
            list-style-type: none;
            display:block;
            height:50px;
            font-size:16px;
            font-family: "微軟雅黑";
            color:gray;
        }
        .content .login ul .tab1{
            float:left;
            margin-left:45px;
            cursor: pointer;
        }
        .content .login ul .tab2{
            float:right;
            margin-right:45px;
            cursor: pointer;
        }
        .content .login .acount{
            margin-top:40px;
            margin-left:27px;
            width:280px;
            height:35px;
            font-family: "微軟雅黑";
        }
        .content .login .password{
            margin-top:15px;
            margin-left:27px;
            width:280px;
            height:35px;
            font-family: "微軟雅黑";
        }
        .content .login .checkbox{
            float:left;
            margin-top:30px;
            margin-left:30px;
            width:20px;
            height:20px;
            border:1px solid black;
            background:white;
        }
        .content .login p{
            margin-top:30px;
            float:left;
        }
        .content .login .submit{
            margin-left:27px;
            margin-top:10px;
            width:280px;
            height:40px;
            background:cornflowerblue;
            border:1px solid cornflowerblue;
            font-size:16px;
            color:white;
            font-family:"微軟雅黑";
            cursor: pointer;    
        }
        .content .login .code{
            margin-top:10px;
            margin-left:130px;
            color:#1d5494;
            cursor: pointer;
            font-size:13px;
        }
        .content .login .forget{
            float:left;
            margin-top:80px;
            margin-left:30px;
        }
        .content .login .new{
            float:right;
            margin-top:80px;
            margin-right:30px;
        }
        .content .login a{
            color:#1d5494;
            text-decoration: none;
        }
        .content .login a:hover{
            text-decoration: underline;
        }    </style>
    <body>
        <div class="content">
            <div class="text">
                <h1>QQ郵箱，常聯(lián)系！</h1>
                <p>1987年9月14日21時(shí)07分</p>
                <p>中國(guó)第一封電子郵件</p>
                <p>從北京發(fā)往德國(guó)</p>
                <p>“越過(guò)長(zhǎng)城，走向世界”</p>
                <img src="C:\Users\888888\Desktop\1.png">
            </div>
            <div class="pic">
            </div>
            <div class="login">
                <ul class="sidebar">
                    <li class="tab1">微信登錄</li>
                    <li class="tab2">QQ登陸</li>
                </ul>
                <input type="text" value="支持QQ號(hào)/郵箱/手機(jī)號(hào)登錄" class="acount" /><br>
                <input type="password" placeholder="&nbsp;&nbsp;QQ密碼" class="password" /><br>
                <input type="checkbox" class="checkbox" />
                <p>下次自動(dòng)登錄</p><br>
                <input type="submit" value="登&nbsp;錄" class="submit">
                <nav>
                    <a href="#" class="forget">忘了密碼？</a>
                    <a href="#" class="new">注冊(cè)新賬號(hào)</a>
                </nav>
            </div>
        </div>
    </body>
</html>
QQ截圖20201117002401.png

還是有很多問(wèn)題比如頁(yè)眉頁(yè)腳完全沒(méi)有，圖片的位置也錯(cuò)了。但是終于完工了。

11月20日網(wǎng)頁(yè)制作補(bǔ)充

最后編輯于 ：
?著作權(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)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

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

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