一个非常好看的网站前端首页头部设计笔记（一）

2026年6月10日教程笔记, 文章, 随笔笔记喵部落~~

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)';
    });
});

代码输出效果图：

没有准备图片，先用一只狗图片替代一下。

当然了，效果肯定跟原博主的有很大出入。

以下是原博主设计稿截图：

原博主网站直达：传送

我也不知道原博主网站速度这么慢。

免责声明：

1、本文部分内容参考网络资料，版权归原作者所有。如涉及侵权，请联系作者。
2、原创内容转载请注明出处：《一个非常好看的网站前端首页头部设计笔记（一）》— 喵部落~~，禁止用于商业用途。
3、本站资源仅供个人学习交流，不得用于商业或非法目的；由此引发的纠纷或损失，由使用者自行承担法律责任。
4、所有内容按“现状”提供，作者不承担任何直接或间接责任。
5、如有疑问或需授权，请联系站长邮箱：82675617@qq.com。