【大前端】用html與css寫一個QQ郵箱登錄頁面-有解無憂

一、HTML代碼如下：

命名為：QQ郵箱頁面.html

<!DOCTYPE html>
<html>
<head>
<style type="text/css"> @import"./QQ郵箱頁面.css";</style> <!--引入“QQ郵箱頁面.css”-->
</head>

<body>
    <!--  ------------------------------------      header/頂部    ------------------------------------------>
    <div class="header">
        <a href=""><img src="./左上圖1.jpeg"></a>
        <nav>  <!--<nav> 元素作為標注一個導航鏈接的區域，-->
            <a href="">基本版</a> |  
            <a href="">English</a> | 
            <a href="">手機版</a> | 
            <a href="">企業郵箱</a>
        </nav>
    </div>
        
    <!--  ------------------------------------      central/中部    ------------------------------------------>
    <div class="central">
        <div class="word"><!--中部左文字-->
            <h1>QQ郵箱，常聯系！</h1>
            <p>2500年前，人們飛鴿傳書</p>
            <p>185年前，莫爾斯發明了電報</p>
            <p>52年前，第一封電子郵件發出</p>
            <p>今天，QQ郵箱聯系你、我、他</p>
        </div>

        <img src="./中間圖1.jpeg"  /><!--中部中圖片-->
        
        <div class="logon"><!--中部右登錄框-->
            <div class="firstpart">
                <ul>
                    <li class="wx">微信登錄</li>
                    <li class="qq">QQ登錄</li>
                </ul>    
            </div>
            <input type="account" placeholder="支持QQ號/郵箱/手機號登錄"/>  <!--placeholder:占位符，顯示在待輸入框中-->
            <input type="password" placeholder="QQ密碼"/>
            <input type="checkbox" class="checkbox" /> <!--設定“下次自動登錄左邊按鈕”-->
            <p>下次自動登錄</p>
            <input type="button" class="button" value="登&nbsp;錄" />
            <a href=""><img src="./二維碼圖.jpeg" /></a>
            <div class="codeword">
                <a href="">掃碼快捷登錄</a>
            </div>
            <a href="" class="FogretPassword">忘了密碼？</a>
            <a href="" class="NewAccount">注冊新賬號</a>
        </div>
    </div>

        
    <!--  ------------------------------------      footer/底部    ------------------------------------------>
    <div class="footer">
        <nav>
            <a href="">關于騰訊</a> | 
            <a href="">服務條款</a> |
            <a href="">隱私政策</a> |
            <a href="">客服中心</a> |
            <a href="">聯系我們</a> | 
            <a href="">幫助中心</a> | 
            ?1998 - 2021 Tencent Inc. All Rights Reserved.
        </nav>
    </div>

</body>

</html>

二、CSS代碼如下：

命名為：QQ郵箱頁面.css

* {/*全域設定*/
    margin: 0; /*外邊距*/
    padding: 0;/*內邊距*/
}

body {
    font-size: 20px;/*文本大小*/
}

/*----------------------------------------------header----------------------------------------------*/
.header{/*頂部設定*/
    height:70px;
    width: 100%;
    background: #eff4fa;
}

.header img{/*頂部圖片設定*/
    height: 50px;
    width:210px;
    margin-left:20px;
    margin-top: 10px;
}

.header nav{
    font-size:1px;
    color:darkgray;
    margin-top:-35px;
    margin-right: 50px;
    text-align: right;
}

.header nav a{
    color:blue;
    text-decoration: none;
}

.header nav a:hover{/*滑鼠懸停在a時*/
    text-decoration: underline;/*顯示下劃線*/
}

/*----------------------------------------------central----------------------------------------------*/
.central{/*中部設定*/
    background-color:white;
    height: 600px;
    width: 1000px;
    margin:auto;
    margin-top:100px; /*邊框頂部*/
}

.central .word{
    float:left;    /*左浮動*/
    margin-left:50px;
    margin-top: 30px;
}

.central .word h1{
    font-size:25px;
    color:blue;
    margin-bottom:15px;
}

.central .word p{
    font-size:15px;
    line-height: 25px;/*設定行間距*/
}

.central img{
    float:left; /*左浮動，該浮動元素會盡量向左，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止，*/
    height: 350px;
    width: 310px;
    margin-top: 20px;
    margin-right:60px;
}

.central .logon{/*設定登錄邊框*/
    float:left;
    margin-top:15px;
    width:320px;
    height:350px;
    border-style: solid;/*設定邊框為實線*/
    border-radius: 5px;
    border-width:1px; 
    border-color:gray;
}

.central .logon .firstpart{/*設定內橫線分欄*/
    border-bottom-width: 1px;
    border-bottom-style:solid;
    border-bottom-color:gray;
    height:50px;
    line-height: 50px;
}

