<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/static/css/QQ邮箱.css">
</head>
<body style="margin: 0;">
<div class="page">
<div class="page-head">
<img src="https://rescdn.qqmail.com/zh_CN/htmledition/images/logo/logo_0_01f1927.png" alt="邮箱logo">
<!-- 头部 -->
<div class="page-head-user">
<span>xzh</span>
<span><ele994@qq.com></span>
<span class="span">邮箱首页</span>
<span class="span">|</span>
<span class="span">设置</span>
<span class="span"> - </span>
<span class="span">换肤</span>
</div>
</div>
<div class="page-body">
<!-- 主要内容部分 -->
<div class="page-body-left">
<!-- 主要内容部分的左边 -->
<div class="page-body-left-top">
<!-- 主要内容部分的左边的上面 -->
<div class="svg"><svg t="1689074783048" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="976" width="200" height="200">
<path
d="M921.6 1024H102.4a51.2 51.2 0 0 1 0-102.4h819.2a51.2 51.2 0 1 1 0 102.4zM358.4 819.2H153.6a51.2 51.2 0 0 1-51.2-51.2V563.2a51.2 51.2 0 0 1 14.99136-36.18816l512-512a51.2 51.2 0 0 1 72.3968 0l204.8 204.8a51.2 51.2 0 0 1 0 72.3968l-512 512A51.2 51.2 0 0 1 358.4 819.2z m-153.6-102.4h132.4032l460.8-460.8L665.6 123.5968l-460.8 460.8z"
fill="#bfbfbf" p-id="977"></path>
</svg>
写信
</div>
<div class="svg"><svg t="1689074819978" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="976" width="200" height="200">
<path
d="M828.975746 894.125047 190.189132 894.125047c-70.550823 0-127.753639-57.18542-127.753639-127.752616L62.435493 606.674243c0-17.634636 14.308891-31.933293 31.93227-31.933293l63.889099 0c17.634636 0 31.93227 14.298658 31.93227 31.933293l0 95.821369c0 35.282574 28.596292 63.877843 63.87682 63.877843L765.098927 766.373455c35.281551 0 63.87682-28.595268 63.87682-63.877843l0-95.821369c0-17.634636 14.298658-31.933293 31.943526-31.933293l63.877843 0c17.634636 0 31.933293 14.298658 31.933293 31.933293l0 159.699212C956.729385 836.939627 899.538849 894.125047 828.975746 894.125047L828.975746 894.125047zM249.938957 267.509636c12.921287-12.919241 33.884738-12.919241 46.807049 0l148.97087 148.971893L445.716876 94.89323c0-17.634636 14.300704-31.94762 31.933293-31.94762l63.875796 0c17.637706 0 31.945573 14.312984 31.945573 31.94762l0 321.588299 148.97087-148.971893c12.921287-12.919241 33.875528-12.919241 46.796816 0l46.814212 46.818305c12.921287 12.922311 12.921287 33.874505 0 46.807049L552.261471 624.930025c-1.140986 1.137916-21.664416 13.68365-42.315758 13.69286-20.87647 0.010233-41.878806-12.541641-43.020816-13.69286L203.121676 361.13499c-12.922311-12.933567-12.922311-33.884738 0-46.807049L249.938957 267.509636 249.938957 267.509636z"
fill="#bfbfbf" p-id="977"></path>
</svg>
收信
</div>
<div class="svg"><svg t="1689074875267" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="1006" width="200" height="200">
<path
d="M873.472 0H150.528C67.584 0 0 67.584 0 150.528v722.944C0 956.416 67.584 1024 150.528 1024h722.944c82.944 0 150.528-67.584 150.528-150.528V150.528C1024 67.584 956.416 0 873.472 0zM650.24 427.008h148.992c11.776 0 21.504 5.632 21.504 19.456s-9.728 19.456-21.504 19.456H650.24c-11.776 0-21.504-5.632-21.504-19.456s10.24-19.456 21.504-19.456z m168.448 104.448c0 13.312-9.728 19.456-21.504 19.456H680.96c-11.776 0-21.504-5.632-21.504-19.456s9.728-19.456 21.504-19.456h118.272c11.776 0 19.456 5.632 19.456 19.456z m-106.496 191.488c0 27.136-23.04 44.544-50.176 44.544H251.392c-27.136 0-50.176-17.408-50.176-44.544v-11.776c0-25.088 19.456-46.592 42.496-56.32l102.4-44.544s27.136-9.728 34.816-17.408c4.096-5.632 5.632-25.088 0-36.864S323.072 476.672 323.072 420.352C323.072 329.216 382.976 256 456.704 256c73.728 0 133.632 73.728 133.632 164.352 0 57.856-57.856 123.904-61.952 139.264-5.632 15.36-5.632 27.136 0 32.768 7.68 9.728 29.184 17.408 29.184 17.408l112.128 44.544c23.04 7.68 42.496 30.72 42.496 56.32v12.288z m89.088-92.672H721.92c-11.776 0-21.504-5.632-21.504-19.456 0-13.312 9.728-19.456 21.504-19.456h79.36c11.776 0 21.504 5.632 21.504 19.456 0 13.312-9.728 19.456-21.504 19.456z"
fill="#bfbfbf" p-id="1007"></path>
</svg>
通讯录
</div>
</div>
<div class="page-body-left-bottom">
<!-- 主要内容部分的左边的下面 -->
<div class="page-body-left-bottom-mark">收件箱(256)</div>
<div>星标邮件
<svg t="1689085931141" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="1036" width="200" height="200">
<path
d="M781.186088 637.36520633q17.338645 80.573705 30.59761 145.848606 6.119522 27.537849 11.219124 55.075697t9.689243 49.976096 7.649402 38.247012 4.079681 19.888446q3.059761 20.398406-9.179283 27.027888t-27.537849 6.629482q-5.099602 0-14.788845-3.569721t-14.788845-5.609562l-266.199203-155.027888q-72.414343 42.836653-131.569721 76.494024-25.498008 14.278884-50.486056 28.557769t-45.386454 26.517928-35.187251 20.398406-19.888446 10.199203q-10.199203 5.099602-20.908367 3.569721t-19.378486-7.649402-12.749004-14.788845-2.039841-17.848606q1.01992-4.079681 5.099602-19.888446t9.179283-37.737052 11.729084-48.446215 13.768924-54.055777q15.298805-63.23506 34.677291-142.788845-60.175299-52.015936-108.111554-92.812749-20.398406-17.338645-40.286853-34.167331t-35.697211-30.59761-26.007968-22.438247-11.219124-9.689243q-12.239044-11.219124-20.908367-24.988048t-6.629482-28.047809 11.219124-22.438247 20.398406-10.199203l315.155378-28.557769 117.290837-273.338645q6.119522-16.318725 17.338645-28.047809t30.59761-11.729084q10.199203 0 17.848606 4.589641t12.749004 10.709163 8.669323 12.239044 5.609562 10.199203l114.231076 273.338645 315.155378 29.577689q20.398406 5.099602 28.557769 12.239044t8.159363 22.438247q0 14.278884-8.669323 24.988048t-21.928287 26.007968z"
fill="#f4ea2a" p-id="1037"></path>
</svg>
</div>
<div class="page-body-left-bottom-mark">群邮件(5)</div>
<div>草稿箱(5)</div>
<div>已发送</div>
<div>已删除</div>
<div>垃圾箱</div>
<div>其他邮箱</div>
<span class="clr"></span>
<div>日历 | 记事本</div>
<span class="clr"></span>
<div>简历</div>
<div>发票助手</div>
<div>在线文档</div>
<div>每日悦读</div>
<div>附件收藏</div>
<div>文件中转站 </div>
<div>贺卡</div>
</div>
</div>
<div class="page-body-right">
<!-- 右边 -->
<div class="page-body-right-head">
<div class="page-body-right-head-user">
<span>夜深了，</span><span>xzh</span>
</div>
<div class="page-body-right-head-unread">
<svg t="1689087394354" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="1249" width="200" height="200">
<path d="M875.175936 247.416832" fill="#F7DC8B" p-id="1250"></path>
<path
d="M903.489536 117.798912 125.989888 117.798912c-51.463168 0-93.179904 41.719808-93.179904 93.185024l0 575.474688c0 51.46624 41.716736 93.182976 93.179904 93.182976l777.499648 0c51.468288 0 93.190144-41.716736 93.190144-93.182976L996.67968 210.983936C996.67968 159.517696 954.957824 117.798912 903.489536 117.798912zM904.646656 225.485824 526.856192 610.10432c-3.557376 3.598336-8.38144 5.64224-13.451264 5.64224l-0.04096 0c-5.069824-0.02048-9.894912-2.064384-13.451264-5.6832L124.778496 225.83296c-7.236608-7.441408-7.114752-19.380224 0.326656-26.637312 7.482368-7.277568 19.339264-7.114752 26.657792 0.306176l361.68192 370.471936 364.29824-370.900992c7.277568-7.441408 19.216384-7.523328 26.657792-0.22528C911.802368 206.12608 911.924224 218.064896 904.646656 225.485824z"
fill="#F7DC8B" p-id="1251"></path>
</svg><span>邮件：</span><span>261</span>
<span>封</span><span>未读邮件</span>
</div>
<div class="page-body-right-head-email">
<span>收件箱(256)</span> <span>群邮件(5)</span>
</div>
</div>
<div class="page-body-right-body">
<div class="page-body-right-body-head">
<span>邮箱推荐</span>
</div>
<div class="page-body-right-body-img">
<img src="https://rescdn.qqmail.com/zh_CN/htmledition/images/todaybar/20230412ftn_2x653651.png"
alt="">
</div>
<div class="page-body-right-body-other">
<div>
<svg t="1689088899419" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="1281" width="200" height="200">
<path
d="M649.78554 161.505697C707.566573 88.168232 694.232489 8.163725 689.787794 1.496683c-6.667042-6.667042-93.338592 6.667042-153.341972 86.671549-53.336338 73.337465-53.336338 153.341972-46.669296 160.009014C496.443568 254.844289 583.115118 248.177247 649.78554 161.505697L649.78554 161.505697zM649.78554 161.505697"
fill="#8BB7E8" p-id="1282"></path>
<path
d="M794.238123 534.860064c-6.667042-106.672676 93.338592-173.343099 113.339719-186.677183l0-6.667042c0 0-86.671549-106.672676-213.345353-100.005634-80.004507 6.667042-120.006761 46.669296-173.343099 46.669296-66.670423 0-126.673803-46.669296-200.011268-46.669296-60.00338 0-233.346479 53.336338-246.680564 280.015775C63.085821 748.205417 223.094835 959.328422 283.098216 999.330676c60.00338 40.002254 100.005634 26.668169 166.676057-6.667042 33.335211-20.001127 140.007888-26.668169 200.011268 13.334085 73.337465 26.668169 180.010141 6.667042 300.016902-260.014648C934.24601 748.205417 800.905165 714.870205 794.238123 534.860064L794.238123 534.860064zM794.238123 534.860064"
fill="#8BB7E8" p-id="1283"></path>
</svg><span>iPhone版</span>
</div>
<div>
<svg t="1689088935288" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="1585" width="200" height="200">
<path
d="M864 48H160a48 48 0 0 0-48 48v832a48 48 0 0 0 48 48h704a48 48 0 0 0 48-48V96a48 48 0 0 0-48-48zM512 944a32 32 0 1 1 0-64 32 32 0 0 1 0 64z m304-96H208V144h608v704z"
fill="#8BB7E8" p-id="1586"></path>
</svg><span>iPad版</span>
</div>
<div>
<svg t="1689088961340" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="1739" width="200" height="200">
<path
d="M141.1 331.2c-35 0-63.3 28.3-63.3 63.2v264.7c0 34.9 28.4 63.2 63.3 63.2 35 0 63.3-28.3 63.3-63.2V394.4c0-34.9-28.3-63.2-63.3-63.2zM228.9 753.3c0 37.3 30.3 67.5 67.6 67.5h46.1v140c0 34.9 28.4 63.2 63.3 63.2 35 0 63.3-28.3 63.3-63.2v-140h85.5v140c0 34.9 28.4 63.2 63.3 63.2 35 0 63.3-28.3 63.3-63.2v-140h46.1c37.3 0 67.6-30.2 67.6-67.5V343.1H228.9v410.2zM651.8 93.4L696 13c2.4-4.2 0.8-9.6-3.5-11.9-4.2-2.3-9.6-0.8-11.9 3.5l-44.7 81.2C598.4 69.2 556.4 59.9 512 59.9c-44.4 0-86.4 9.3-123.9 25.8L343.4 4.6c-2.3-4.3-7.7-5.8-11.9-3.5-4.3 2.3-5.9 7.7-3.5 11.9l44.2 80.4c-86.8 44.8-145.5 130-145.5 227.7h570.5c0.1-97.8-58.6-182.9-145.4-227.7zM382.2 218c-13.2 0-23.9-10.7-23.9-23.9s10.7-23.9 23.9-23.9 23.9 10.7 23.9 23.9c-0.1 13.2-10.8 23.9-23.9 23.9z m259.7 0c-13.2 0-23.9-10.7-23.9-23.9s10.7-23.9 23.9-23.9 23.9 10.7 23.9 23.9c-0.1 13.2-10.8 23.9-23.9 23.9zM882.9 331.2c-35 0-63.3 28.3-63.3 63.2v264.7c0 34.9 28.4 63.2 63.3 63.2 35 0 63.3-28.3 63.3-63.2V394.4c0-34.9-28.3-63.2-63.3-63.2z"
fill="#8BB7E8" p-id="1740"></path>
</svg><span>Android版</span>
</div>
<div>
<svg t="1689088993857" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="2042" width="200" height="200">
<path
d="M461.1 887.1S210.6 784 98.3 552.5C46.6 446 46.3 303.3 147 202.1c100.6-101.1 263.8-101.2 364.4 0C612 101 775.2 101 875.8 202.1 976.5 303.3 979.1 458 924.5 552.5 789 787.1 570.3 885.1 570.3 885.1c-29.8 16.3-78.9 16.8-109.2 2z m20.1-41.4c17.3 8.5 50.7 7.9 66.8-1l3.6-1.7c2.7-1.2 8.5-4 17-8.5 14.6-7.8 31-17.3 48.8-28.6 51-32.6 102.1-73.1 149.7-121.9 45.2-46.3 85-97.7 117.8-154.5 50-86.6 36.9-216.2-41.5-294.9-82.7-83.1-216.6-83.1-299.2 0l-32.6 32.8-32.6-32.8c-82.7-83.1-216.6-83.1-299.3 0-78 78.4-89.5 195.7-40 297.8 33.6 69.1 82.8 130.8 143.9 185 43 38.2 89.2 70.4 135.4 96.7 16.2 9.2 31 16.9 44.3 23.3 7.8 3.7 13 6.1 15.5 7.1l2.4 1.2z"
fill="#8BB7E8" p-id="2043"></path>
</svg><span>贺卡</span>
</div>
<div>
<svg t="1689089032013" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="2196" width="200" height="200">
<path
d="M896 448H128v447.957333l477.738667 0.021334L896 895.957333V448z m0-42.666667V192.042667C896 192 768 192 768 192V149.333333h128.042667A42.666667 42.666667 0 0 1 938.666667 192.042667v703.914666A42.624 42.624 0 0 1 896.064 938.666667H127.936A42.666667 42.666667 0 0 1 85.333333 895.957333V192.042667C85.333333 168.469333 104.256 149.333333 127.957333 149.333333H256v42.666667l-128 0.042667V405.333333h768zM298.666667 85.333333h42.666666v170.666667h-42.666666V85.333333z m384 0h42.666666v170.666667h-42.666666V85.333333zM384 149.333333h256v42.666667H384V149.333333z"
fill="#8BB7E8" p-id="2197"></path>
</svg><span>记事本</span><span> - </span><span>日历</span>
</div>
<div>
<svg t="1689089075536" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="2350" width="200" height="200">
<path
d="M196.266667 443.733333l-128-128c-8.533333-8.533333-8.533333-21.333333 0-29.866666l128-128 29.866666 29.866666L115.2 298.666667l110.933333 110.933333-29.866666 34.133333zM827.733333 870.4l-29.866666-29.866667 110.933333-110.933333-110.933333-110.933333 29.866666-29.866667 128 128c8.533333 8.533333 8.533333 21.333333 0 29.866667l-128 123.733333z"
fill="#8BB7E8" p-id="2351"></path>
<path
d="M85.333333 277.333333h853.333334v42.666667H85.333333zM85.333333 704h853.333334v42.666667H85.333333z"
fill="#8BB7E8" p-id="2352"></path>
</svg><span>文件中转站</span>
</div>
</div>
</div>
<div class="page-body-right-footer">
<span>企业邮箱</span>
<span>|</span><span>体验室</span>
<span>|</span><span>邮箱助手</span>
<span>|</span><span>自助查询</span>
<span>|</span><span>隐私政策</span>
<div style="margin-top: 7px;">标准版 - 基本版 | © 1998 - 2023 Tencent Inc. All Rights Reserved</div>
</div>
</div>
</div>
</div>
</body>
</html>
body,
html {
height: 100%;
width: 100%;
margin: 0 0 0 0;
overflow: hidden hidden;
}
.page {
width: 100%;
height: 100vh;
background-color: white;
}
.page-head {
margin-left: 5px;
}
.page-head>img {
float: left;
}
.page-head-user {
width: 140px;
height: 30px;
box-sizing: border-box;
float: left;
padding: 10px 0 0 0;
}
.page-head-user>span:nth-child(1) {
display: inline-block;
font-size: 13px;
font-weight: bolder;
}
.page-head-user>span:nth-child(2) {
display: inline-block;
font-size: 12px;
position: relative;
left: -3px;
}
.span {
font-size: 11px;
color: #1E54B0;
}
.span:nth-child(odd) {
cursor: pointer;
}
.span:nth-child(odd):hover {
text-decoration: underline;
}
.page-body {
width: 99%;
height: 91.7vh;
background-color: #8BB7E8;
display: flex;
margin: 0 0 0 15px;
border-radius: 9px 0 0 0;
}
.page-body-left {
width: 179px;
height: 97px;
background-color: white;
margin: 6px 0 0 6px;
border-radius: 5px;
}
.page-body-left-top svg {
width: 17px;
height: 17px;
display: inline-block;
position: relative;
top: 3px;
}
.page-body-left-top .svg {
box-sizing: border-box;
margin-bottom: 5px;
padding: 4px 6px 4px 10px;
color: #1E5494;
font-weight: bold;
font-size: 14px;
cursor: pointer;
border-radius: 4px;
/* padding-bottom: 5px; */
/* border-bottom: 1px solid black; */
}
.page-body-left-top div:hover {
background-color: #E0ECF9;
}
.page-body-left-bottom {
box-sizing: border-box;
width: 179px;
height: 543px;
background-color: #FFFFFF;
border-radius: 7px;
}
.page-body-left-bottom {
display: flex;
flex-direction: column;
padding: 9px 4px 3px 10px;
font-size: 11px;
color: #1E5494;
cursor: pointer;
}
.page-body-left-bottom div {
box-sizing: border-box;
width: 160px;
height: 24px;
padding: 0 0 6px 6px;
line-height: 24px;
border-radius: 5px;
margin-bottom: 3px;
margin-top: 3px;
}
.page-body-left-bottom div:hover {
background-color: #E0ECF9;
}
.page-body-left-bottom-mark {
font-weight: bold;
font-size: 13px;
}
.page-body-left-bottom div:nth-child(2) svg {
width: 15px;
height: 15px;
position: relative;
top: 3px;
}
.page-body-right {
width: 1360px;
height: 660px;
background-color: white;
position: relative;
top: 8px;
left: 7px;
border-radius: 5px;
}
.page-body-right-head {
padding: 17px 0 0 10px;
}
.page-body-right-head-unread {
margin-bottom: 10px;
}
.page-body-right-head-user span:nth-child(1) {
font-size: 18px;
font-weight: bold;
}
.page-body-right-head-user span:nth-child(2) {
font-size: 17px;
font-weight: bold;
color: #1E5494;
cursor: pointer;
}
.page-body-right-head-user span:nth-child(2):hover {
text-decoration: underline;
}
.page-body-right-head-unread span:nth-child(2) {
font-size: 12px;
}
.page-body-right-head-unread span:nth-child(3) {
font-size: 13px;
font-weight: bold;
}
.page-body-right-head-unread span:nth-child(4) {
font-size: 13px;
}
.page-body-right-head-unread span:nth-child(5) {
font-size: 13px;
color: #1E5494;
cursor: pointer;
}
.page-body-right-head-unread span:nth-child(5):hover {
text-decoration: underline;
}
.page-body-right-head-unread svg {
width: 15px;
height: 15px;
position: relative;
top: 3px;
margin: 3px 5px 3px 3px;
}
.page-body-right-head-email {
width: 300px;
height: 80px;
padding: 0 0 0 23px;
font-size: 14px;
color: #1E5494;
font-weight: bold;
}
.page-body-right-head-email span:nth-child(1),
.page-body-right-head-email span:nth-child(2) {
cursor: pointer;
}
.page-body-right-head-email span:nth-child(1):hover,
.page-body-right-head-email span:nth-child(2):hover {
text-decoration: underline;
}
.page-body-right-body {
width: 900px;
height: 300px;
border: 1px solid #b2d6f9;
border-radius: 3px;
position: relative;
left: 10px;
}
.page-body-right-body-head {
width: 900px;
height: 30px;
background-color: #EFF5FB;
color: #1E5494;
position: relative;
border-radius: 3px 3px 0 0;
font-size: 14px;
line-height: 30px;
}
.page-body-right-body-head span {
position: relative;
left: 9px;
}
.page-body-right-body-head span:hover {
text-decoration: underline;
cursor: pointer;
}
.page-body-right-body-img {
width: 900px;
height: 95px;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid #8BB7E8;
border-top: 1px solid #8BB7E8;
}
.page-body-right-body-img img {
width: 892px;
height: 90px;
cursor: pointer;
}
.page-body-right-body-other {
box-sizing: border-box;
width: 900px;
height: 180px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
margin: 20px 0 0 0;
padding: 10px;
}
.page-body-right-body-other div {
width: 420px;
height: 50px;
}
.page-body-right-body-other div svg {
width: 20px;
height: 20px;
}
.page-body-right-body-other div span {
color: #1E5494;
position: relative;
left: 4px;
bottom: 2px;
cursor: pointer;
}
.page-body-right-body-other div span:hover {
text-decoration: underline;
}
.page-body-right-body-other div:nth-child(4) span,
.page-body-right-body-other div:nth-child(6) span,
.page-body-right-body-other div:nth-child(5) span {
position: relative;
bottom: 4px;
}
.page-body-right-body-other div:nth-child(5) span:nth-child(3):hover {
text-decoration: none;
cursor: auto;
}
.page-body-right-footer {
margin: 30px 0 0 10px;
cursor: auto;
font-size: 12px;
}
.page-body-right-footer span:nth-child(odd) {
color: #1E5494;
cursor: pointer;
}
.page-body-right-footer span:nth-child(odd):hover {
text-decoration: underline;
}
.clr {
display: inline-block;
border-top: 1px solid #d8dee5;
}
还蛮好看的
谢谢夸奖，还在练习中…