如何获取HTML网页设计示例源代码？-网页设计-锦华智联科技

示例 1：个人简介页面 (基础版)

这个示例适合初学者，展示了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>
    <style>
        /* 简单的内联CSS样式 */
        body {
            font-family: 'Helvetica Neue', Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
            color: #333;
        }
        .container {
            max-width: 800px;
            margin: auto;
            background: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #0056b3;
        }
        header {
            border-bottom: 1px solid #ddd;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }
        nav a {
            margin-right: 15px;
            text-decoration: none;
            color: #0056b3;
        }
        nav a:hover {
            text-decoration: underline;
        }
        footer {
            text-align: center;
            margin-top: 20px;
            font-size: 0.8em;
            color: #777;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>张三</h1>
            <p>前端开发工程师 & UI设计师</p>
            <nav>
                <a href="#about">关于我</a>
                <a href="#skills">技能</a>
                <a href="#projects">项目</a>
                <a href="#contact">联系方式</a>
            </nav>
        </header>
        <main>
            <section id="about">
                <h2>关于我</h2>
                <p>你好！我叫张三，是一名充满热情的前端开发工程师，我热爱创造美观、用户友好的网页界面，并致力于将复杂的设计转化为流畅、高效的代码。</p>
                <img src="https://via.placeholder.com/150" alt="张三的头像">
            </section>
            <section id="skills">
                <h2>技能</h2>
                <ul>
                    <li>HTML5, CSS3, JavaScript (ES6+)</li>
                    <li>响应式设计与移动优先</li>
                    <li>React, Vue.js 框架</li>
                    <li>版本控制: Git</li>
                    <li>构建工具: Webpack</li>
                </ul>
            </section>
            <section id="projects">
                <h2>项目</h2>
                <p>这里是一些我参与过的项目：</p>
                <ol>
                    <li><a href="#">电商平台前端重构</a> - 使用Vue.js实现动态交互</li>
                    <li><a href="#">企业官网响应式设计</a> - 纯CSS实现复杂布局</li>
                    <li><a href="#">在线数据可视化仪表盘</a> - 结合D3.js进行数据展示</li>
                </ol>
            </section>
            <section id="contact">
                <h2>联系方式</h2>
                <p>如果你想与我联系，可以通过以下方式：</p>
                <p>邮箱: <a href="mailto:zhangsan@example.com">zhangsan@example.com</a></p>
                <p>GitHub: <a href="https://github.com/zhangsan" target="_blank">github.com/zhangsan</a></p>
            </section>
        </main>
        <footer>
            <p>&copy; 2025 张三的个人主页. 保留所有权利.</p>
        </footer>
    </div>
</body>
</html>

示例 2：企业官网首页 (响应式布局)

这个示例更复杂，包含了响应式设计，可以在不同尺寸的设备（桌面、平板、手机）上良好显示,它使用了更现代的布局技术。

文件名: responsive.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">创新科技有限公司 - 引领未来</title>
    <style>
        /* 全局样式 */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
        }
        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 15px;
        }
        /* 头部样式 */
        header {
            background: #333;
            color: #fff;
            padding: 1rem 0;
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .logo {
            font-size: 1.5rem;
            font-weight: bold;
        }
        nav ul {
            list-style: none;
            display: flex;
        }
        nav ul li a {
            color: #fff;
            text-decoration: none;
            padding: 10px 15px;
            display: block;
        }
        nav ul li a:hover {
            background: #555;
        }
        /* 主要内容区域 */
        .hero {
            background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80') no-repeat center center/cover;
            color: #fff;
            text-align: center;
            padding: 100px 20px;
        }
        .hero h1 {
            font-size: 3rem;
            margin-bottom: 10px;
        }
        .hero p {
            font-size: 1.2rem;
            margin-bottom: 20px;
        }
        .btn {
            display: inline-block;
            background: #e74c3c;
            color: #fff;
            padding: 12px 25px;
            text-decoration: none;
            border-radius: 5px;
            transition: background 0.3s ease;
        }
        .btn:hover {
            background: #c0392b;
        }
        /* 特性部分 */
        .features {
            padding: 60px 0;
            background: #f9f9f9;
        }
        .features h2 {
            text-align: center;
            margin-bottom: 40px;
        }
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }
        .feature-item {
            background: #fff;
            padding: 25px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .feature-item i {
            font-size: 3rem;
            color: #3498db;
            margin-bottom: 15px;
        }
        /* 页脚样式 */
        footer {
            background: #333;
            color: #ccc;
            text-align: center;
            padding: 20px 0;
        }
        /* 响应式设计 */
        @media (max-width: 768px) {
            .header-container {
                flex-direction: column;
            }
            nav ul {
                flex-direction: column;
                width: 100%;
                margin-top: 10px;
            }
            nav ul li {
                text-align: center;
            }
            .hero h1 {
                font-size: 2rem;
            }
        }
    </style>
    <!-- 为了使用图标，我们引入Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <header>
        <div class="container header-container">
            <div class="logo">创新科技</div>
            <nav>
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">产品</a></li>
                    <li><a href="#">联系我们</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <section class="hero">
        <h1>欢迎来到创新科技</h1>
        <p>我们致力于用最前沿的技术，为您打造卓越的数字解决方案</p>
        <a href="#" class="btn">了解更多</a>
    </section>
    <section class="features">
        <div class="container">
            <h2>我们的核心优势</h2>
            <div class="feature-grid">
                <div class="feature-item">
                    <i class="fas fa-rocket"></i>
                    <h3>快速开发</h3>
                    <p>采用敏捷开发模式，快速响应市场需求，缩短产品上线周期。</p>
                </div>
                <div class="feature-item">
                    <i class="fas fa-shield-alt"></i>
                    <h3>安全可靠</h3>
                    <p>遵循业界最高安全标准，保障您的数据和业务安全无忧。</p>
                </div>
                <div class="feature-item">
                    <i class="fas fa-headset"></i>
                    <h3>贴心服务</h3>
                    <p>7x24小时技术支持，专业团队随时为您解决问题。</p>
                </div>
            </div>
        </div>
    </section>
    <footer>
        <p>&copy; 2025 创新科技有限公司. All Rights Reserved.</p>
    </footer>
</body>
</html>

示例 3：带有简单交互的登录页面

这个示例不仅包含HTML和CSS，还加入了JavaScript,实现了简单的表单验证和交互效果。

（图片来源网络，侵删）

文件名: login.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">用户登录</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0;
        }
        .login-container {
            background: #fff;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
            width: 400px;
        }
        .login-container h2 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            color: #555;
            font-weight: bold;
        }
        .form-group input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            box-sizing: border-box; /* 确保padding不会影响宽度 */
            transition: border-color 0.3s;
        }
        .form-group input:focus {
            border-color: #2575fc;
            outline: none;
        }
        .btn-submit {
            width: 100%;
            padding: 12px;
            background: #2575fc;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.3s;
        }
        .btn-submit:hover {
            background: #1a5bbd;
        }
        .error-message {
            color: #e74c3c;
            font-size: 0.9em;
            margin-top: 5px;
            display: none; /* 默认隐藏 */
        }
        .success-message {
            color: #2ecc71;
            text-align: center;
            margin-top: 20px;
            display: none; /* 默认隐藏 */
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>欢迎登录</h2>
        <form id="loginForm" onsubmit="return validateForm(event)">
            <div class="form-group">
                <label for="username">用户名:</label>
                <input type="text" id="username" name="username" placeholder="请输入用户名">
                <div id="usernameError" class="error-message">用户名不能为空</div>
            </div>
            <div class="form-group">
                <label for="password">密码:</label>
                <input type="password" id="password" name="password" placeholder="请输入密码">
                <div id="passwordError" class="error-message">密码不能为空</div>
            </div>
            <button type="submit" class="btn-submit">登录</button>
            <div id="successMessage" class="success-message">
                登录成功！正在跳转...
            </div>
        </form>
    </div>
    <script>
        function validateForm(event) {
            // 阻止表单的默认提交行为
            event.preventDefault();
            // 获取表单元素
            const username = document.getElementById('username');
            const password = document.getElementById('password');
            const usernameError = document.getElementById('usernameError');
            const passwordError = document.getElementById('passwordError');
            const successMessage = document.getElementById('successMessage');
            // 重置之前的错误和成功信息
            usernameError.style.display = 'none';
            passwordError.style.display = 'none';
            successMessage.style.display = 'none';
            let isValid = true;
            // 验证用户名
            if (username.value.trim() === '') {
                usernameError.style.display = 'block';
                isValid = false;
            }
            // 验证密码
            if (password.value.trim() === '') {
                passwordError.style.display = 'block';
                isValid = false;
            }
            // 如果表单有效，显示成功信息
            if (isValid) {
                // 在实际应用中，这里会发送数据到服务器
                //  fetch('/api/login', { method: 'POST', body: ... })
                successMessage.style.display = 'block';
                // 模拟登录成功后的跳转
                setTimeout(() => {
                    alert('登录成功！这里会跳转到主页。');
                    // window.location.href = '/dashboard';
                }, 1500);
            }
            // 返回false，阻止页面刷新（因为我们用JS处理了）
            return false;
        }
    </script>
</body>
</html>

如何使用这些示例

创建文件: 在你的电脑上创建一个新的文件夹,然后在文件夹中创建一个新的文本文件。
复制粘贴: 将上面任意一个示例的完整代码复制并粘贴到你创建的文本文件中。
重命名文件: 将文件名修改为示例中指定的文件名（index.html），并确保文件扩展名是 .html。
保存文件: 保存文件。
在浏览器中打开: 找到你保存的文件，用鼠标右键点击它，选择“用Chrome打开”或“用Firefox打开”（或其他你喜欢的浏览器）。

你就可以在浏览器中看到这些网页的运行效果了，你可以尝试修改HTML结构、CSS样式或JavaScript代码，看看网页会发生什么变化,这是学习网页设计的最好方式。