模板特点

  1. 现代设计风格: 采用简洁、大气的布局，以白色和深蓝色为主色调，辅以渐变和动画，营造专业、可信赖的品牌形象。
  2. 响应式布局: 完美适配桌面、平板和手机等各种设备,确保在任何屏幕上都有出色的浏览体验。
  3. 丰富的交互动效: 使用CSS3和原生JavaScript实现了平滑的滚动效果、悬浮动画和交互式内容展示,提升用户体验。
  4. 清晰的服务展示: 将核心服务（网站建设、小程序开发、UI/UX设计、数字营销）以卡片形式清晰呈现,并配有图标和详细说明。
  5. 专业的团队展示: 展示团队成员的头像、姓名和职位,增加团队的亲和力和专业性。
  6. 项目案例: 通过网格布局展示成功案例，点击可查看详情,直观展示公司的实力。
  7. 清晰的行动号召: 在多个关键位置（如首页顶部、服务页底部）设置了醒目的“联系我们”按钮,引导潜在客户。

使用说明

  1. 下载代码: 将下面的完整代码复制到一个名为 index.html 的文件中。
  2. 准备资源: 您需要准备以下图片资源并放在 images 文件夹下：
    • logo.png: 网站Logo
    • hero-bg.jpg: 首页大图背景
    • service-*.png: 服务图标 (service1.png, service2.png, service3.png, service4.png)
    • team-*.jpg: 团队成员头像 (team1.jpg, team2.jpg, team3.jpg)
    • case-*.jpg: 案例缩略图 (case1.jpg, case2.jpg, case3.jpg, case4.jpg)
  3. : 打开 index.html 文件，根据您的实际情况修改文本内容、链接和图片路径。
  4. 部署: 将 index.html 和 images 文件夹上传到您的服务器即可访问。

完整HTML5代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">织梦猫 - 高端网络服务机构 | 专业定制网站、小程序、UI设计与数字营销</title>
    <meta name="description" content="织梦猫是您值得信赖的高端网络服务机构，专注于提供网站建设、小程序开发、UI/UX设计及数字营销等一站式解决方案，助力您的品牌在数字时代腾飞。">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* --- 全局样式重置与基础设置 --- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html {
            scroll-behavior: smooth;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f8f9fa;
        }
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        h1, h2, h3 {
            font-weight: 700;
            margin-bottom: 20px;
            line-height: 1.2;
        }
        h1 { font-size: 3rem; }
        h2 { font-size: 2.5rem; color: #1a365d; }
        h3 { font-size: 1.5rem; }
        p {
            margin-bottom: 15px;
            color: #4a5568;
        }
        .btn {
            display: inline-block;
            padding: 12px 30px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #fff;
            text-decoration: none;
            border-radius: 50px;
            font-weight: 600;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: none;
            cursor: pointer;
            font-size: 1rem;
        }
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
        }
        .btn-outline {
            background: transparent;
            border: 2px solid #667eea;
            color: #667eea;
        }
        .btn-outline:hover {
            background: #667eea;
            color: #fff;
        }
        .section {
            padding: 80px 0;
        }
        .section-title {
            text-align: center;
            margin-bottom: 50px;
        }
        .section-title h2 {
            position: relative;
            display: inline-block;
        }
        .section-title h2::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 4px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 2px;
        }
        /* --- 导航栏 --- */
        header {
            background: #fff;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            transition: all 0.3s ease;
        }
        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
        }
        .logo {
            font-size: 1.5rem;
            font-weight: 800;
            color: #1a365d;
            text-decoration: none;
        }
        .logo i {
            color: #667eea;
            margin-right: 8px;
        }
        .nav-links {
            display: flex;
            list-style: none;
        }
        .nav-links li {
            margin-left: 30px;
        }
        .nav-links a {
            text-decoration: none;
            color: #4a5568;
            font-weight: 500;
            transition: color 0.3s ease;
            position: relative;
        }
        .nav-links a:hover {
            color: #667eea;
        }
        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: #667eea;
            transition: width 0.3s ease;
        }
        .nav-links a:hover::after {
            width: 100%;
        }
        /* --- 英雄区域 --- */
        .hero {
            background: linear-gradient(rgba(26, 54, 93, 0.8), rgba(26, 54, 93, 0.8)), url('images/hero-bg.jpg') no-repeat center center/cover;
            height: 100vh;
            display: flex;
            align-items: center;
            text-align: center;
            color: #fff;
            margin-top: 70px; /* 为固定导航栏留出空间 */
        }
        .hero-content h1 {
            font-size: 3.5rem;
            margin-bottom: 20px;
            animation: fadeInUp 1s ease;
        }
        .hero-content p {
            font-size: 1.2rem;
            margin-bottom: 30px;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
            animation: fadeInUp 1s ease 0.2s;
            animation-fill-mode: both;
        }
        .hero-buttons {
            animation: fadeInUp 1s ease 0.4s;
            animation-fill-mode: both;
        }
        .hero-buttons .btn {
            margin: 0 10px;
        }
        /* --- 服务区域 --- */
        .services {
            background: #fff;
        }
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
        }
        .service-card {
            background: #f8f9fa;
            padding: 40px 30px;
            text-align: center;
            border-radius: 10px;
            transition: transform 0.
织梦猫html5高端网络服务机构网站模板
（图片来源网络，侵删）