6月15日笔记
有关选项卡和选项卡快捷方式、加速器和InPrivate
代码演示：
点击查看代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>浏览器功能 · 选项卡 / 快捷方式 / 加速器 / InPrivate</title>
<style>
/* ----- 全局样式 ----- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #eef2f7;
font-family: 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif;
padding: 1.5rem;
}
.browser-card {
max-width: 780px;
width: 100%;
background: #ffffff;
border-radius: 28px;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.10), 0 8px 24px rgba(0, 0, 0, 0.04);
overflow: hidden;
transition: all 0.2s;
}
/* ----- 模拟标签栏 ----- */
.tab-bar {
display: flex;
flex-wrap: wrap;
background: #f1f5f9;
padding: 0.8rem 1.2rem 0 1.2rem;
border-bottom: 1px solid #dce4ec;
}
.tab-btn {
padding: 0.55rem 1.4rem;
margin-right: 0.25rem;
border: none;
background: transparent;
font-size: 0.9rem;
font-weight: 500;
color: #4f5f72;
border-radius: 12px 12px 0 0;
cursor: pointer;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 0.4rem;
position: relative;
bottom: -1px;
border-bottom: 2px solid transparent;
}
.tab-btn:hover {
background: rgba(255, 255, 255, 0.6);
color: #1a2b3e;
}
.tab-btn.active {
background: #ffffff;
color: #0b1e2e;
border-bottom-color: #1f3a5f;
font-weight: 600;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.02);
}
.tab-btn i {
font-style: normal;
font-size: 1.1rem;
}
/* ----- 内容面板容器 ----- */
.panels {
padding: 2rem 2rem 2.2rem 2rem;
background: #ffffff;
}
.panel {
display: none;
animation: fadeUp 0.3s ease;
}
.panel.active {
display: block;
}
@keyframes fadeUp {
0% { opacity: 0; transform: translateY(10px); }
100% { opacity: 1; transform: translateY(0); }
}
.panel h2 {
font-weight: 600;
font-size: 1.5rem;
color: #0b1e2e;
margin-bottom: 0.3rem;
}
.panel .desc {
color: #5e7388;
font-size: 0.95rem;
margin-bottom: 1.4rem;
border-left: 3px solid #b6ccdf;
padding-left: 1rem;
}
.panel ul, .panel p {
margin-bottom: 0.8rem;
color: #1e3347;
line-height: 1.6;
}
.panel li {
list-style: none;
margin-bottom: 0.5rem;
}
/* ----- 各种链接样式（复用之前的部分风格） ----- */
.link-demo {
display: inline-block;
margin-right: 0.8rem;
margin-bottom: 0.5rem;
}
/* 下划线 */
.link-underline {
color: #1f3a5f;
font-weight: 500;
border-bottom: 2px solid transparent;
padding-bottom: 2px;
transition: 0.2s;
}
.link-underline:hover {
border-bottom-color: #1f3a5f;
}
/* 按钮 */
.link-btn {
display: inline-block;
background: #1f3a5f;
color: #fff;
font-weight: 500;
padding: 0.4rem 1.4rem;
border-radius: 40px;
font-size: 0.9rem;
box-shadow: 0 4px 12px rgba(31, 58, 95, 0.2);
transition: 0.2s;
}
.link-btn:hover {
background: #142b47;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(31, 58, 95, 0.3);
}
/* 图标链接 */
.link-icon {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: #2b4b6f;
font-weight: 500;
padding: 0.2rem 0.6rem;
border-radius: 30px;
background: rgba(31, 58, 95, 0.05);
transition: 0.2s;
}
.link-icon:hover {
background: rgba(31, 58, 95, 0.12);
transform: translateX(3px);
}
/* 卡片链接 */
.link-card {
display: inline-flex;
align-items: center;
gap: 0.6rem;
background: #f8fafc;
padding: 0.5rem 1.2rem;
border-radius: 16px;
border: 1px solid #e2eaf2;
color: #1f3a5f;
font-weight: 500;
transition: 0.25s;
margin-right: 0.6rem;
margin-bottom: 0.5rem;
}
.link-card:hover {
border-color: #b0c8dd;
box-shadow: 0 6px 16px rgba(0,0,0,0.04);
transform: translateY(-2px);
background: #ffffff;
}
/* 虚线边框 */
.link-dashed {
display: inline-block;
padding: 0.3rem 1.2rem;
border: 2px dashed #b6ccdf;
border-radius: 30px;
color: #1f3a5f;
font-weight: 500;
transition: 0.3s;
}
.link-dashed:hover {
background: #1f3a5f;
color: #fff;
border-style: solid;
border-color: #1f3a5f;
}
/* 额外：键盘快捷键标签 */
.kbd {
display: inline-block;
background: #f0f4f9;
padding: 0.1rem 0.7rem;
border-radius: 6px;
font-family: 'SF Mono', monospace;
font-size: 0.8rem;
border: 1px solid #d0dce8;
color: #1a2b3e;
box-shadow: inset 0 -1px 2px rgba(0,0,0,0.05);
margin: 0 0.2rem;
}
.badge {
background: #eef3f9;
padding: 0.1rem 0.8rem;
border-radius: 30px;
font-size: 0.75rem;
color: #3d5f7a;
font-weight: 500;
}
.divider {
margin: 1rem 0 1.2rem 0;
border-top: 1px solid #ecf1f7;
}
/* 响应式 */
@media (max-width: 550px) {
.tab-bar {
padding: 0.5rem 0.8rem 0 0.8rem;
}
.tab-btn {
padding: 0.4rem 0.9rem;
font-size: 0.8rem;
flex: 1 1 auto;
justify-content: center;
}
.panels {
padding: 1.5rem 1.2rem;
}
.panel h2 {
font-size: 1.2rem;
}
}
</style>
</head>
<body>
<div class="browser-card">
<!-- 选项卡标签栏 -->
<div class="tab-bar" role="tablist">
<button class="tab-btn active" data-tab="tab1" role="tab" aria-selected="true">
<i>📑</i> 选项卡
</button>
<button class="tab-btn" data-tab="tab2" role="tab" aria-selected="false">
<i>⌨️</i> 快捷方式
</button>
<button class="tab-btn" data-tab="tab3" role="tab" aria-selected="false">
<i>⚡</i> 加速器
</button>
<button class="tab-btn" data-tab="tab4" role="tab" aria-selected="false">
<i>🕶️</i> InPrivate
</button>
</div>
<!-- 内容面板 -->
<div class="panels">
<!-- 面板1：选项卡 -->
<div id="tab1" class="panel active" role="tabpanel">
<h2>📑 浏览器选项卡</h2>
<div class="desc">选项卡让你在一个窗口中同时打开多个网页，轻松切换。</div>
<ul>
<li><span class="badge">新建</span> 点击 <a href="#" class="link-underline">空白选项卡</a> 或使用 <span class="kbd">Ctrl+T</span></li>
<li><span class="badge">切换</span> 使用 <span class="kbd">Ctrl+Tab</span> 或直接点击上方标签</li>
<li><span class="badge">关闭</span> <a href="#" class="link-icon">✕ 关闭当前</a> 或 <span class="kbd">Ctrl+W</span></li>
<li><span class="badge">恢复</span> <a href="#" class="link-underline">重新打开已关闭的选项卡</a> (<span class="kbd">Ctrl+Shift+T</span>)</li>
</ul>
<div class="divider"></div>
<p><strong>示例链接：</strong></p>
<div>
<a href="#" class="link-btn link-demo">新建选项卡</a>
<a href="#" class="link-card link-demo"><span>📂</span> 管理选项卡</a>
<a href="#" class="link-dashed link-demo">固定选项卡</a>
</div>
</div>
<!-- 面板2：快捷方式 -->
<div id="tab2" class="panel" role="tabpanel">
<h2>⌨️ 键盘快捷方式</h2>
<div class="desc">常用浏览器快捷键，提升浏览效率。</div>
<ul>
<li><span class="kbd">Ctrl+T</span> 新建选项卡</li>
<li><span class="kbd">Ctrl+W</span> 关闭当前选项卡</li>
<li><span class="kbd">Ctrl+Shift+T</span> 重新打开上次关闭的选项卡</li>
<li><span class="kbd">Ctrl+L</span> 或 <span class="kbd">Alt+D</span> 聚焦地址栏</li>
<li><span class="kbd">Ctrl+D</span> 收藏当前页面</li>
<li><span class="kbd">F5</span> 刷新 <span class="kbd">Ctrl+F5</span> 强制刷新</li>
<li><span class="kbd">Ctrl+Shift+N</span> 打开 InPrivate 窗口 (隐私模式)</li>
</ul>
<div class="divider"></div>
<p><strong>试试这些快捷操作：</strong></p>
<div>
<a href="#" class="link-underline link-demo">⌨ 查看所有快捷键</a>
<a href="#" class="link-card link-demo"><span>⚙️</span> 自定义快捷键</a>
</div>
</div>
<!-- 面板3：加速器 -->
<div id="tab3" class="panel" role="tabpanel">
<h2>⚡ 加速器 (Accelerators)</h2>
<div class="desc">加速器是浏览器的快捷操作，让你快速完成搜索、翻译、地图等任务。</div>
<ul>
<li><span class="badge">搜索</span> 选中文本后，点击 <a href="#" class="link-underline">🔍 使用百度搜索</a></li>
<li><span class="badge">翻译</span> <a href="#" class="link-icon">🌐 翻译成英文</a> 或 <a href="#" class="link-icon">🇯🇵 翻译成日文</a></li>
<li><span class="badge">地图</span> <a href="#" class="link-card"><span>🗺️</span> 在谷歌地图查看</a></li>
<li><span class="badge">邮件</span> <a href="#" class="link-underline">通过电子邮件发送</a></li>
<li><span class="badge">购物</span> <a href="#" class="link-dashed">在淘宝搜索</a></li>
</ul>
<div class="divider"></div>
<p><span class="badge">💡</span> 加速器通常通过右键菜单或扩展实现，点击上方链接模拟加速器操作。</p>
</div>
<!-- 面板4：InPrivate 隐私浏览 -->
<div id="tab4" class="panel" role="tabpanel">
<h2>🕶️ InPrivate 隐私浏览</h2>
<div class="desc">使用 InPrivate 模式时，浏览记录、Cookie 和临时文件在关闭窗口后将被清除。</div>
<ul>
<li><span class="badge">启动</span> 点击 <a href="#" class="link-btn" style="background:#2d4b6b;">🛡️ 打开 InPrivate 窗口</a> 或使用 <span class="kbd">Ctrl+Shift+N</span></li>
<li><span class="badge">特点</span> 不保存历史记录、搜索记录、Cookie</li>
<li><span class="badge">注意</span> 下载的文件和新增的书签仍然保留</li>
<li><span class="badge">退出</span> 关闭所有 InPrivate 窗口即结束隐私会话</li>
</ul>
<div class="divider"></div>
<p><strong>了解更多：</strong></p>
<div>
<a href="#" class="link-card link-demo"><span>📖</span> 隐私浏览说明</a>
<a href="#" class="link-dashed link-demo">⚙️ 隐私设置</a>
<a href="#" class="link-underline link-demo">什么是 InPrivate？</a>
</div>
</div>
</div>
</div>
<script>
(function() {
// 获取所有选项卡按钮和面板
const tabs = document.querySelectorAll('.tab-btn');
const panels = document.querySelectorAll('.panel');
// 切换函数
function switchTab(tabId) {
// 移除所有 active
tabs.forEach(btn => {
btn.classList.remove('active');
btn.setAttribute('aria-selected', 'false');
});
panels.forEach(p => p.classList.remove('active'));
// 激活对应的按钮和面板
const activeBtn = document.querySelector(`.tab-btn[data-tab="${tabId}"]`);
const activePanel = document.getElementById(tabId);
if (activeBtn) {
activeBtn.classList.add('active');
activeBtn.setAttribute('aria-selected', 'true');
}
if (activePanel) {
activePanel.classList.add('active');
}
}
// 绑定点击事件
tabs.forEach(btn => {
btn.addEventListener('click', function(e) {
const tabId = this.getAttribute('data-tab');
switchTab(tabId);
});
});
// 可选：键盘支持（左右箭头切换），但为简洁省略
// 默认第一个已经激活
})();
</script>
</body>
</html>
效果图：
浙公网安备 33010602011771号