1234

0598
  • 栏目 1
  • 栏目 2
  • 栏目 3
  • 栏目4
  • 栏目5
  • 栏目6
  • 栏目7
  • 栏目8
  • 栏目9
  • 栏目10
  • 栏目11
  • 栏目12
  • 栏目13
  • 栏目14
  • 栏目15

    • <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Link3 风格主页 - 经典原版</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
body {
  min-height: 100vh;
  background-color: #f6f7f9;
  display: flex;
  justify-content: center;
  padding: 50px 20px;
}
.wrapper {
  width: 100%;
  max-width: 370px;
  text-align: center;
}
.avatar {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  margin-bottom: 16px;
}
.name {
  font-size: 22px;
  font-weight: 600;
  color: #111;
  margin-bottom: 6px;
}
.bio {
  font-size: 14px;
  color: #666;
  margin-bottom: 32px;
  line-height: 1.6;
}
.link-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.link-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  background: #ffffff;
  border-radius: 12px;
  text-decoration: none;
  color: #222;
  font-size: 15px;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  transition: all 0.25s ease;
}
.link-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
.footer {
  margin-top: 40px;
  font-size: 12px;
  color: #999;
}
</style>
</head>
<body>
<div class="wrapper">
  <img class="avatar" src="https://picsum.photos/200/200" alt="头像">
  <h1 class="name">我的昵称</h1>
  <p class="bio">分享日常 | 记录生活 | 欢迎来访</p>

  <div class="link-group">
    <a href="#" class="link-item"><i class="fa fa-home"></i> 个人主页</a>
    <a href="#" class="link-item"><i class="fa fa-book"></i> 博客文章</a>
    <a href="#" class="link-item"><i class="fa fa-github"></i> GitHub</a>
    <a href="#" class="link-item"><i class="fa fa-weixin"></i> 微信</a>
    <a href="#" class="link-item"><i class="fa fa-envelope"></i> 联系我</a>
  </div>

  <div class="footer">© 2026 · Link3 Style</div>
</div>
</body>
</html>
    <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Link3 风格主页 - 渐变边框</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}
body {
  min-height: 100vh;
  background: #f7f8fa;
  display: flex;
  justify-content: center;
  padding: 50px 20px;
}
.wrapper {
  max-width: 370px;
  width: 100%;
  text-align: center;
}
.avatar {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  border: 3px solid #fff;
  margin-bottom: 16px;
}
.name {
  font-size: 22px;
  color: #222;
  margin-bottom: 6px;
  font-weight: 600;
}
.bio {
  font-size: 14px;
  color: #666;
  margin-bottom: 32px;
}
.link-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.link-item {
  position: relative;
  display: block;
  padding: 14px;
  border-radius: 12px;
  text-decoration: none;
  color: #333;
  font-size: 15px;
  overflow: hidden;
}
.link-item::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f472b6, #60a5fa);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.link-item > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.link-item:hover {
  transform: translateY(-3px);
}
.footer {
  margin-top: 40px;
  font-size: 12px;
  color: #999;
}
</style>
</head>
<body>
<div class="wrapper">
  <img class="avatar" src="https://picsum.photos/200/200" alt="头像">
  <h1 class="name">星光集</h1>
  <p class="bio">心有星光，无畏远方</p>

  <div class="link-group">
    <a href="#" class="link-item"><span><i class="fa fa-star"></i> 精选内容</span></a>
    <a href="#" class="link-item"><span><i class="fa fa-video-camera"></i> 视频空间</span></a>
    <a href="#" class="link-item"><span><i class="fa fa-file"></i> 资源分享</span></a>
    <a href="#" class="link-item"><span><i class="fa fa-question-circle"></i> 常见问题</span></a>
  </div>

  <div class="footer">逐光而行</div>
