儿童摄影网页代码如何适配不同设备？-网页设计-锦华智联科技

引人注目的首页：使用一张温馨的儿童照片作为背景,有吸引人的标题和号召性用语。
作品展示：一个精美的作品集画廊,展示不同风格的儿童摄影作品。
服务介绍：清晰列出您提供的摄影套餐和价格。
关于我们：简单介绍摄影师或工作室的理念,增加信任感。
联系与预约：方便的联系方式和预约表单。

这个网页将是响应式的，意味着它在电脑、平板和手机上都能完美显示。

第一步：准备文件

请在您的电脑上创建一个新的文件夹，child-photography-website，在这个文件夹里,创建以下三个文件：

index.html (网页的结构)
style.css (网页的样式)
script.js (网页的交互功能)

您需要准备几张儿童摄影作品的照片，命名为 hero-bg.jpg, gallery1.jpg, gallery2.jpg, gallery3.jpg, gallery4.jpg, gallery5.jpg, gallery6.jpg，并将它们也放入同一个文件夹中，您可以从 Unsplash 或 Pexels 等免费图库网站搜索 "child photography" 来获取高质量图片。

第二步：HTML 代码 (`index.html`)

这是网页的骨架，将以下代码复制并粘贴到您的 index.html 文件中。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">童梦光影 - 专业儿童摄影</title>
    <link rel="stylesheet" href="style.css">
    <!-- 引入一个图标库，方便使用图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <!-- 导航栏 -->
    <header>
        <a href="#" class="logo">童梦光影</a>
        <nav class="navbar">
            <a href="#home">首页</a>
            <a href="#gallery">作品集</a>
            <a href="#services">服务</a>
            <a href="#about">关于我们</a>
            <a href="#contact">联系我们</a>
        </nav>
        <div class="menu-toggle">
            <i class="fas fa-bars"></i>
        </div>
    </header>
    <!-- 首页英雄区域 -->
    <section id="home" class="hero">
        <div class="hero-content">
            <h1>用镜头，定格纯真童年</h1>
            <p>我们专注于为您的孩子创造最自然、最美好的回忆。</p>
            <a href="#contact" class="cta-button">立即预约</a>
        </div>
    </section>
    <!-- 作品集 -->
    <section id="gallery" class="gallery">
        <h2 class="section-title">作品集</h2>
        <div class="gallery-container">
            <div class="gallery-item">
                <img src="gallery1.jpg" alt="儿童摄影作品1">
            </div>
            <div class="gallery-item">
                <img src="gallery2.jpg" alt="儿童摄影作品2">
            </div>
            <div class="gallery-item">
                <img src="gallery3.jpg" alt="儿童摄影作品3">
            </div>
            <div class="gallery-item">
                <img src="gallery4.jpg" alt="儿童摄影作品4">
            </div>
            <div class="gallery-item">
                <img src="gallery5.jpg" alt="儿童摄影作品5">
            </div>
            <div class="gallery-item">
                <img src="gallery6.jpg" alt="儿童摄影作品6">
            </div>
        </div>
    </section>
    <!-- 服务介绍 -->
    <section id="services" class="services">
        <h2 class="section-title">我们的服务</h2>
        <div class="services-container">
            <div class="service-box">
                <i class="fas fa-baby"></i>
                <h3>新生儿摄影</h3>
                <p>在宝宝出生10-15天内，捕捉他们最安静、最可爱的睡颜。</p>
            </div>
            <div class="service-box">
                <i class="fas fa-child"></i>
                <h3>百天/周岁照</h3>
                <p>记录宝宝成长路上的重要里程碑，留下珍贵的成长印记。</p>
            </div>
            <div class="service-box">
                <i class="fas fa-camera-retro"></i>
                <h3>亲子/家庭照</h3>
                <p>全家福拍摄，定格家庭的温馨与幸福，让爱意永恒。</p>
            </div>
        </div>
    </section>
    <!-- 关于我们 -->
    <section id="about" class="about">
        <h2 class="section-title">关于我们</h2>
        <div class="about-content">
            <div class="about-text">
                <p>您好，我是摄影师 [您的名字]，我热爱孩子，也热爱摄影，我相信，每个孩子都是独一无二的天使，他们的笑容和天真无邪的瞬间，是这个世界上最美的风景。</p>
                <p>我们的工作室致力于创造一个轻松、愉快的环境，让孩子们在玩耍中自然流露，我们则用镜头捕捉这些最真实、最动人的瞬间，我们不追求刻板的摆拍，只专注于记录属于您和孩子独一无二的美好故事。</p>
            </div>
            <div class="about-image">
                <!-- 这里可以放一张摄影师或工作室的照片 -->
                <img src="https://via.placeholder.com/400x500" alt="摄影师照片">
            </div>
        </div>
    </section>
    <!-- 联系与预约 -->
    <section id="contact" class="contact">
        <h2 class="section-title">联系我们</h2>
        <div class="contact-container">
            <div class="contact-info">
                <h3>联系方式</h3>
                <p><i class="fas fa-phone"></i> 电话: 138-8888-8888</p>
                <p><i class="fas fa-envelope"></i> 邮箱: hello@tongmeng.com</p>
                <p><i class="fas fa-map-marker-alt"></i> 地址: 北京市朝阳区某某街道123号</p>
                <div class="social-links">
                    <a href="#"><i class="fab fa-weixin"></i></a>
                    <a href="#"><i class="fab fa-weibo"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                </div>
            </div>
            <div class="contact-form">
                <h3>在线预约</h3>
                <form id="bookingForm">
                    <input type="text" name="name" placeholder="您的姓名" required>
                    <input type="tel" name="phone" placeholder="您的电话" required>
                    <input type="email" name="email" placeholder="您的邮箱" required>
                    <textarea name="message" placeholder="请描述您的拍摄需求或期望" rows="5"></textarea>
                    <button type="submit" class="cta-button">发送预约</button>
                </form>
            </div>
        </div>
    </section>
    <!-- 页脚 -->
    <footer>
        <p>&copy; 2025 童梦光影. 保留所有权利.</p>
    </footer>
    <!-- 返回顶部按钮 -->
    <a href="#" class="back-to-top" id="backToTop">
        <i class="fas fa-arrow-up"></i>
    </a>
    <script src="script.js"></script>
