编写网易邮箱登陆界面

最新推荐文章于 2024-05-03 13:32:20 发布

kkk-kid

最新推荐文章于 2024-05-03 13:32:20 发布

阅读量3.5k

点赞数 3

文章标签： html 前端 css3

本文链接：https://blog.csdn.net/qq_44651930/article/details/127517898

版权

一、HTML部分

1.网页主体部分

该部分编写了网页的主体部分。分为header main footer三个板块。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <link rel="stylesheet" href="./style.css">
  <body>
    <div class="u-important-motice-wrapper"></div>
    <div class="header">
      <div class="headerlogo">
        <div class="headerlogo-163"></div>
        <p>163网易邮箱</p>
      </div>
      <p class="headerTitle">你的专业电子邮局</p>
      <div class="headerNav">
        <a href="https://dashi.163.com/?from=mail11&session_id=930C5E23-4DDD-485B-A6F8-375BA7A1FBAD&uid=&spm=pos.free_webmail_9c89159b6fde1dc2.loginPage.login163Page.header.nav&gotodownload=1&fromDlpro=1" target="_blank">邮箱官方App</a>
        <a href="https://vipmail.163.com/?from=fmail" target="_blank">VIP</a>
        <a href="https://v.mail.163.com/?utm_source=163loginnav" target="_blank">会员</a>
        <a href="https://qiye.163.com/?from=M163_LOGIN" target="_blank">企业邮箱</a>
        <a href="https://hw.mail.163.com/#163" target="_blank">海外登录</a>
        <a>|</a>
        <a href="https://help.mail.163.com/" target="_blank">帮助</a>
        <a href="https://mail.163.com/html/feedback/#/45" target="_blank">反馈</a>
        <a href="https://mail.163.com/html/accounts-repair/index.html#/taskPublicity" target="_blank">修复提示</a>
      </div>
    </div>

    <div class="main">
      <div class="login">
        <iframe class="frame" src="./wangyi.html" ></iframe>
      </div>  
                  
        <div class="picture">
          <a href="https://dashi.163.com/?from=mail334&session_id=fbc44597-d1f8-4213-89f4-1c6b8ca649ab&spm=ad.0.0.0.900.544&uid=nt%40163.com&gotodownload=1&fromDlpro=1" target="_blank">
            <img src="./网易截图.jpg">
          </a>
          
        </div>
    </div>

    <div class="footer">
      <div class="footermain">
        <div class="footernav">
          <a href="https://www.163.com/" target="_blank">网易首页</a>
          <a>|</a>
          <a href="https://you.163.com/" target="_blank">网易严选</a>
          <a>|</a>
          <a href="https://help.mail.163.com/faqDetail.do?code=d7a5dc8471cd0c0e8b4b8f4f8e49998b374173cfe9171305fa1ce630d7f67ac2842e8b50ff6a4ebb">政府公益热线</a>
          <a>|</a>
          <a href="https://reg.163.com/agreement_mobile_ysbh_wap.shtml?v=20171127" target="_blank">隐私政策</a>
          <a>|</a>
          <a href="https://hc.reg.163.com/iTerm/doc.html?id=347" target="_blank">儿童隐私政策</a>
          <a>|</a>
          <a>网易公司版权所有©1997-2022</a>
        </div>
        <div class="footernnav">
          <a href="https://beian.miit.gov.cn/" target="_blank">ICPC备案 粤B2-20090191-18</a>
          <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44010602006299" target="_blank">粤公安网安备 44010602006299</a>
          <a>增值电信业务许可证</a>
          <a href="https://cms-bucket.ws.126.net/2019/05/30/f0b8f62f908a411e944aa93f0727272d.jpeg" target="_blank">粤B2-20090191</a>
          <a href="https://cms-bucket.ws.126.net/2019/06/12/ff11d8c212a24203adcef9a83317edd3.jpeg" target="_blank">B2-20090058</a>
          <a>（中文邮箱第一品牌 数据来源：艾媒邮箱报告）</a>
        </div>
      </div>
    </div>
    
</html>

2iframe框架内部分

编写了iframe框架内部分，iframe内容是邮箱账号登陆、注册入口

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
      </head>
      <link rel="stylesheet" href="./style.css">
    <body>
        <form>
            <div class="login">
                <h2 class="login-title">账号登陆</h2>
                <div class="loginurl">
                    <input type="text" name="account" placeholder="邮箱账号或手机">
                <br/>
                <input type="password" name="password" placeholder="密码">
                <br/>
                <input type="submit" value="登  陆" >
                </div>
                
                </form>
                <div class="register">
                    <a href="https://reg.163.com/naq/findPassword?pd=mail163&pkid=CvViHzl#/verifyAccount" target="_blank" >忘记密码</a>
                    <a>|</a>
                    <a href="https://mail.163.com/register/index.htm?from=163mail&utm_source=163mail" target="_blank">注册新账号</a>
                </div>
            </div>
            
    </body>
</html>

二、CSS部分

对页面进行装饰。因为还处于初学阶段，所以可能存在一些较麻烦、不稳定的写法。


a{text-decoration:none}
body{overflow:hidden}
.header{
    font-family: PingFangSC-Regular,Microsoft YaHei,"\5FAE\8F6F\96C5\9ED1",verdana,sans-serif,Simsun,STXihei;
    min-width: 1220px;
    padding: 0 40px;
    height: 70px;
    position: absolute;
    top:0px ;
    left: 0;
    right: 0;
    z-index: 2;
}

.headerlogo{
    top:20px;
    left:40px;
}

.headerNav {
    position:absolute;
    top: 15px;
    right: 40px;
    text-align: right;
    color: #555;
    font-size: 12px;
    line-height: 17px;
}

.headerNav a{
    padding-left: 12px;
    display: inline-block;
    vertical-align: middle;
    color: #585e6d;
    font-size: 12px;
}

.main{
    position: absolute;
    top:250px;
    
}

.frame{
    position: absolute;
    height: 450px;
    width:400px;
    top: -100px;
    left: -45px;
    border-radius: 10px;

}

.login{
    position: absolute;
    left: 1000px;
    height:200px;
    margin-top: -20px;
}

.login-title{
    position:absolute;
    top:30px;
    left:-860px ;
}

.loginurl{
    position:absolute;
    top:110px;
    left:-960px ;
}

.register{
    position: inherit;
    display: inline-block;
    vertical-align: middle;
    color: #585e6d;
    font-size: 13px;
    left:-860px ;
    bottom:-200px
}

input[type=text],input[type=password],select {
    width: 300px;
    padding: 12px 20px;
    margin: 8px;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=submit]{
    width: 300px;
    padding: 12px 20px;
    margin: 8px;
    display: inline-block;
    background-color: rgb(56, 170, 219);
    border: 1px solid rgb(56, 170, 219);
    border-radius: 4px;
    box-sizing: border-box;
}

.picture{
    position: inherit;
    left: 50px;
    top: -140px;
    
}

.footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #888;
    min-width: 1220px;
    padding-top: 24px;
    padding-bottom: 24px;
}

.footermain{
    height: 100%;
    background: #fbfbfb;
    position: relative;
    min-width: 1220px;
}

.footernav {
    text-align: center;
    color: #555;
    font-size: 12px;
    line-height: 60px;
}
.footernnav{
    text-align: center;
    color: #555;
    font-size: 12px;
    line-height: 24px;
}