</div>
</body>
</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{
  min-height:100vh;
  background:linear-gradient(135deg,#74ebd5,#acb6e5);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem;
}
.glass{
  width:100%;
  max-width:320px;
  background:rgba(255,255,255,0.22);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.4);
  border-radius:18px;
  padding:2rem 1.5rem;
  text-align:center;
}
.avatar{
  width:88px;
  height:88px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,0.6);
  margin-bottom:1rem;
}
.name{
  font-size:1.4rem;
  color:#222;
  margin-bottom:0.5rem;
}
.desc{
  color:#444;
  font-size:0.9rem;
  margin-bottom:2rem;
}
.link{
  display:block;
  text-decoration:none;
  color:#222;
  padding:0.7rem;
  margin:0.6rem 0;
  background:rgba(255,255,255,0.4);
  border-radius:10px;
  transition:0.25s;
}
.link:hover{
  background:rgba(255,255,255,0.6);
  transform:translateY(-2px);
}
</style>
</head>
<body>
<div class="glass">
  <img class="avatar" src="https://picsum.photos/200/200">
  <h2 class="name">晚风</h2>
  <p class="desc">风遇山止，船到岸停</p>
  <a href="#" class="link">个人主页</a>
  <a href="#" class="link">作品合集</a>
  <a href="#" class="link">联系我</a>
</div>
</body>
</html>

    <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Link3 风格主页 - 弹窗交互</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}
body {
  min-height: 100vh;
  background: #f6f7f9;
  display: flex;
  justify-content: center;
  padding: 50px 20px;
}
.wrapper {
  max-width: 370px;
  width: 100%;
  text-align: center;
}
.avatar {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  border: 3px solid #fff;
  margin-bottom: 16px;
}
.name {
  font-size: 22px;
  color: #111;
  font-weight: 600;
  margin-bottom: 6px;
}
.bio {
  font-size: 14px;
  color: #666;
  margin-bottom: 32px;
}
.link-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.link-item {
  padding: 14px;
  background: #fff;
  border-radius: 12px;
  text-decoration: none;
  color: #222;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  transition: 0.25s;
  cursor: pointer;
}
.link-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
.footer {
  margin-top: 40px;
  font-size: 12px;
  color: #999;
}
</style>
</head>
<body>
<div class="wrapper">
  <img class="avatar" src="https://picsum.photos/200/200" alt="头像">
  <h1 class="name">互动主页</h1>
  <p class="bio">点击下方栏目查看详情</p>

  <div class="link-group">
    <div class="link-item" onclick="tip1()"><i class="fa fa-user"></i> 关于我</div>
    <div class="link-item" onclick="tip2()"><i class="fa fa-briefcase"></i> 作品集</div>
    <div class="link-item" onclick="tip3()"><i class="fa fa-phone"></i> 联系方式</div>
  </div>

  <div class="footer">Link3 Interactive</div>
</div>

<script>
function tip1(){
  Swal.fire("个人简介","一名热爱创作的爱好者，乐于分享与交流");
}
function tip2(){
  Swal.fire("作品展示","包含设计、代码、图文等各类原创内容");
}
function tip3(){
  Swal.fire("联系提示","可通过留言或邮箱与我取得联系");
}
</script>
</body>
</html>
    <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Link3 风格主页 - 毛玻璃</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}
