当前位置：首页 > 行业动态 > 正文

html健身网站代码

以下是一个基础的HTML健身网站模板（含CSS）：，“ html，，，， 健身指南， ， body{font:16px/1.5 '微软雅黑';margin:0;padding:20px}， header{text-align:center;background:#2c3e50;color:white;padding:20px}， nav a{margin:10px 15px;text-decoration:none;color:#34495e}， .content{max-width:800px;margin:auto}， footer{text-align:center;font-size:14px}， ，，， 健康生活， 训练计划科学饮食关于我们， ， 每日训练方案， 周一：胸肌训练 | 周二：背部强化...， ， © 2023 FitnessSite 版权所有，，，“

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="styles.css">
</head>
<body>
    <!-导航栏 -->
    <nav>
        <ul>
            <li><a href="#home">首页</a></li>
            <li><a href="#training">训练计划</a></li>
            <li><a href="#diet">饮食建议</a></li>
            <li><a href="#course">课程预约</a></li>
            <li><a href="#community">社区</a></li>
            <li><a href="#about">关于我们</a></li>
        </ul>
    </nav>
    <!-首页轮播图 -->
    <section id="home">
        <div class="carousel">
            <img src="image1.jpg" alt="健身场景1">
            <img src="image2.jpg" alt="健身场景2">
            <img src="image3.jpg" alt="健身场景3">
        </div>
    </section>
    <!-训练计划模块 -->
    <section id="training">
        <h2>热门训练计划</h2>
        <div class="plan-container">
            <div class="plan-card">
                <h3>减脂计划</h3>
                <p>每周5次有氧+力量训练</p>
            </div>
            <div class="plan-card">
                <h3>增肌计划</h3>
                <p>分化训练+高蛋白饮食</p>
            </div>
        </div>
    </section>
    <!-饮食建议模块 -->
    <section id="diet">
        <h2>今日推荐食谱</h2>
        <table>
            <thead>
                <tr>
                    <th>餐次</th>
                    <th>蛋白质</th>
                    <th>碳水</th>
                    <th>脂肪</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>早餐</td>
                    <td>鸡蛋+牛奶</td>
                    <td>全麦面包</td>
                    <td>坚果</td>
                </tr>
                <tr>
                    <td>午餐</td>
                    <td>鸡胸肉</td>
                    <td>糙米</td>
                    <td>橄榄油</td>
                </tr>
            </tbody>
        </table>
    </section>
    <!-课程预约表单 -->
    <section id="course">
        <h2>预约私教课程</h2>
        <form id="booking-form">
            <label>姓名：<input type="text" required></label><br>
            <label>电话：<input type="tel" required></label><br>
            <label>课程时间：<input type="datetime-local" required></label><br>
            <button type="submit">提交预约</button>
        </form>
    </section>
    <!-健康数据可视化 -->
    <section id="health-data">
        <canvas id="weight-chart"></canvas>
    </section>
    <!-社区互动 -->
    <section id="community">
        <h2>会员留言板</h2>
        <div id="message-board">
            <input type="text" id="new-message" placeholder="分享你的健身心得">
            <button id="post-btn">发布</button>
        </div>
        <ul id="message-list"></ul>
    </section>
    <footer>
        <p>© 2023 健身之家 | 联系电话：400-123-4567</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>

CSS样式设计

/ 基础样式重置 /
 {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/ 全局变量定义 /
:root {
    --primary-color: #2E7D32;
    --secondary-color: #F7C924;
    --font-family: 'Microsoft YaHei', sans-serif;
}
/ 导航栏样式 /
nav {
    background-color: var(--primary-color);
    padding: 1rem;
}
nav ul {
    display: flex;
    list-style: none;
    justify-content: center;
}
nav ul li a {
    color: white;
    margin: 0 1.5rem;
    text-decoration: none;
}
/ 轮播图样式 /
.carousel {
    position: relative;
    width: 100%;
    max-height: 400px;
    overflow: hidden;
}
.carousel img {
    width: 100%;
    display: none;
}
.carousel img.active {
    display: block;
}
/ 训练计划卡片 /
.plan-container {
    display: flex;
    justify-content: space-around;
}
.plan-card {
    border: 1px solid var(--secondary-color);
    padding: 1.5rem;
    width: 45%;
    background-color: rgba(255,255,255,0.8);
}
/ 表格样式 /
table {
    width: 80%;
    margin: 0 auto;
    border-collapse: collapse;
}
th, td {
    border: 1px solid var(--primary-color);
    padding: 0.8rem;
    text-align: center;
}
/ 表单样式 /
form label {
    display: block;
    margin: 0.5rem 0;
}
form input, form button {
    width: 100%;
    padding: 0.8rem;
    margin: 0.3rem 0;
}
form button {
    background-color: var(--primary-color);
    color: white;
}

JavaScript交互功能

// 轮播图自动切换
let currentIndex = 0;
const images = document.querySelectorAll('.carousel img');
function showNextImage() {
    images[currentIndex].classList.remove('active');
    currentIndex = (currentIndex + 1) % images.length;
    images[currentIndex].classList.add('active');
}
setInterval(showNextImage, 3000);
// 表单验证与提交
const bookingForm = document.getElementById('booking-form');
bookingForm.addEventListener('submit', function(e) {
    e.preventDefault();
    const name = e.target.elements['name'].value;
    const phone = e.target.elements['phone'].value;
    alert(`预约成功：${name} 先生/女士，电话 ${phone}`);
});
// 体重数据可视化（需引入Chart.js）
const ctx = document.getElementById('weight-chart').getContext('2d');
const weightChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['周一', '周二', '周三', '周四', '周五'],
        datasets: [{
            label: '体重变化(kg)',
            data: [70, 69.5, 69, 68.5, 68],
            borderColor: 'rgba(46, 125, 50, 1)',
            fill: false
        }]
    }
});
// 留言板功能
const messageBoard = document.getElementById('message-board');
const messageList = document.getElementById('message-list');
messageBoard.addEventListener('submit', function(e) {
    e.preventDefault();
    const newMessage = document.getElementById('new-message').value;
    if (newMessage) {
        const li = document.createElement('li');
        li.textContent = newMessage;
        messageList.appendChild(li);
        document.getElementById('new-message').value = '';
    }
});