.central .logon ul li{/*設定串列*/
    list-style-type: none;/*對串列元素進行初始化*/
    font-size: 15px;
    display: block;/*設定其為塊級元素，占據一定矩形空間，可以通過設定高度、寬度、內外邊距等屬性，來調整的這個矩形；*/
    height:25px;
    color:gray;
}

.central .logon ul .wx{/*微信登錄*/
    float: left;
    margin-left:50px;
    cursor: pointer;/*滑鼠指標變成手的形狀*/
}

.central .logon ul .qq{/*QQ登錄*/
    float: right;
    margin-right:50px;
    cursor: pointer;/*滑鼠指標變成手的形狀*/
    
}

.central .logon input[type=account]{/*賬號輸入框*/
    display: inline-block;/*1、使元素變成行內元素，擁有行內元素的特性，即可以與其他行內元素共享一行，不會獨占一行. */
    /*2、能夠改變元素的height，width的值. 3、可以設定padding，margin的各個屬性值，top，left，bottom，right都能夠產生邊距效果.*/
    height:18px;
    width:250px;
    padding: 10px;/*設定內邊距*/
    margin-top: 30px ;
    margin-left: 25px;
}

.central .logon input[type=password]{/*密碼輸入框*/
    display: inline-block;
    height:18px;
    width:250px;
    padding: 10px;/*設定內邊距*/
    margin-top: 15px ;
    margin-left: 25px;
}

.central .logon .checkbox[type=checkbox]{/*選中按鈕*/
    float:left;
    height:15px;
    width:15px;
    margin-top:20px;
    margin-left:20px;
    border-width: 1px;
    border-style:solid;
    border-color:blue;
    background:white;
}
.central .logon p{/*設定按鈕旁字體“ 下次自動登錄 ”*/
    margin-top:18px;
    margin-left:3px;
    float:left;
    font-size:5px;
}
 
.central .logon .button[type=button]{/*設定登錄按鈕*/
    height:45px;
    width:260px;
    margin-top: 10px;
    margin-left: -3px;
    background-color: blue;
    text-align: center;
    font-size:10px;
    color:white;
    border-width: 1px;
    border-style:solid;
    border-color:blue;
    cursor: pointer;
}

.central .logon img{/* “掃碼登錄二維碼示例圖”設定*/
    height: 25px;
    width: 30px;
    margin-left: 100px;
    margin-right: 0px;
    margin-top:10px;
    float:center;
}

.central .logon .codeword {/*設定二維碼示例旁字體：“ 掃碼快捷登錄 ”*/
    margin-top:15px;
    margin-bottom:5px;
    margin-left:3px;
    float:center;
    color: blue;
    font-size:5px;
}

.central .logon .codeword a{/*鏈接*/
    text-decoration: none;
}

.central .logon .codeword a:hover{/*滑鼠懸停在a時*/
    text-decoration: underline;/*顯示下劃線*/
}

.central .logon .FogretPassword{/*忘了密碼?*/
    float:left;
    color:blue;
    font-size:3px;
    margin-left:15px;
    margin-top:20px;
}

.central .logon .NewAccount{/*注冊新賬號*/
    float:right;
    color:blue;
    font-size:3px;
    margin-right:15px;
    margin-top:20px;
}

.central .logon a{/*鏈接*/
    text-decoration: none;
}

.central .logon a:hover{/*滑鼠懸停在a時*/
    text-decoration: underline;/*顯示下劃線*/
}

/*----------------------------------------------footer----------------------------------------------*/
.footer{/* 底部設定*/
    background: #eff4fa;
    bottom: 0;/*設定此部分據螢屏下邊距距離為0*/
    height:40px;
    width: 100%; /* 也可將此處換為“right:0; ”*/
    text-align: center;
    position: fixed;/*相對于視圖視窗定位 */
}

.footer nav {
    font-size:1px;
    color:darkgray;
    margin-top:8px;
    text-align: center;
}

.footer nav a{
    color:blue;
    text-decoration: none;
}

.footer nav a:hover{/*滑鼠懸停在a時*/
    text-decoration: underline;/*顯示下劃線*/
}

三、圖片保存

1、命名為“二維碼圖”：

2、命名為“中間圖”：

3、命名為“左上圖1”：

四、存盤與執行

將“ 一 ”中的HTML代碼、“ 二 ”中的CSS代碼，“ 三 ”中的三個圖片按各自要求命名，放至同一檔案夾下，打開“ QQ郵箱頁面.html ”與“ QQ郵箱頁面.css ”，在html中運行，

五、運行結果：

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/413920.html

標籤：其他

上一篇：vue ui創建專案的常見錯誤

下一篇：前端入門（加載特效）