ten
This commit is contained in:
邓智航
321
009/009_b.html
Normal file
321
009/009_b.html
Normal file
@@ -0,0 +1,321 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>MyGlobalMail - Inbox (1,204 Unread)</title>
|
||||
</head>
|
||||
<body bgcolor="#ffffff" text="#000000" link="#0000EE" vlink="#551A8B" alink="#FF0000">
|
||||
|
||||
<center>
|
||||
<table width="100%" border="1" cellpadding="5" bgcolor="#ffffcc">
|
||||
<tr>
|
||||
<td align="center">
|
||||
<h3>*** 免费赢取 2026 世界杯门票！***</h3>
|
||||
<p>只需填写一份问卷，即可参与抽奖。<a href="#">[点击这里]</a></p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</center>
|
||||
<br>
|
||||
|
||||
<table width="100%" border="0" cellspacing="0" cellpadding="5" bgcolor="#003366">
|
||||
<tr>
|
||||
<td width="30%">
|
||||
<h1><font color="white">MyGlobalMail</font></h1>
|
||||
</td>
|
||||
<td width="50%" align="center">
|
||||
<font color="white">
|
||||
<form>
|
||||
Search Mail: <input type="text" size="20">
|
||||
<input type="submit" value="Go">
|
||||
<br>
|
||||
<small><a href="#" style="color:#ddd">Advanced Search</a></small>
|
||||
</form>
|
||||
</font>
|
||||
</td>
|
||||
<td width="20%" align="right">
|
||||
<font color="white" size="2">
|
||||
User: <b>john.doe@globalmail.com</b><br>
|
||||
<a href="#" style="color:yellow">[Upgrade to Pro]</a> | <a href="#" style="color:white">[Sign Out]</a>
|
||||
</font>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table width="100%" border="1" cellspacing="0" cellpadding="2" bgcolor="#eeeeee">
|
||||
<tr>
|
||||
<td align="center">
|
||||
<a href="#"><b>Mail</b></a> |
|
||||
<a href="#"><b>Address Book</b></a> |
|
||||
<a href="#"><b>Calendar</b></a> |
|
||||
<a href="#"><b>Notepad</b></a> |
|
||||
<a href="#"><b>Options</b></a> |
|
||||
<a href="#"><b>Help</b></a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br>
|
||||
|
||||
<table width="100%" border="0" cellspacing="5" cellpadding="0">
|
||||
<tr>
|
||||
<td width="180" valign="top" bgcolor="#f0f0f0">
|
||||
<br>
|
||||
<table width="100%" border="0">
|
||||
<tr><td><a href="#"><b>[Inbox] (1204)</b></a></td></tr>
|
||||
<tr><td><a href="#">Drafts (5)</a></td></tr>
|
||||
<tr><td><a href="#">Sent Items</a></td></tr>
|
||||
<tr><td><a href="#">Junk Mail (99+)</a> <font color="red">clean</font></td></tr>
|
||||
<tr><td><a href="#">Trash</a> <font color="red">empty</font></td></tr>
|
||||
</table>
|
||||
<hr>
|
||||
<b>My Folders</b><br>
|
||||
<ul>
|
||||
<li><a href="#">Work</a></li>
|
||||
<li><a href="#">Family</a></li>
|
||||
<li><a href="#">Bills</a></li>
|
||||
<li><a href="#">Receipts</a></li>
|
||||
<li><a href="#">Newsletters</a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<table width="100%" border="1" bgcolor="#e6e6fa">
|
||||
<tr><td align="center">
|
||||
<font size="2"><b>Singles near you!</b><br>Find love today.<br><a href="#">[View Photos]</a></font>
|
||||
</td></tr>
|
||||
</table>
|
||||
<br>
|
||||
<table width="100%" border="1" bgcolor="#e6e6fa">
|
||||
<tr><td align="center">
|
||||
<font size="2"><b>Refinance Rates</b><br>Hit historic lows.<br><a href="#">[Calculate]</a></font>
|
||||
</td></tr>
|
||||
</table>
|
||||
</td>
|
||||
|
||||
<td valign="top">
|
||||
<p align="center">
|
||||
<font color="red" size="2"><b>Warning: Your mailbox is 98% full. You may not be able to receive new messages.</b></font>
|
||||
<a href="#">[Clean Up Now]</a>
|
||||
</p>
|
||||
|
||||
<table width="100%" border="0" bgcolor="#cccccc" cellpadding="3">
|
||||
<tr>
|
||||
<td>
|
||||
<input type="button" value="New">
|
||||
<input type="button" value="Reply">
|
||||
<input type="button" value="Reply All">
|
||||
<input type="button" value="Forward">
|
||||
|
|
||||
<input type="button" value="Delete">
|
||||
<input type="button" value="Junk">
|
||||
<input type="button" value="Move To...">
|
||||
</td>
|
||||
<td align="right">
|
||||
Showing 1-20 of 1204
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<form>
|
||||
<table width="100%" border="1" cellspacing="0" cellpadding="3">
|
||||
<tr bgcolor="#999999">
|
||||
<th width="30"><input type="checkbox"></th>
|
||||
<th width="30">St</th>
|
||||
<th width="200">From</th>
|
||||
<th>Subject</th>
|
||||
<th width="100">Date</th>
|
||||
<th width="60">Size</th>
|
||||
</tr>
|
||||
|
||||
<tr bgcolor="#ffffff">
|
||||
<td align="center"><input type="checkbox"></td>
|
||||
<td align="center"><img src="" alt="New"></td>
|
||||
<td><b>Boss_Steve</b></td>
|
||||
<td><b>URGENT: Meeting rescheduled to 3 PM</b></td>
|
||||
<td>Today</td>
|
||||
<td>2KB</td>
|
||||
</tr>
|
||||
|
||||
<tr bgcolor="#ffffff">
|
||||
<td align="center"><input type="checkbox"></td>
|
||||
<td align="center"><img src="" alt="New"></td>
|
||||
<td><b>HR Department</b></td>
|
||||
<td><b>Year-end performance review schedule</b></td>
|
||||
<td>Today</td>
|
||||
<td>15KB</td>
|
||||
</tr>
|
||||
|
||||
<tr bgcolor="#ffffcc">
|
||||
<td align="center"><input type="checkbox" disabled></td>
|
||||
<td align="center"><font color="red">$</font></td>
|
||||
<td><font color="green"><b>MyGlobalMail Partner</b></font></td>
|
||||
<td><a href="#"><b>CONGRATULATIONS! You have been selected for a cash prize...</b></a></td>
|
||||
<td>Now</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
|
||||
<tr bgcolor="#f0f0f0">
|
||||
<td align="center"><input type="checkbox"></td>
|
||||
<td align="center"><img src="" alt="Read"></td>
|
||||
<td>Amazon.com</td>
|
||||
<td>Your order #77821 has shipped</td>
|
||||
<td>Yesterday</td>
|
||||
<td>45KB</td>
|
||||
</tr>
|
||||
|
||||
<tr bgcolor="#f0f0f0">
|
||||
<td align="center"><input type="checkbox"></td>
|
||||
<td align="center"><img src="" alt="Read"></td>
|
||||
<td>LinkedIn</td>
|
||||
<td>You appeared in 5 searches this week</td>
|
||||
<td>Yesterday</td>
|
||||
<td>12KB</td>
|
||||
</tr>
|
||||
|
||||
<tr bgcolor="#ffffff">
|
||||
<td align="center"><input type="checkbox"></td>
|
||||
<td align="center"><img src="" alt="High"></td>
|
||||
<td><b>Security Team (security@gmai1.com)</b></td>
|
||||
<td><b>Action Required: Verify your password immediately</b></td>
|
||||
<td>Yesterday</td>
|
||||
<td>5KB</td>
|
||||
</tr>
|
||||
|
||||
<tr bgcolor="#f0f0f0">
|
||||
<td align="center"><input type="checkbox"></td>
|
||||
<td align="center"><img src="" alt="Read"></td>
|
||||
<td>Newsletter_Weekly</td>
|
||||
<td>Top 10 Tech Trends of 2025</td>
|
||||
<td>Dec 20</td>
|
||||
<td>120KB</td>
|
||||
</tr>
|
||||
|
||||
<tr bgcolor="#f0f0f0">
|
||||
<td align="center"><input type="checkbox"></td>
|
||||
<td align="center"><img src="" alt="Read"></td>
|
||||
<td>Mom</td>
|
||||
<td>Re: Christmas dinner plans?</td>
|
||||
<td>Dec 19</td>
|
||||
<td>8KB</td>
|
||||
</tr>
|
||||
|
||||
<tr bgcolor="#ffe4e1">
|
||||
<td colspan="6" align="center">
|
||||
<font size="2" color="red">System Notice: We are updating our Privacy Policy. <a href="#">[Read Here]</a></font>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr bgcolor="#f0f0f0">
|
||||
<td align="center"><input type="checkbox"></td>
|
||||
<td align="center"><img src="" alt="Read"></td>
|
||||
<td>GitHub</td>
|
||||
<td>[GitHub] A personal access token has expired</td>
|
||||
<td>Dec 18</td>
|
||||
<td>10KB</td>
|
||||
</tr>
|
||||
|
||||
<tr bgcolor="#f0f0f0">
|
||||
<td align="center"><input type="checkbox"></td>
|
||||
<td align="center"><img src="" alt="Read"></td>
|
||||
<td>Netflix</td>
|
||||
<td>New login from new device</td>
|
||||
<td>Dec 18</td>
|
||||
<td>15KB</td>
|
||||
</tr>
|
||||
|
||||
<tr bgcolor="#f0f0f0">
|
||||
<td align="center"><input type="checkbox"></td>
|
||||
<td align="center"><img src="" alt="Read"></td>
|
||||
<td>Spotify</td>
|
||||
<td>Your 2025 Wrapped is here!</td>
|
||||
<td>Dec 17</td>
|
||||
<td>55KB</td>
|
||||
</tr>
|
||||
|
||||
<tr bgcolor="#f0f0f0">
|
||||
<td align="center"><input type="checkbox"></td>
|
||||
<td align="center"><img src="" alt="Read"></td>
|
||||
<td>Project Manager</td>
|
||||
<td>Fwd: Client feedback on Q4 report</td>
|
||||
<td>Dec 16</td>
|
||||
<td>2MB</td>
|
||||
</tr>
|
||||
|
||||
<tr bgcolor="#f0f0f0">
|
||||
<td align="center"><input type="checkbox"></td>
|
||||
<td align="center"><img src="" alt="Read"></td>
|
||||
<td>Service Desk</td>
|
||||
<td>Ticket #9921 resolved</td>
|
||||
<td>Dec 15</td>
|
||||
<td>4KB</td>
|
||||
</tr>
|
||||
|
||||
<tr bgcolor="#f0f0f0">
|
||||
<td align="center"><input type="checkbox"></td>
|
||||
<td align="center"><img src="" alt="Read"></td>
|
||||
<td>Bank of America</td>
|
||||
<td>Your monthly statement is ready</td>
|
||||
<td>Dec 15</td>
|
||||
<td>1MB</td>
|
||||
</tr>
|
||||
|
||||
<tr bgcolor="#f0f0f0">
|
||||
<td align="center"><input type="checkbox"></td>
|
||||
<td align="center"><img src="" alt="Read"></td>
|
||||
<td>Zoom</td>
|
||||
<td>Meeting invitation: Daily Standup</td>
|
||||
<td>Dec 14</td>
|
||||
<td>8KB</td>
|
||||
</tr>
|
||||
|
||||
<tr bgcolor="#f0f0f0">
|
||||
<td align="center"><input type="checkbox"></td>
|
||||
<td align="center"><img src="" alt="Read"></td>
|
||||
<td>Slack</td>
|
||||
<td>You have 5 unread notifications</td>
|
||||
<td>Dec 14</td>
|
||||
<td>12KB</td>
|
||||
</tr>
|
||||
|
||||
<tr bgcolor="#f0f0f0">
|
||||
<td align="center"><input type="checkbox"></td>
|
||||
<td align="center"><img src="" alt="Read"></td>
|
||||
<td>Adobe Creative Cloud</td>
|
||||
<td>Payment successful</td>
|
||||
<td>Dec 13</td>
|
||||
<td>8KB</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</form>
|
||||
|
||||
<br>
|
||||
<table width="100%" border="0">
|
||||
<tr>
|
||||
<td align="right">
|
||||
<a href="#">[Previous]</a>
|
||||
<b>1</b> <a href="#">2</a> <a href="#">3</a> ... <a href="#">50</a>
|
||||
<a href="#">[Next]</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<hr>
|
||||
<center>
|
||||
<font size="1">Sponsored Links:</font><br>
|
||||
<a href="#">Cheap Flights</a> | <a href="#">Weight Loss</a> | <a href="#">Insurance Quotes</a> | <a href="#">Free Credit Score</a>
|
||||
</center>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<hr>
|
||||
|
||||
<center>
|
||||
<font size="1" color="#888888">
|
||||
© 1999-2025 MyGlobalMail Inc. All rights reserved.<br>
|
||||
<a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a> | <a href="#">About Us</a> | <a href="#">Careers</a>
|
||||
</font>
|
||||
</center>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
703
009/009_r.html
Normal file
703
009/009_r.html
Normal file
@@ -0,0 +1,703 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>MyGlobalMail - Inbox (1,204 Unread)</title>
|
||||
<style>
|
||||
/* === CSS Variables & Reset === */
|
||||
:root {
|
||||
--primary: #0078d4;
|
||||
--bg-body: #f3f2f1;
|
||||
--bg-white: #ffffff;
|
||||
--text-main: #323130;
|
||||
--text-sub: #605e5c;
|
||||
--border: #edebe9;
|
||||
--hover: #f3f2f1;
|
||||
--selected: #c7e0f4;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', -apple-system, sans-serif;
|
||||
background-color: var(--bg-body);
|
||||
color: var(--text-main);
|
||||
margin: 0;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* === 布局重构：强制覆盖 Table 样式 === */
|
||||
table,
|
||||
tbody,
|
||||
tr,
|
||||
td {
|
||||
display: block;
|
||||
width: 100% !important;
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* 顶部广告 - 隐藏 */
|
||||
body>center:first-of-type {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 顶部 Header */
|
||||
body>table:nth-of-type(1) {
|
||||
background: var(--primary) !important;
|
||||
color: white;
|
||||
padding: 0 15px !important;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
body>table:nth-of-type(1) tr {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
body>table:nth-of-type(1) td {
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
body>table:nth-of-type(1) h1 {
|
||||
font-size: 18px;
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 搜索框美化 */
|
||||
body>table:nth-of-type(1) form {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
body>table:nth-of-type(1) input[type="text"] {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: white;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
body>table:nth-of-type(1) input[type="text"]::placeholder {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
body>table:nth-of-type(1) input[type="submit"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 隐藏Go按钮 */
|
||||
body>table:nth-of-type(1) small {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 隐藏高级搜索链接 */
|
||||
|
||||
/* 功能导航条 - 隐藏 */
|
||||
body>table:nth-of-type(2) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* === 主体布局 === */
|
||||
body>table:nth-of-type(3) {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body>table:nth-of-type(3)>tbody>tr {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 左侧文件夹栏 */
|
||||
body>table:nth-of-type(3)>tbody>tr>td:first-child {
|
||||
width: 220px !important;
|
||||
background: var(--bg-white) !important;
|
||||
border-right: 1px solid var(--border) !important;
|
||||
padding: 20px 10px !important;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* 文件夹列表美化 */
|
||||
.folder-link {
|
||||
display: block;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
color: var(--text-main);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.folder-link:hover {
|
||||
background: var(--hover);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* 重写左侧原本的 table 结构 */
|
||||
body>table:nth-of-type(3) td:first-child table tr td {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
body>table:nth-of-type(3) td:first-child table a {
|
||||
@extend .folder-link;
|
||||
color: var(--text-main);
|
||||
display: block;
|
||||
padding: 8px 10px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
body>table:nth-of-type(3) td:first-child table a:hover {
|
||||
background: var(--hover);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
body>table:nth-of-type(3) td:first-child table a b {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 隐藏左侧栏的广告 (table bgcolor=#e6e6fa) */
|
||||
body>table:nth-of-type(3) td:first-child table[bgcolor="#e6e6fa"] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body>table:nth-of-type(3) td:first-child hr {
|
||||
border-top: 1px solid var(--border);
|
||||
margin: 15px 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
body>table:nth-of-type(3) td:first-child ul {
|
||||
list-style: none;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
body>table:nth-of-type(3) td:first-child ul li {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
/* 右侧邮件列表区 */
|
||||
body>table:nth-of-type(3)>tbody>tr>td:nth-child(2) {
|
||||
flex: 1 !important;
|
||||
background: var(--bg-white) !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
/* 存储警告 - 美化为顶部条 */
|
||||
body>table:nth-of-type(3) td:nth-child(2)>p:first-child {
|
||||
background: #fff4ce;
|
||||
color: #333;
|
||||
padding: 10px 20px;
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
body>table:nth-of-type(3) td:nth-child(2)>p:first-child font {
|
||||
color: #333 !important;
|
||||
}
|
||||
|
||||
/* 工具栏 */
|
||||
body>table:nth-of-type(3) td:nth-child(2)>table:first-of-type {
|
||||
padding: 10px 20px !important;
|
||||
border-bottom: 1px solid var(--border) !important;
|
||||
background: white !important;
|
||||
}
|
||||
|
||||
body>table:nth-of-type(3) td:nth-child(2)>table:first-of-type tr {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
body>table:nth-of-type(3) td:nth-child(2)>table:first-of-type input[type="button"] {
|
||||
background: white;
|
||||
border: 1px solid var(--border);
|
||||
padding: 5px 12px;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
color: var(--text-main);
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
body>table:nth-of-type(3) td:nth-child(2)>table:first-of-type input[type="button"]:hover {
|
||||
background: var(--hover);
|
||||
}
|
||||
|
||||
/* 高亮 "New" 按钮 */
|
||||
body>table:nth-of-type(3) td:nth-child(2)>table:first-of-type input[value="New"] {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
/* 邮件列表容器 */
|
||||
body>table:nth-of-type(3) td:nth-child(2)>form {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* 邮件列表 Table 重构 */
|
||||
.mail-table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 隐藏原表头，用 Grid 重新定义 */
|
||||
.mail-table tr:first-child {
|
||||
display: grid;
|
||||
grid-template-columns: 40px 40px 200px 1fr 100px 80px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: #faf9f8;
|
||||
font-weight: 600;
|
||||
color: var(--text-sub);
|
||||
font-size: 12px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.mail-table tr:first-child th {
|
||||
padding: 10px !important;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* 邮件行 */
|
||||
.mail-table tr:not(:first-child) {
|
||||
display: grid;
|
||||
grid-template-columns: 40px 40px 200px 1fr 100px 80px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mail-table tr:not(:first-child):hover {
|
||||
background: var(--hover);
|
||||
}
|
||||
|
||||
.mail-table td {
|
||||
padding: 10px !important;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* 隐藏干扰行 (广告, 系统警告) */
|
||||
.mail-table tr[bgcolor="#ffffcc"],
|
||||
.mail-table tr[bgcolor="#ffe4e1"] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* 样式微调 */
|
||||
.mail-table input[type="checkbox"] {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mail-table b {
|
||||
font-weight: 600;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
/* 未读邮件加粗 */
|
||||
.mail-table td:nth-child(4) {
|
||||
color: var(--text-sub);
|
||||
}
|
||||
|
||||
/* Subject */
|
||||
.mail-table td:nth-child(4) b {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
/* Subject Unread */
|
||||
|
||||
/* 底部广告隐藏 */
|
||||
body>table:nth-of-type(3) td:nth-child(2)>center {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 翻页 */
|
||||
body>table:nth-of-type(3) td:nth-child(2)>table:last-of-type {
|
||||
padding: 10px 20px !important;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
/* 页脚 - 简化 */
|
||||
body>center:last-of-type {
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
padding: 5px;
|
||||
background: #f3f2f1;
|
||||
}
|
||||
|
||||
hr {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body bgcolor="#ffffff" text="#000000" link="#0000EE" vlink="#551A8B" alink="#FF0000">
|
||||
|
||||
<center>
|
||||
<table width="100%" border="1" cellpadding="5" bgcolor="#ffffcc">
|
||||
<tr>
|
||||
<td align="center">
|
||||
<h3>*** 免费赢取 2026 世界杯门票！***</h3>
|
||||
<p>只需填写一份问卷，即可参与抽奖。<a href="#">[点击这里]</a></p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</center>
|
||||
<br>
|
||||
|
||||
<table width="100%" border="0" cellspacing="0" cellpadding="5" bgcolor="#003366">
|
||||
<tr>
|
||||
<td width="30%">
|
||||
<h1>
|
||||
<font color="white">MyGlobalMail</font>
|
||||
</h1>
|
||||
</td>
|
||||
<td width="50%" align="center">
|
||||
<font color="white">
|
||||
<form onsubmit="return false;">
|
||||
<span style="display:none;">Search Mail:</span> <input type="text" size="20"
|
||||
placeholder="Search">
|
||||
<input type="submit" value="Go">
|
||||
<br>
|
||||
<small><a href="#" style="color:#ddd">Advanced Search</a></small>
|
||||
</form>
|
||||
</font>
|
||||
</td>
|
||||
<td width="20%" align="right">
|
||||
<font color="white" size="2">
|
||||
<span style="opacity:0.8; margin-right:10px;">User: <b>john.doe@globalmail.com</b></span>
|
||||
<a href="#" style="color:yellow; display:none;">[Upgrade to Pro]</a> <a href="#"
|
||||
style="color:white; opacity:0.8;">Sign Out</a>
|
||||
</font>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table width="100%" border="1" cellspacing="0" cellpadding="2" bgcolor="#eeeeee">
|
||||
<tr>
|
||||
<td align="center">
|
||||
<a href="#"><b>Mail</b></a> |
|
||||
<a href="#"><b>Address Book</b></a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br>
|
||||
|
||||
<table width="100%" border="0" cellspacing="5" cellpadding="0">
|
||||
<tr>
|
||||
<td width="180" valign="top" bgcolor="#f0f0f0">
|
||||
<br>
|
||||
<table width="100%" border="0">
|
||||
<tr>
|
||||
<td><a href="#"><b>Inbox (1204)</b></a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#">Drafts (5)</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#">Sent Items</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#">Junk Mail (99+)</a>
|
||||
<font color="red" style="display:none;">clean</font>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#">Trash</a>
|
||||
<font color="red" style="display:none;">empty</font>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<hr>
|
||||
<b style="padding-left:10px; font-size:12px; color:#666; text-transform:uppercase;">My Folders</b><br>
|
||||
<ul>
|
||||
<li><a href="#" class="folder-link">Work</a></li>
|
||||
<li><a href="#" class="folder-link">Family</a></li>
|
||||
<li><a href="#" class="folder-link">Bills</a></li>
|
||||
<li><a href="#" class="folder-link">Receipts</a></li>
|
||||
<li><a href="#" class="folder-link">Newsletters</a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<table width="100%" border="1" bgcolor="#e6e6fa">
|
||||
<tr>
|
||||
<td align="center">
|
||||
<font size="2"><b>Singles near you!</b><br>Find love today.<br><a href="#">[View Photos]</a>
|
||||
</font>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
|
||||
<td valign="top">
|
||||
<p align="center">
|
||||
<font color="red" size="2"><b>Warning: Your mailbox is 98% full.</b></font>
|
||||
<a href="#">Free up space</a>
|
||||
</p>
|
||||
|
||||
<table width="100%" border="0" bgcolor="#cccccc" cellpadding="3">
|
||||
<tr>
|
||||
<td>
|
||||
<input type="button" value="New">
|
||||
<input type="button" value="Reply">
|
||||
<input type="button" value="Reply All">
|
||||
<input type="button" value="Forward">
|
||||
<span style="color:#ddd; margin:0 5px;">|</span>
|
||||
<input type="button" value="Delete">
|
||||
<input type="button" value="Junk">
|
||||
<input type="button" value="Move To...">
|
||||
</td>
|
||||
<td align="right" style="font-size:12px; color:#666;">
|
||||
1-20 of 1204
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<form>
|
||||
<table width="100%" border="1" cellspacing="0" cellpadding="3" class="mail-table">
|
||||
<tr bgcolor="#999999">
|
||||
<th width="30"><input type="checkbox" id="selectAll"></th>
|
||||
<th width="30"></th>
|
||||
<th width="200">From</th>
|
||||
<th>Subject</th>
|
||||
<th width="100">Date</th>
|
||||
<th width="60">Size</th>
|
||||
</tr>
|
||||
|
||||
<tr bgcolor="#ffffff" class="mail-row unread">
|
||||
<td align="center"><input type="checkbox"></td>
|
||||
<td align="center">🔵</td>
|
||||
<td><b>Boss_Steve</b></td>
|
||||
<td><b>URGENT: Meeting rescheduled to 3 PM</b></td>
|
||||
<td>Today</td>
|
||||
<td>2KB</td>
|
||||
</tr>
|
||||
|
||||
<tr bgcolor="#ffffff" class="mail-row unread">
|
||||
<td align="center"><input type="checkbox"></td>
|
||||
<td align="center">🔵</td>
|
||||
<td><b>HR Department</b></td>
|
||||
<td><b>Year-end performance review schedule</b></td>
|
||||
<td>Today</td>
|
||||
<td>15KB</td>
|
||||
</tr>
|
||||
|
||||
<tr bgcolor="#ffffcc">
|
||||
<td align="center"><input type="checkbox" disabled></td>
|
||||
<td align="center">
|
||||
<font color="red">$</font>
|
||||
</td>
|
||||
<td>
|
||||
<font color="green"><b>MyGlobalMail Partner</b></font>
|
||||
</td>
|
||||
<td><a href="#"><b>CONGRATULATIONS! ...</b></a></td>
|
||||
<td>Now</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
|
||||
<tr bgcolor="#f0f0f0" class="mail-row">
|
||||
<td align="center"><input type="checkbox"></td>
|
||||
<td align="center"></td>
|
||||
<td>Amazon.com</td>
|
||||
<td>Your order #77821 has shipped</td>
|
||||
<td>Yesterday</td>
|
||||
<td>45KB</td>
|
||||
</tr>
|
||||
|
||||
<tr bgcolor="#f0f0f0" class="mail-row">
|
||||
<td align="center"><input type="checkbox"></td>
|
||||
<td align="center"></td>
|
||||
<td>LinkedIn</td>
|
||||
<td>You appeared in 5 searches this week</td>
|
||||
<td>Yesterday</td>
|
||||
<td>12KB</td>
|
||||
</tr>
|
||||
|
||||
<tr bgcolor="#ffffff" class="mail-row unread">
|
||||
<td align="center"><input type="checkbox"></td>
|
||||
<td align="center">⚠️</td>
|
||||
<td><b>Security Team</b></td>
|
||||
<td><b>Action Required: Verify your password immediately</b></td>
|
||||
<td>Yesterday</td>
|
||||
<td>5KB</td>
|
||||
</tr>
|
||||
|
||||
<tr bgcolor="#f0f0f0" class="mail-row">
|
||||
<td align="center"><input type="checkbox"></td>
|
||||
<td align="center"></td>
|
||||
<td>Newsletter_Weekly</td>
|
||||
<td>Top 10 Tech Trends of 2025</td>
|
||||
<td>Dec 20</td>
|
||||
<td>120KB</td>
|
||||
</tr>
|
||||
|
||||
<tr bgcolor="#f0f0f0" class="mail-row">
|
||||
<td align="center"><input type="checkbox"></td>
|
||||
<td align="center"></td>
|
||||
<td>Mom</td>
|
||||
<td>Re: Christmas dinner plans?</td>
|
||||
<td>Dec 19</td>
|
||||
<td>8KB</td>
|
||||
</tr>
|
||||
|
||||
<tr bgcolor="#ffe4e1">
|
||||
</tr>
|
||||
|
||||
<tr bgcolor="#f0f0f0" class="mail-row">
|
||||
<td align="center"><input type="checkbox"></td>
|
||||
<td align="center"></td>
|
||||
<td>GitHub</td>
|
||||
<td>[GitHub] A personal access token has expired</td>
|
||||
<td>Dec 18</td>
|
||||
<td>10KB</td>
|
||||
</tr>
|
||||
|
||||
<tr bgcolor="#f0f0f0" class="mail-row">
|
||||
<td align="center"><input type="checkbox"></td>
|
||||
<td align="center"></td>
|
||||
<td>Netflix</td>
|
||||
<td>New login from new device</td>
|
||||
<td>Dec 18</td>
|
||||
<td>15KB</td>
|
||||
</tr>
|
||||
|
||||
<tr bgcolor="#f0f0f0" class="mail-row">
|
||||
<td align="center"><input type="checkbox"></td>
|
||||
<td align="center"></td>
|
||||
<td>Spotify</td>
|
||||
<td>Your 2025 Wrapped is here!</td>
|
||||
<td>Dec 17</td>
|
||||
<td>55KB</td>
|
||||
</tr>
|
||||
|
||||
<tr bgcolor="#f0f0f0" class="mail-row">
|
||||
<td align="center"><input type="checkbox"></td>
|
||||
<td align="center"></td>
|
||||
<td>Project Manager</td>
|
||||
<td>Fwd: Client feedback on Q4 report</td>
|
||||
<td>Dec 16</td>
|
||||
<td>2MB</td>
|
||||
</tr>
|
||||
|
||||
<tr bgcolor="#f0f0f0" class="mail-row">
|
||||
<td align="center"><input type="checkbox"></td>
|
||||
<td align="center"></td>
|
||||
<td>Service Desk</td>
|
||||
<td>Ticket #9921 resolved</td>
|
||||
<td>Dec 15</td>
|
||||
<td>4KB</td>
|
||||
</tr>
|
||||
|
||||
<tr bgcolor="#f0f0f0" class="mail-row">
|
||||
<td align="center"><input type="checkbox"></td>
|
||||
<td align="center"></td>
|
||||
<td>Bank of America</td>
|
||||
<td>Your monthly statement is ready</td>
|
||||
<td>Dec 15</td>
|
||||
<td>1MB</td>
|
||||
</tr>
|
||||
|
||||
<tr bgcolor="#f0f0f0" class="mail-row">
|
||||
<td align="center"><input type="checkbox"></td>
|
||||
<td align="center"></td>
|
||||
<td>Zoom</td>
|
||||
<td>Meeting invitation: Daily Standup</td>
|
||||
<td>Dec 14</td>
|
||||
<td>8KB</td>
|
||||
</tr>
|
||||
|
||||
<tr bgcolor="#f0f0f0" class="mail-row">
|
||||
<td align="center"><input type="checkbox"></td>
|
||||
<td align="center"></td>
|
||||
<td>Slack</td>
|
||||
<td>You have 5 unread notifications</td>
|
||||
<td>Dec 14</td>
|
||||
<td>12KB</td>
|
||||
</tr>
|
||||
|
||||
<tr bgcolor="#f0f0f0" class="mail-row">
|
||||
<td align="center"><input type="checkbox"></td>
|
||||
<td align="center"></td>
|
||||
<td>Adobe Creative Cloud</td>
|
||||
<td>Payment successful</td>
|
||||
<td>Dec 13</td>
|
||||
<td>8KB</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</form>
|
||||
|
||||
<br>
|
||||
<table width="100%" border="0">
|
||||
<tr>
|
||||
<td align="right">
|
||||
<a href="#">[Previous]</a>
|
||||
<b>1</b> <a href="#">2</a> <a href="#">3</a> ... <a href="#">50</a>
|
||||
<a href="#">[Next]</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<hr>
|
||||
<center>
|
||||
</center>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<hr>
|
||||
|
||||
<center>
|
||||
<font size="1" color="#888888">
|
||||
© 1999-2025 MyGlobalMail Inc. All rights reserved.<br>
|
||||
<a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a> | <a href="#">About Us</a> | <a
|
||||
href="#">Careers</a>
|
||||
</font>
|
||||
</center>
|
||||
|
||||
<script>
|
||||
// 全选功能
|
||||
document.getElementById('selectAll').addEventListener('change', function (e) {
|
||||
const checkboxes = document.querySelectorAll('.mail-table input[type="checkbox"]');
|
||||
checkboxes.forEach(cb => cb.checked = e.target.checked);
|
||||
});
|
||||
|
||||
// 模拟行点击选中
|
||||
const rows = document.querySelectorAll('.mail-row');
|
||||
rows.forEach(row => {
|
||||
row.addEventListener('click', function (e) {
|
||||
if (e.target.type !== 'checkbox') {
|
||||
const checkbox = this.querySelector('input[type="checkbox"]');
|
||||
checkbox.checked = !checkbox.checked;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
console.log("Webmail initialized. Ads blocked.");
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user