单元表格说明

模块名称 功能描述 核心代码片段
轮播图 自动切换健身主题图片，增强视觉吸引力 setInterval定时切换active类，控制图片显示状态
训练计划卡片 展示不同健身目标的训练方案 Flex布局实现卡片排列，border和background-color控制样式
饮食建议表格 结构化展示每日营养摄入方案 <table>元素配合border-collapse实现紧凑排版
课程预约表单 收集用户预约信息并进行基础验证 input元素类型设置+required属性实现前端验证
数据可视化 用折线图展示体重变化趋势 引入Chart.js库，通过<canvas>元素创建动态图表
留言板 实现用户实时留言互动 DOM操作动态创建<li>元素，实现无刷新留言功能

相关问题与解答

Q1：如何扩展网站功能以支持用户登录系统？
A1：需要后端服务支持，可选用Node.js+Express搭建API接口，前端增加<login-form>组件，通过AJAX提交用户名密码，后端验证后返回身份标识并存储在localStorage，关键步骤包括：

  1. 创建用户数据库表（如MySQL）
  2. 后端实现密码加密存储（如bcrypt）
  3. 前端添加登录/注册界面
  4. 使用JWT进行会话管理
  5. 根据登录状态显示个性化内容（如个人训练记录）

Q2：如何优化移动端浏览体验？
A2：采用响应式设计原则进行优化：

  1. 使用媒体查询调整布局断点（如@media (max-width:768px)）
  2. 将多列布局改为单列（如.plan-container设为flex-direction:column）
  3. 调整字体大小（如font-size:4vw）
  4. 优化触控交互（如增大按钮尺寸至padding:1.2rem）
  5. 隐藏非关键元素（如用display:none隐藏轮播图控制按钮）
  6. 使用viewport元标签确保正确缩
健身网站代码
0

相关文章