个人网址引导页简约大方自适应html单页面导航引导页源码
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网址导航引导title>
<style>
/* 全局样式重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 页面基础样式 */
body {
/* 匹配图片的绿色背景 + 星空点点效果 */
background-color: #00a86b;
background-image: radial-gradient(#ffffff1a 1px, transparent 1px);
background-size: 20px 20px;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: "Microsoft Yahei", sans-serif;
color: #333;
}
/* 标题样式 */
h1 {
color: #fff;
margin-bottom: 20px;
font-size: 28px;
}
/* 白色卡片容器 */
.card {
background-color: #fff;
width: 600px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
/* 顶部收藏提示栏 */
.tips-bar {
background-color: #00874d;
color: #fff;
text-align: center;
padding: 12px;
font-size: 16px;
}
/* 单个网址项样式 */
.url-item {
padding: 15px 20px;
border-bottom: 1px solid #eee;
}
/* 最后一个网址项去掉下边框 */
.url-item:last-child {
border-bottom: none;
}
/* 网址文本描述 */
.url-text {
margin-bottom: 5px;
font-size: 14px;
}
/* 网址链接样式 */
.url-link {
color: #00874d;
text-decoration: none;
font-size: 14px;
margin-bottom: 8px;
display: block;
}
/* 按钮容器（右对齐） */
.url-btn {
display: flex;
justify-content: flex-end;
}
/* 点击进入按钮 */
.enter-btn {
background-color: #00874d;
color: #fff;
border: none;
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
/* 按钮hover效果 */
.enter-btn:hover {
background-color: #006e3d;
}
/* 版权信息 */
.copyright {
color: #fff;
margin-top: 20px;
font-size: 14px;
}
/* 响应式适配（小屏幕） */
@media (max-width: 620px) {
.card {
width: 90%;
}
}
style>
head>
<body>
<h1>网址导航引导h1>
<div class="card">
<div class="tips-bar">请 Ctrl+D 收藏本页到浏览器收藏夹div>
<div class="url-item">
<div class="url-text">网址导航引导div>
<a href="https://www.xxx.cn" class="url-link">https://www.xxx.cna>
<div class="url-btn">
<button class="enter-btn" onclick="window.open('https://www.xxx.cn')">点击进入button>
div>
div>
<div class="url-item">
<div class="url-text">网址导航引导div>
<a href="https://www.xxx.cn" class="url-link">https://www.xxx.cna>
<div class="url-btn">
<button class="enter-btn" onclick="window.open('https://www.xxx.cn')">点击进入button>
div>
div>
<div class="url-item">
<div class="url-text">网址导航引导div>
<a href="https://www.xxx.cn" class="url-link">https://www.xxx.cna>
<div class="url-btn">
<button class="enter-btn" onclick="window.open('https://www.xxx.cn')">点击进入button>
div>
div>
<div class="url-item">
<div class="url-text">网址导航引导div>
<a href="https://www.xxx.cn" class="url-link">https://www.xxx.cna>
<div class="url-btn">
<button class="enter-btn" onclick="window.open('https://www.xxx.cn')">点击进入button>
div>
div>
<div class="url-item">
<div class="url-text">网址导航引导div>
<a href="https://www.xxx.cn" class="url-link">https://www.xxx.cna>
<div class="url-btn">
<button class="enter-btn" onclick="window.open('https://www.xxx.cn')">点击进入button>
div>
div>
div>
<p class="copyright">©2023 网址导航引导页 All Rights Reservedp>
body>
html>
代码说明：
视觉还原：
背景色匹配图片的青绿色，添加了星空点点的渐变效果（模拟原图背景纹理）
白色卡片、绿色提示栏 / 按钮的配色完全还原
文字排版、按钮位置与原图一致
交互功能：
点击 “点击进入” 按钮会在新窗口打开对应网址（可替换https://www.xxx.cn为实际网址）
按钮添加 hover 高亮效果，提升体验
适配手机 / 平板等小屏幕（卡片宽度自动适配）
使用方法：
直接复制代码保存为.html文件，双击即可在浏览器打开
替换所有https://www.xxx.cn为实际需要导航的网址即可使用