body {
  min-height: 100vh;
  background: linear-gradient(120deg, #e0c3fc, #8ec5fc);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
.glass-box {
  width: 100%;
  max-width: 370px;
  padding: 40px 25px;
  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 20px;
  text-align: center;
}
.avatar {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.6);
  margin-bottom: 16px;
}
.name {
  font-size: 22px;
  color: #222;
  font-weight: 600;
  margin-bottom: 6px;
}
.bio {
  font-size: 14px;
  color: #444;
  margin-bottom: 32px;
}
.link-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.link-item {
  padding: 14px;
  background: rgba(255,255,255,0.6);
  border-radius: 12px;
  text-decoration: none;
  color: #222;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: 0.25s;
}
.link-item:hover {
  background: rgba(255,255,255,0.8);
  transform: translateY(-3px);
}
.footer {
  margin-top: 40px;
  font-size: 12px;
  color: #555;
}
</style>
</head>
<body>
<div class="glass-box">
  <img class="avatar" src="https://picsum.photos/200/200" alt="头像">
  <h1 class="name">琉璃小站</h1>
  <p class="bio">遇见美好，留住温柔</p>

  <div class="link-group">
    <a href="#" class="link-item"><i class="fa fa-leaf"></i> 生活随笔</a>
    <a href="#" class="link-item"><i class="fa fa-camera-retro"></i> 光影记录</a>
    <a href="#" class="link-item"><i class="fa fa-paper-plane"></i> 私信留言</a>
  </div>

  <div class="footer">Glass Style · 2026</div>
</div>
</body>
</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{
  min-height:100vh;
  background:#fefefe;
  color:#333;
  font-family:"PingFang SC",sans-serif;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:2rem;
}
.avatar{
  width:90px;
  height:90px;
  border-radius:50%;
  object-fit:cover;
  margin-bottom:1rem;
}
.name{
  font-size:1.4rem;
  font-weight:500;
  margin-bottom:0.5rem;
}
.desc{
  font-size:0.9rem;
  color:#777;
  margin-bottom:2rem;
}
.links{
  display:flex;
  gap:1rem;
}
.links a{
  text-decoration:none;
  color:#555;
  font-size:0.9rem;
  padding:0.4rem 1rem;
  border:1px solid #ddd;
  border-radius:999px;
  transition:0.2s;
}
.links a:hover{
  background:#f5f5f5;
  border-color:#bbb;
}
</style>
</head>
<body>
<img class="avatar" src="https://picsum.photos/200/200">
<h2 class="name">青屿</h2>
<p class="desc">慢慢生活，浅浅欢喜</p>
<div class="links">
  <a href="#">博客</a>
  <a href="#">相册</a>
  <a href="#">关于</a>
</div>
</body>
</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>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body{
  min-height:100vh;
  background:#f2f3f5;
  font-family:sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem;
}
.card{
  width:100%;
  max-width:340px;
  background:#fff;
  border-radius:12px;
  padding:2rem;
  text-align:center;
}
.avatar{
  width:84px;
  height:84px;
  border-radius:50%;
  margin-bottom:1rem;
}
.name{
  font-size:1.3rem;
  color:#1f2937;
  margin-bottom:0.3rem;
}
.job{
  font-size:0.85rem;
  color:#6b7280;
  margin-bottom:2rem;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  text-decoration:none;
  color:#fff;
  background:#374151;
  padding:0.6rem 1.2rem;
  border-radius:6px;
  margin:0.4rem;
  font-size:0.9rem;
  transition:0.2s;
}
.btn:hover{
  background:#1f2937;
}
</style>
</head>
<body>
<div class="card">
  <img class="avatar" src="https://picsum.photos/200/200">
  <h2 class="name">Li Ming</h2>
  <p class="job">前端开发者 / 设计师</p>
  <a href="#" class="btn"><i class="fa fa-github"></i> GitHub</a>
  <a href="#" class="btn"><i class="fa fa-briefcase"></i> 作品集</a>
  <a href="#" class="btn"><i class="fa fa-envelope"></i> 邮箱</a>
</div>
</body>
</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{
  min-height:100vh;
  background:#111;
  color:#eee;
  font-family:sans-serif;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:2rem;
}
.avatar{
  width:88px;
  height:88px;
  border-radius:50%;
  opacity:0.9;
  margin-bottom:1rem;
}
.name{
  font-size:1.4rem;
  margin-bottom:0.5rem;
}
.desc{
  color:#999;
  font-size:0.9rem;
  margin-bottom:2rem;
}
.links a{
  display:inline-block;
  color:#ccc;
  text-decoration:none;
  border:1px solid #333;
  padding:0.5rem 1rem;
  border-radius:4px;
  margin:0 0.3rem 0.6rem;
  transition:0.2s;
}
.links a:hover{
  border-color:#666;
  color:#fff;
}
</style>
</head>
<body>
<img class="avatar" src="https://picsum.photos/200/200">
<h2 class="name">Dark User</h2>
<p class="desc">Keep coding, keep thinking</p>
<div class="links">
  <a href="#">Blog</a>
  <a href="#">Repo</a>
  <a href="#">Links</a>
  <a href="#">About</a>
</div>
</body>
</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:#f7f8fa;
  font-family:sans-serif;
  padding:2.5rem 1.5rem;
}
.wrap{
  max-width:360px;
  margin:0 auto;
  text-align:center;
}
.head{
  margin-bottom:2rem;
}
.head h1{
  font-size:1.6rem;
  color:#222;
  margin-bottom:0.4rem;
}
.head p{
  color:#666;
  font-size:0.9rem;
}
.card-item{
  background:#fff;
  border-radius:10px;
  padding:1rem;
  margin:0.8rem 0;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
  text-decoration:none;
  color:#333;
  display:block;
  transition:0.2s;
}
.card-item:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
}
</style>
</head>
<body>
<div class="wrap">
  <div class="head">
    <h1>星野小屋</h1>
    <p>记录点滴，收藏美好</p>
  </div>
  <a href="#" class="card-item">📖 文章专栏</a>
  <a href="#" class="card-item">🎨 创意作品</a>
  <a href="#" class="card-item">🎵 音乐清单</a>
  <a href="#" class="card-item">✉️ 联系留言</a>
