东莞心理咨询中心建自己的心理咨询官网！

网站头部（Header）代码模板：

<html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="东莞专业心理咨询服务，东莞辰诉心理咨询中心-提供情绪管理、婚姻家庭、青少年心理辅导，持证咨询师一对一保密咨询"> <meta name="keywords" content="东莞心理咨询,东莞心理医生,情绪疏导,婚姻咨询,青少年心理"> <title>东莞心理咨询中心 | 专业心理健康服务 | 辰诉心理咨询中心</title>

<!-- 预连接优化 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="//api.map.baidu.com">

<style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    
    /* 头部导航 */
    .header {
        background: #fff;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        position: sticky;
        top: 0;
        z-index: 1000;
    }
    
    .header-top {
        background: #667eea;
        color: white;
        padding: 8px 0;
        font-size: 14px;
    }
    
    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }
    
    .header-main {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 0;
    }
    
    .logo {
        font-size: 24px;
        font-weight: bold;
        color: #333;
        text-decoration: none;
    }
    
    .logo span {
        color: #667eea;
    }
    
    .nav {
        display: flex;
        gap: 40px;
        list-style: none;
    }
    
    .nav a {
        text-decoration: none;
        color: #555;
        font-size: 16px;
        transition: color 0.3s;
    }
    
    .nav a:hover {
        color: #667eea;
    }
    
    .header-cta {
        background: #667eea;
        color: white;
        padding: 10px 25px;
        border-radius: 25px;
        text-decoration: none;
        font-size: 14px;
    }
    
    /* 移动端适配 */
    @media (max-width: 768px) {
        .nav { display: none; }
        .header-main { padding: 10px 0; }
    }
</style>

<!-- 主导航 -->
<div class="container">
    <div class="header-main">
        <a href="/" class="logo">
            心晴<span>心理</span>
        </a>
        
        <nav>
            <ul class="nav">
                <li><a href="/">首页</a></li>
                <li><a href="/services">服务项目</a></li>
                <li><a href="/team">咨询师团队</a></li>
                <li><a href="/cases">成功案例</a></li>
                <li><a href="/about">关于我们</a></li>
            </ul>
        </nav>
        
        <a href="#book" class="header-cta">立即预约</a>
    </div>
</div>

posted @ 2026-03-13 14:29 去年冬天见了一面阅读(5) 评论(0) 收藏举报

刷新页面返回顶部

cnbo

东莞心理咨询中心建自己的心理咨询官网！

公告