以下是一个响应式、带交互效果、可直接使用的网址引导页代码，采用纯 HTML+CSS + 原生 JS 开发，适配电脑 / 平板 / 手机等设备，包含网址卡片、悬浮效果、返回顶部功能，样式清新简洁，可直接修改网址信息复用。
<!DOCTYPE html>
<!– 声明文档类型为HTML5，设置语言为中文 –>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!– 视口设置：适配移动端，禁止缩放，宽度=device-width –>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>我的常用网址 | 快捷引导页</title>
<!– 引入Font Awesome图标库（用于网址卡片图标，无需本地下载） –>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* 全局样式重置：消除默认边距、设置盒模型、统一字体 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Inter", "Microsoft YaHei", sans-serif;
}
/* 页面主体：渐变背景、最小占满屏幕、弹性布局居中、滚动平滑 */
body {
background: linear-gradient(120deg, #f5f7fa, #c3cfe2);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem 1rem;
scroll-behavior: smooth;
}
/* 页面标题 */
.page-title {
font-size: 2.2rem;
color: #333;
margin-bottom: 0.5rem;
font-weight: 700;
}
/* 副标题/描述 */
.page-desc {
font-size: 1rem;
color: #666;
margin-bottom: 2.5rem;
letter-spacing: 0.5px;
}
/* 网址卡片容器：弹性布局、自动换行、最大宽度限制、间距均匀 */
.link-card-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
max-width: 1200px;
width: 100%;
}
/* 网址卡片：白色背景、圆角、阴影、弹性布局、固定宽度、内边距、过渡效果 */
.link-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
width: 180px;
padding: 1.5rem 1rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
transition: all 0.3s ease;
cursor: pointer;
}
/* 卡片悬浮效果：上浮、阴影加深 */
.link-card:hover {
transform: translateY(-8px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}
/* 卡片图标：固定大小、主色调、居中 */
.card-icon {
font-size: 2.5rem;
color: #4285f4;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
/* 卡片名称：文字居中、颜色、字体粗细 */
.card-name {
font-size: 1rem;
color: #333;
font-weight: 500;
text-align: center;
}
/* 跳转按钮：块级元素、宽度100%、背景色、圆角、无下划线、文字居中、内边距、过渡 */
.jump-btn {
display: block;
width: 100%;
background: #4285f4;
color: #fff;
text-align: center;
padding: 0.5rem 0;
border-radius: 6px;
text-decoration: none;
font-size: 0.9rem;
transition: background 0.3s ease;
}
/* 按钮悬浮效果：背景色加深 */
.jump-btn:hover {
background: #3367d6;
}
/* 页脚：margin-top自动（挤到页面底部）、文字颜色、间距、字体大小 */
footer {
margin-top: auto;
margin-top: 3rem;
color: #666;
font-size: 0.9rem;
text-align: center;
}
/* 返回顶部按钮：固定定位、右下角、圆形、背景色、图标、阴影、过渡、默认隐藏 */
.back-to-top {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 48px;
height: 48px;
background: #4285f4;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
box-shadow: 0 4px 12px rgba(66, 133, 244, 0.3);
transition: all 0.3s ease;
cursor: pointer;
opacity: 0;
visibility: hidden;
}
/* 返回顶部按钮显示状态 */
.back-to-top.show {
opacity: 1;
visibility: visible;
}
/* 按钮悬浮效果 */
.back-to-top:hover {
background: #3367d6;
transform: translateY(-3px);
}
/* 媒体查询：适配小屏设备（手机），调整卡片宽度、标题大小 */
@media (max-width: 480px) {
.page-title {
font-size: 1.8rem;
}
.link-card {
width: 140px;
padding: 1.2rem 0.8rem;
}
.card-icon {
font-size: 2rem;
}
.back-to-top {
width: 40px;
height: 40px;
bottom: 1rem;
right: 1rem;
}
}
</style>
</head>
<body>
<!– 页面头部 –>
<h1 class="page-title">我的快捷网址</h1>
<p class="page-desc">常用网站 · 一键直达</p>
<!– 网址卡片核心容器 –>
<div class="link-card-container">
<!– 网址卡片1：百度 –>
<div class="link-card">
<div class="card-icon"><i class="fas fa-search"></i></div>
<div class="card-name">百度</div>
<a href="https://www.baidu.com" target="_blank" class="jump-btn">立即访问</a>
</div>
<!– 网址卡片2：淘宝 –>
<div class="link-card">
<div class="card-icon"><i class="fas fa-shopping-cart"></i></div>
<div class="card-name">淘宝</div>
<a href="https://www.taobao.com" target="_blank" class="jump-btn">立即访问</a>
</div>
<!– 网址卡片3：知乎 –>
<div class="link-card">
<div class="card-icon"><i class="fas fa-comment-dots"></i></div>
<div class="card-name">知乎</div>
<a href="https://www.zhihu.com" target="_blank" class="jump-btn">立即访问</a>
</div>
<!– 网址卡片4：B站 –>
<div class="link-card">
<div class="card-icon"><i class="fas fa-video"></i></div>
<div class="card-name">哔哩哔哩</div>
<a href="https://www.bilibili.com" target="_blank" class="jump-btn">立即访问</a>
</div>
<!– 网址卡片5：GitHub –>
<div class="link-card">
<div class="card-icon"><i class="fab fa-github"></i></div>
<div class="card-name">GitHub</div>
<a href="https://github.com" target="_blank" class="jump-btn">立即访问</a>
</div>
<!– 网址卡片6：网易云音乐 –>
<div class="link-card">
<div class="card-icon"><i class="fas fa-music"></i></div>
<div class="card-name">网易云音乐</div>
<a href="https://music.163.com" target="_blank" class="jump-btn">立即访问</a>
</div>
</div>
<!– 页脚 –>
<footer>© 2026 我的快捷网址引导页 | 简洁高效 · 一键直达</footer>
<!– 返回顶部按钮 –>
<div class="back-to-top" id="backToTop">
<i class="fas fa-arrow-up"></i>
</div>
<script>
// 返回顶部功能实现
const backToTopBtn = document.getElementById('backToTop');
// 滚动监听：页面滚动超过300px时显示按钮，否则隐藏
window.addEventListener('scroll', () => {
if (window.scrollY > 300) {
backToTopBtn.classList.add('show');
} else {
backToTopBtn.classList.remove('show');
}
});
// 点击按钮：平滑滚动回到页面顶部
backToTopBtn.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
</script>
</body>
</html>
核心功能与特点 响应式布局：完美适配电脑、平板、手机（小屏自动调整卡片大小）； 精美交互：卡片悬浮上浮 + 阴影加深、按钮悬浮变色、平滑滚动； 实用功能：返回顶部按钮（滚动超过 300px 自动显示）、新窗口打开网址； 视觉美观：渐变背景、卡片阴影、圆角设计、统一图标风格； 易于维护：代码结构清晰，类名语义化，注释完善。 快速修改指南（零基础可操作） 