</body>
</html>

第三步：CSS 样式 (`style.css`)

这是网页的“化妆师”，决定了网页的颜色、布局和外观，将以下代码复制并粘贴到您的 style.css 文件中。

/* --- 全局样式 --- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
:root {
    --primary-color: #ff6b6b;
    --secondary-color: #4ecdc4;
    --text-color: #333;
    --bg-color: #f8f9fa;
    --white: #ffffff;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Noto Sans SC', sans-serif;
}
html {
    scroll-behavior: smooth;
}
body {
    color: var(--text-color);
    line-height: 1.6;
}
.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: var(--text-color);
}
.cta-button {
    display: inline-block;
    background-color: var(--primary-color);
    color: var(--white);
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 500;
    transition: transform 0.3s ease, background-color 0.3s ease;
}
.cta-button:hover {
    transform: translateY(-3px);
    background-color: #ff5252;
}
/* --- 导航栏 --- */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 100px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    transition: padding 0.3s ease;
}
header.sticky {
    padding: 15px 100px;
}
header .logo {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
}
header .navbar a {
    color: var(--text-color);
    text-decoration: none;
    font-weight: 500;
    margin-left: 30px;
    transition: color 0.3s ease;
}
header .navbar a:hover {
    color: var(--primary-color);
}
.menu-toggle {
    display: none;
    cursor: pointer;
}
.menu-toggle i {
    font-size: 1.8rem;
    color: var(--text-color);
}
/* --- 首页英雄区域 --- */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('hero-bg.jpg') no-repeat center center/cover;
    position: relative;
    text-align: center;
    color: var(--white);
}
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}
.hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    padding: 0 20px;
}
.hero-content h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}
.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
}
/* --- 作品集 --- */
.gallery {
    padding: 80px 100px;
    background-color: var(--bg-color);
}
.gallery-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}
.gallery-item img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.3s ease;
}
.gallery-item img:hover {
    transform: scale(1.05);
}
/* --- 服务介绍 --- */
.services {
    padding: 80px 100px;
    text-align: center;
}
.services-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}
.service-box {
    padding: 30px;
    background-color: var(--white);
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}
.service-box:hover {
    transform: translateY(-10px);
}
.service-box i {
    font-size: 3rem;
    color: var(--secondary-color);
    margin-bottom: 20px;
}
.service-box h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
}
/* --- 关于我们 --- */
.about {
    padding: 80px 100px;
    background-color: var(--bg-color);
}
.about-content {
    display: flex;
    align-items: center;
    gap: 50px;
    max-width: 1200px;
    margin: 0 auto;
}
.about-text {
    flex: 1;
}
.about-text p {
    margin-bottom: 20px;
}
.about-image {
    flex: 1;
}
.about-image img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
/* --- 联系我们 --- */
.contact {
    padding: 80px 100px;
    text-align: center;
}
.contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    max-width: 1000px;
    margin: 0 auto;
}
.contact-info p {
    margin-bottom: 15px;
    font-size: 1.1rem;
}
.social-links {
    margin-top: 20px;
}
.social-links a {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    background-color: var(--primary-color);
    color: var(--white);
    border-radius: 50%;
    margin: 0 10px;
    transition: background-color 0.3s ease;
}
.social-links a:hover {
    background-color: var(--secondary-color);
}
.contact-form {
    text-align: left;
}
.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
    font-family: 'Noto Sans SC', sans-serif;
}
.contact-form textarea {
    resize: vertical;
}
/* --- 页脚 --- */
footer {
    text-align: center;
    padding: 20px;
    background-color: #333;
    color: var(--white);
}
/* --- 返回顶部按钮 --- */
.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: var(--primary-color);
    color: var(--white);
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    font-size: 1.2rem;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.back-to-top.active {
    opacity: 1;
    visibility: visible;
}
/* --- 响应式设计 --- */
@media (max-width: 991px) {
    header, .hero, .gallery, .services, .about, .contact {
        padding: 50px 20px;
    }
    .about-content {
        flex-direction: column;
    }
    .contact-container {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    header {
        padding: 15px 20px;
    }
    header .navbar {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: var(--white);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: right 0.5s ease;
    }
    header .navbar.active {
        right: 0;
    }
    header .navbar a {
        margin: 10px 0;
        font-size: 1.5rem;
    }
    .menu-toggle {
        display: block;
    }
    .hero-content h1 {
        font-size: 2.5rem;
    }
    .section-title {
        font-size: 2rem;
    }
}

第四步：JavaScript 交互 (`script.js`)

这是网页的“大脑”，负责处理一些交互效果，比如导航栏滚动变化、移动端菜单切换和返回顶部按钮，将以下代码复制并粘贴到您的 script.js 文件中。

// 移动端菜单切换
const menuToggle = document.querySelector('.menu-toggle');
const navbar = document.querySelector('.navbar');
menuToggle.addEventListener('click', () => {
    navbar.classList.toggle('active');
});
// 点击导航链接后关闭移动端菜单
navbar.querySelectorAll('a').forEach(link => {
    link.addEventListener('click', () => {
        navbar.classList.remove('active');
    });
});
// 导航栏滚动效果
window.addEventListener('scroll', () => {
    const header = document.querySelector('header');
    const backToTop = document.getElementById('backToTop');
    if (window.scrollY > 100) {
        header.classList.add('sticky');
        backToTop.classList.add('active');
    } else {
        header.classList.remove('sticky');
        backToTop.classList.remove('active');
    }
});
// 返回顶部按钮
document.getElementById('backToTop').addEventListener('click', (e) => {
    e.preventDefault();
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
});
// 表单提交处理 (这里只是前端演示，实际需要后端支持)
document.getElementById('bookingForm').addEventListener('submit', function(e) {
    e.preventDefault();
    // 获取表单数据
    const formData = new FormData(this);
    const name = formData.get('name');
    const phone = formData.get('phone');
    const email = formData.get('email');
    const message = formData.get('message');
    // 这里可以添加表单验证逻辑
    if (!name || !phone || !email) {
        alert('请填写所有必填项！');
        return;
    }
    // 模拟提交成功
    alert(`感谢您的预约，${name}！我们会尽快与您联系，`);
    // 清空表单
    this.reset();
});

如何使用和下一步

保存文件：确保三个文件 (index.html, style.css, script.js) 和所有图片都在同一个文件夹中。
打开网页：用浏览器（如 Chrome, Firefox, Edge）打开 index.html 文件,您就可以看到完整的网站了。
个性化修改：
- ：在 index.html 中，将 [您的名字]、电话、邮箱、地址等信息替换成您自己的。
- 图片：用您自己的摄影作品替换掉 gallery1.jpg 到 gallery6.jpg 以及 hero-bg.jpg 和 about 部分的占位图。
- 颜色：如果您想改变网站的主色调，可以修改 style.css 文件顶部的 root 里的 --primary-color 和 --secondary-color 的值。
- 功能：当前的“在线预约”表单只会在前端弹出一个提示，如果您希望它能真正发送邮件，需要配置一个后端服务（如 PHP, Node.js 等），这超出了纯HTML/CSS/JS的范围。

这个网页为您提供了一个非常专业和美观的起点，您可以根据自己的品牌和需求进行进一步的定制和优化,祝您的儿童摄影事业一帆风顺！

儿童摄影网页代码如何适配不同设备？

第一步：准备文件

第二步：HTML 代码 (index.html)

第三步：CSS 样式 (style.css)

第四步：JavaScript 交互 (script.js)

如何使用和下一步

第二步：HTML 代码 (`index.html`)

第三步：CSS 样式 (`style.css`)

第四步：JavaScript 交互 (`script.js`)