</div>
</body>
</html>

    <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D翻转卡片主页</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
<style>
* {margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif;}
body {
  min-height: 100vh;
  background: #f0f2f5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.flip-container {
  width: 100%;
  max-width: 350px;
  height: 420px;
  perspective: 1000px;
}
.flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.flip-container:hover .flipper {transform: rotateY(180deg);}
.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  padding: 30px;
  backface-visibility: hidden;
  text-align: center;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}
.front {background: #ffffff;}
.back {
  background: #2d3748;
  color: #fff;
  transform: rotateY(180deg);
}
.avatar {width: 110px; height: 110px; border-radius: 50%; margin: 20px 0;}
.name {font-size: 22px; margin-bottom: 10px;}
.link {
  display: inline-block;
  margin: 8px;
  width: 44px;
  height: 44px;
  line-height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  color: #fff;
  font-size: 18px;
  text-decoration: none;
}
</style>
</head>
<body>
<div class="flip-container">
  <div class="flipper">
    <div class="front">
      <img class="avatar" src="https://picsum.photos/200/200">
      <h3 class="name">正面主页</h3>
      <p>鼠标悬浮翻转查看更多信息</p>
    </div>
    <div class="back">
      <h3 class="name">关于我</h3>
      <p style="margin:20px 0;">前端爱好者 / 自由创作者</p>
      <a href="#" class="link"><i class="fa fa-github"></i></a>
      <a href="#" class="link"><i class="fa fa-weixin"></i></a>
      <a href="#" class="link"><i class="fa fa-envelope"></i></a>
    </div>
  </div>
</div>
</body>
</html>
    © 版权声明
    文章版权归作者所有，未经允许请勿转载。
    THE END
    未分类
    喜欢就支持一下吧
    点赞8 分享
    小麦的头像-admin
    V免签 三页美化-admin
    V免签 三页美化
    V免签 三页美化
    18天前 52
    22222222222222222222222222-admin
    22222222222222222222222222
    22222222222222222222222222
    17天前 49
    QW-1899-admin
    QW-1899
    QW-1899
    19天前 42
    相关推荐
    1234-admin
    1234
    1234
    17天前 59
    V免签 三页美化-admin
    V免签 三页美化
    V免签 三页美化
    18天前 52
    QW-1899-admin
    QW-1899
    QW-1899
    19天前 42
    评论 抢沙发

    请登录后发表评论

      暂无评论内容