AI智能摘要
看着自己粗糙的博客首页，你是否也羡慕过那些精致如艺术品的前端设计？很多技术小白以为重构主题需要精通JS和PHP，结果一碰代码就头大，进度条原地停滞。其实，惊艳的视觉核心往往藏在CSS的排版逻辑与HTML的结构细节里。这篇笔记拆解了高颜值导航栏与首屏的构建思路，哪怕你只懂基础标签，也能通过调整样式参数实现质的飞跃。别再被复杂的框架劝退，那个让页面瞬间高级的关键样式，可能比你想象的更简单。
— AI 生成的文章内容摘要
最近想重构自己的博客，奈何自己是小白技术有限，网上翻了很多资料和信息，发现一个前端UI设计师设计的前端框架，看得自己真的非常喜欢，但是是博主自己设计的框架，我的博客都是wordpress,我也只是略懂些hyml和css,php也马虎看得懂一点点，想把这套框架改造成一套wordpress主题，只是不懂js，PHP一知半解，今天不上班折腾了半天可以说是没有任何进度，现在边学边码代码吧。
以下是导航栏跟首屏，代码HTML如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>YIKE 时光</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar">
<div class="nav-left">
<div class="logo">YX</div>
</div>
<div class="nav-center">
<a href="#" class="active">首页</a>
<a href="#">文章</a>
<a href="#">随记</a>
<a href="#">图库</a>
<a href="#">下载</a>
<a href="#">关于</a>
<a href="#" class="red-dot">逸刻</a>
</div>
<div class="nav-right">
<div class="search-box">
<input type="text" placeholder="文章/图库/日记/资源" />
<button class="search-btn">🔍</button>
</div>
<button class="theme-btn">🌓</button>
</div>
</nav>
<!-- Hero 首屏 -->
<section class="hero">
<div class="hero-left">
<h1 class="title">
<span class="title-bold">YIKE</span>
<span class="title-light">时光</span>
</h1>
<p class="slogan">
慢下脚步<br>
让心灵照亮前行的路
</p>
<div class="scroll-btn">↓</div>
<div class="related-links">
<span>相关地址</span>
<button class="link-btn">🐱</button>
<button class="link-btn">♻</button>
</div>
</div>
<div class="hero-right">
<div class="avatar-container">
<div class="avatar-img"></div>
<div class="avatar-bg"></div>
</div>
<div class="float-menu">
<div class="menu-item">
<div class="menu-icon blue"></div>
<span>留言墙</span>
</div>
<div class="menu-item">
<div class="menu-icon colorful"></div>
<span>俄罗斯方块</span>
</div>
<div class="menu-item">
<div class="menu-icon yike"></div>
<span>Yike Design</span>
</div>
</div>
</div>
</section>
<script src="csript.js"></script>
</body>
</html>以下是CSS样式代码：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}
body {
background-color: #f5f2eb;
color: #111;
overflow-x: hidden;
}
/* 导航栏 */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 24px;
background: rgba(245, 242, 235, 0.95);
backdrop-filter: blur(8px);
z-index: 100;
}
.logo {
font-size: 24px;
font-weight: bold;
color: #007bff;
}
.nav-center a {
margin: 0 16px;
text-decoration: none;
color: #666;
font-size: 14px;
}
.nav-center a.active {
color: #111;
font-weight: 500;
position: relative;
}
.nav-center a.active::after {
content: "";
position: absolute;
bottom: -6px;
left: 0;
width: 100%;
height: 2px;
background: #007bff;
}
.nav-center .red-dot::after {
content: "";
position: absolute;
top: -4px;
right: -8px;
width: 6px;
height: 6px;
background: red;
border-radius: 50%;
}
.nav-right {
display: flex;
align-items: center;
gap: 16px;
}
.search-box {
display: flex;
align-items: center;
background: white;
border-radius: 8px;
padding: 6px 10px;
border: 1px solid #eee;
}
.search-box input {
border: none;
outline: none;
padding: 4px;
font-size: 13px;
}
.theme-btn {
border: none;
background: none;
font-size: 20px;
cursor: pointer;
}
/* Hero 区域 */
.hero {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 100vh;
padding: 80px 12%;
}
.hero-left {
flex: 1;
}
.title {
font-size: 90px;
font-weight: 900;
line-height: 1;
margin-bottom: 30px;
}
.title-bold {
color: #111;
}
.title-light {
color: transparent;
-webkit-text-stroke: 2px #111;
font-weight: 300;
}
.slogan {
font-size: 40px;
line-height: 1.4;
font-weight: 600;
margin-bottom: 60px;
}
.scroll-btn {
width: 60px;
height: 100px;
background: #00b4d8;
border-radius: 20px;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
cursor: pointer;
margin-bottom: 60px;
}
.related-links {
display: flex;
align-items: center;
gap: 12px;
font-size: 13px;
color: #666;
}
.link-btn {
width: 32px;
height: 32px;
border-radius: 8px;
border: none;
background: #eee;
cursor: pointer;
}
/* 右侧头像和菜单 */
.hero-right {
position: relative;
flex: 1;
display: flex;
justify-content: center;
}
.avatar-container {
position: relative;
}
.avatar-bg {
position: absolute;
width: 500px;
height: 500px;
background: linear-gradient(135deg, #ffd6a5 0%, #fdffb6 100%);
border-radius: 50%;
opacity: 0.3;
top: -40px;
right: -40px;
z-index: 0;
}
.avatar-img {
width: 450px;
height: 550px;
background: url('https://picsum.photos/id/237/450/550') center/cover no-repeat;
border-radius: 20px;
position: relative;
z-index: 1;
}
.float-menu {
position: absolute;
right: 20px;
top: 100px;
display: flex;
flex-direction: column;
gap: 16px;
}
.menu-item {
background: white;
border-radius: 12px;
padding: 16px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
cursor: pointer;
transition: transform 0.2s;
}
.menu-item:hover {
transform: translateY(-4px);
}
.menu-icon {
width: 40px;
height: 40px;
border-radius: 8px;
}
.menu-icon.blue {
background: #4361ee;
}
.menu-icon.colorful {
background: conic-gradient(#ff9a9e, #fad0c4, #a18cd1, #fbc2eb);
}
.menu-icon.yike {
background: #4361ee;
}
以下是JS代码：
// 导航栏滚动效果
window.addEventListener('scroll', function () {
const navbar = document.querySelector('.navbar');
if (window.scrollY > 50) {
navbar.style.background = 'rgba(245, 242, 235, 0.98)';
navbar.style.boxShadow = '0 2px 10px rgba(0,0,0,0.05)';
} else {
navbar.style.background = 'rgba(245, 242, 235, 0.95)';
navbar.style.boxShadow = 'none';
}
});
// 平滑滚动按钮
document.querySelector('.scroll-btn').addEventListener('click', function () {
window.scrollTo({
top: window.innerHeight,
behavior: 'smooth'
});
});
// 悬浮菜单 hover 效果
document.querySelectorAll('.menu-item').forEach(item => {
item.addEventListener('mouseenter', function () {
this.style.boxShadow = '0 8px 20px rgba(0,0,0,0.1)';
});
item.addEventListener('mouseleave', function () {
this.style.boxShadow = '0 4px 12px rgba(0,0,0,0.05)';
});
});
代码输出效果图：
没有准备图片，先用一只狗图片替代一下。
当然了，效果肯定跟原博主的有很大出入。
以下是原博主设计稿截图：
原博主网站直达：传送
我也不知道原博主网站速度这么慢。
