一、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;
}