用AI写的一个网页代码1

寻梦xunm| 806| 网络收集
4个月前
超过148天温馨提示
本文最后更新于2025年05月31日，已超过148天没有更新，若内容或图片失效，请留言反馈。
Flex弹性布局
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex弹性布局 - 现代网页设计</title>
    <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;
            transition: all 0.3s ease;
        }

        :root {
            --primary-color: #4a6fa5;
            --secondary-color: #6b8cbc;
            --accent-color: #ff6b6b;
            --light-color: #f8f9fa;
            --dark-color: #343a40;
            --text-color: #333;
            --border-radius: 8px;
            --box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            --transition: all 0.3s ease;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            background-color: #f0f2f5;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* 头部样式 */
        header {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 1rem 2rem;
            box-shadow: var(--box-shadow);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .header-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 1.5rem;
            font-weight: 700;
        }

        .logo i {
            font-size: 2rem;
            color: var(--accent-color);
        }

        nav ul {
            display: flex;
            list-style: none;
            gap: 1.5rem;
        }

        nav a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            padding: 0.5rem;
            border-radius: var(--border-radius);
        }

        nav a:hover, nav a.active {
            background-color: rgba(255, 255, 255, 0.2);
        }

        .header-buttons {
            display: flex;
            gap: 1rem;
        }

        .btn {
            padding: 0.5rem 1rem;
            border: none;
            border-radius: var(--border-radius);
            font-weight: 500;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .btn-primary {
            background-color: var(--accent-color);
            color: white;
        }

        .btn-outline {
            background-color: transparent;
            border: 2px solid white;
            color: white;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }

        /* 主内容区 */
        main {
            flex: 1;
            padding: 2rem;
            max-width: 1200px;
            margin: 0 auto;
            width: 100%;
        }

        .hero {
            text-align: center;
            padding: 3rem 1rem;
            margin-bottom: 2rem;
            background: linear-gradient(135deg, #ffffff, #f0f5ff);
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
        }

        .hero h1 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            color: var(--primary-color);
        }

        .hero p {
            font-size: 1.2rem;
            max-width: 700px;
            margin: 0 auto 2rem;
            color: #555;
        }

        .features {
            display: flex;
            flex-wrap: wrap;
            gap: 2rem;
            margin-bottom: 3rem;
        }

        .feature-card {
            flex: 1 1 300px;
            background: white;
            border-radius: var(--border-radius);
            padding: 2rem;
            box-shadow: var(--box-shadow);
            text-align: center;
        }

        .feature-card i {
            font-size: 3rem;
            color: var(--primary-color);
            margin-bottom: 1rem;
        }

        .feature-card h3 {
            margin-bottom: 1rem;
            color: var(--primary-color);
        }

        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.15);
        }

        /* 网格布局 */
        .grid-section {
            margin-bottom: 3rem;
        }

        .section-title {
            text-align: center;
            margin-bottom: 2rem;
            color: var(--primary-color);
            position: relative;
        }

        .section-title:after {
            content: '';
            display: block;
            width: 80px;
            height: 4px;
            background: var(--accent-color);
            margin: 0.5rem auto;
            border-radius: 2px;
        }

        .grid-container {
            display: flex;
            flex-wrap: wrap;
            gap: 2rem;
        }

        .grid-item {
            flex: 1 1 calc(33.333% - 2rem);
            min-width: 280px;
            background: white;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--box-shadow);
        }

        .grid-item img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            display: block;
        }

        .grid-content {
            padding: 1.5rem;
        }

        .grid-content h3 {
            margin-bottom: 0.5rem;
            color: var(--primary-color);
        }

        .grid-content p {
            margin-bottom: 1rem;
            color: #666;
        }

        .btn-grid {
            background-color: var(--primary-color);
            color: white;
        }

        /* 页脚 */
        footer {
            background-color: var(--dark-color);
            color: white;
            padding: 3rem 2rem 2rem;
        }

        .footer-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            gap: 3rem;
        }

        .footer-column {
            flex: 1 1 250px;
        }

        .footer-column h3 {
            margin-bottom: 1.5rem;
            position: relative;
            padding-bottom: 0.5rem;
        }

        .footer-column h3:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 40px;
            height: 3px;
            background: var(--accent-color);
        }

        .footer-links {
            list-style: none;
        }

        .footer-links li {
            margin-bottom: 0.8rem;
        }

        .footer-links a {
            color: #ddd;
            text-decoration: none;
        }

        .footer-links a:hover {
            color: var(--accent-color);
            padding-left: 5px;
        }

        .social-icons {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }

        .social-icons a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background-color: rgba(255,255,255,0.1);
            border-radius: 50%;
            color: white;
            font-size: 1.2rem;
            text-decoration: none;
        }

        .social-icons a:hover {
            background-color: var(--accent-color);
            transform: translateY(-3px);
        }

        .copyright {
            text-align: center;
            padding-top: 2rem;
            margin-top: 2rem;
            border-top: 1px solid rgba(255,255,255,0.1);
            color: #aaa;
            font-size: 0.9rem;
        }

        /* 响应式设计 */
        .menu-toggle {
            display: none;
            background: none;
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
        }

        @media (max-width: 768px) {
            .header-container {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }
            
            nav ul {
                flex-direction: column;
                gap: 0.5rem;
                width: 100%;
                display: none;
            }
            
            nav ul.show {
                display: flex;
            }
            
            .header-buttons {
                width: 100%;
                justify-content: center;
                display: none;
            }
            
            .header-buttons.show {
                display: flex;
            }
            
            .menu-toggle {
                display: block;
                position: absolute;
                top: 1.5rem;
                right: 1.5rem;
            }
            
            .hero h1 {
                font-size: 2rem;
            }
            
            .hero p {
                font-size: 1rem;
            }
            
            .grid-item {
                flex: 1 1 100%;
            }
        }

        /* 主题切换按钮 */
        .theme-toggle {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: var(--primary-color);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
            z-index: 1000;
        }

        .theme-toggle:hover {
            transform: rotate(30deg) scale(1.1);
        }

        /* 暗色主题 */
        body.dark-theme {
            --text-color: #f0f0f0;
            --light-color: #2d3748;
            --dark-color: #1a202c;
            background-color: #121212;
        }

        body.dark-theme .hero {
            background: linear-gradient(135deg, #2d3748, #1a202c);
        }

        body.dark-theme .feature-card,
        body.dark-theme .grid-item {
            background-color: #2d3748;
            color: #f0f0f0;
        }

        body.dark-theme .feature-card h3,
        body.dark-theme .grid-content h3,
        body.dark-theme .section-title {
            color: #63b3ed;
        }

        body.dark-theme .feature-card p,
        body.dark-theme .grid-content p {
            color: #cbd5e0;
        }
    </style>
</head>
<body>
    <!-- 头部区域 -->
    <header>
        <div class="header-container">
            <div class="logo">
                <i class="fas fa-code"></i>
                <span>FlexBox</span>
            </div>
            
            <button class="menu-toggle" id="menuToggle">
                <i class="fas fa-bars"></i>
            </button>
            
            <nav>
                <ul id="navMenu">
                    <li><a href="#" class="active">首页</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 class="header-buttons" id="headerButtons">
                <button class="btn btn-outline">
                    <i class="fas fa-user"></i> 登录
                </button>
                <button class="btn btn-primary">
                    <i class="fas fa-rocket"></i> 注册
                </button>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main>
        <section class="hero">
            <h1>现代Flex弹性布局</h1>
            <p>使用CSS Flexbox创建响应式网页设计，轻松实现各种布局效果，适配不同设备屏幕尺寸</p>
            <button class="btn btn-primary">
                <i class="fas fa-play-circle"></i> 开始学习
            </button>
        </section>

        <section class="features">
            <div class="feature-card">
                <i class="fas fa-laptop-code"></i>
                <h3>响应式设计</h3>
                <p>使用Flexbox可以轻松创建响应式布局，在各种屏幕尺寸上都能完美展示内容</p>
            </div>
            <div class="feature-card">
                <i class="fas fa-arrows-alt-h"></i>
                <h3>灵活布局</h3>
                <p>通过简单的CSS属性控制项目在容器中的排列、对齐和分布方式</p>
            </div>
            <div class="feature-card">
                <i class="fas fa-mobile-alt"></i>
                <h3>移动优先</h3>
                <p>Flexbox是移动端布局的理想选择，简化了复杂布局的实现过程</p>
            </div>
        </section>

        <section class="grid-section">
            <h2 class="section-title">项目案例展示</h2>
            <div class="grid-container">
                <div class="grid-item">
                    <img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&h=400&q=80" alt="项目1">
                    <div class="grid-content">
                        <h3>企业官网设计</h3>
                        <p>使用Flexbox布局创建的企业级响应式网站，适配各种设备屏幕</p>
                        <button class="btn btn-grid">查看详情</button>
                    </div>
                </div>
                <div class="grid-item">
                    <img src="https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&h=400&q=80" alt="项目2">
                    <div class="grid-content">
                        <h3>电商平台</h3>
                        <p>基于Flexbox的商品展示网格布局，灵活展示大量产品</p>
                        <button class="btn btn-grid">查看详情</button>
                    </div>
                </div>
                <div class="grid-item">
                    <img src="https://images.unsplash.com/photo-1551650975-87deedd944c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&h=400&q=80" alt="项目3">
                    <div class="grid-content">
                        <h3>博客系统</h3>
                        <p>Flexbox实现的博客布局，完美展示文章和侧边栏内容</p>
                        <button class="btn btn-grid">查看详情</button>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer>
        <div class="footer-container">
            <div class="footer-column">
                <h3>关于我们</h3>
                <p>专注于现代Web前端技术，提供专业的Flex布局解决方案，帮助开发者创建响应式网站。</p>
                <div class="social-icons">
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-github"></i></a>
                </div>
            </div>
            <div class="footer-column">
                <h3>快速链接</h3>
                <ul class="footer-links">
                    <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>
            </div>
            <div class="footer-column">
                <h3>服务项目</h3>
                <ul class="footer-links">
                    <li><a href="#">网站设计</a></li>
                    <li><a href="#">响应式开发</a></li>
                    <li><a href="#">UI/UX设计</a></li>
                    <li><a href="#">前端优化</a></li>
                    <li><a href="#">技术培训</a></li>
                </ul>
            </div>
            <div class="footer-column">
                <h3>联系我们</h3>
                <ul class="footer-links">
                    <li><i class="fas fa-map-marker-alt"></i> 北京市朝阳区科技园区88号</li>
                    <li><i class="fas fa-phone"></i> +86 10 8888 7777</li>
                    <li><i class="fas fa-envelope"></i> contact@flexbox.com</li>
                </ul>
            </div>
        </div>
        <div class="copyright">
            <p>&copy; 2023 Flex弹性布局设计. 保留所有权利</p>
        </div>
    </footer>

    <!-- 主题切换按钮 -->
    <div class="theme-toggle" id="themeToggle">
        <i class="fas fa-moon"></i>
    </div>

    <script>
        // 移动端菜单切换
        const menuToggle = document.getElementById('menuToggle');
        const navMenu = document.getElementById('navMenu');
        const headerButtons = document.getElementById('headerButtons');
        
        menuToggle.addEventListener('click', () => {
            navMenu.classList.toggle('show');
            headerButtons.classList.toggle('show');
            
            // 切换菜单图标
            const icon = menuToggle.querySelector('i');
            if (icon.classList.contains('fa-bars')) {
                icon.classList.replace('fa-bars', 'fa-times');
            } else {
                icon.classList.replace('fa-times', 'fa-bars');
            }
        });
        
        // 主题切换功能
        const themeToggle = document.getElementById('themeToggle');
        const themeIcon = themeToggle.querySelector('i');
        
        themeToggle.addEventListener('click', () => {
            document.body.classList.toggle('dark-theme');
            
            // 切换主题图标
            if (themeIcon.classList.contains('fa-moon')) {
                themeIcon.classList.replace('fa-moon', 'fa-sun');
            } else {
                themeIcon.classList.replace('fa-sun', 'fa-moon');
            }
        });
        
        // 卡片悬停效果增强
        const cards = document.querySelectorAll('.feature-card, .grid-item');
        cards.forEach(card => {
            card.addEventListener('mouseenter', () => {
                card.style.transform = 'translateY(-10px)';
            });
            
            card.addEventListener('mouseleave', () => {
                card.style.transform = 'translateY(0)';
            });
        });
    </script>
</body>
</html>
none
本站相关资源来自互联网用户收集发布，仅供用于学习和交流。如有侵权之处，请联系站长并出示相关证明以便删除，敬请谅解！
4 赞 or 打赏
喜欢就打赏一点
一个人的端午节
博主躺进医院一个星期
博主自己开发的微博客程序博主自己开发的微博客程序
微博客程序使用的垃圾HTTP类（给人都整麻了）

61人气10天前
微博客程序核心框架更新了一坨大的

34人气10天前
网站后台老是登录上就掉线，重复登录

43人气11天前
php依赖注入容器功能代码教程文档（AI创作）

86人气16天前
xiunoBBS PDO 数据库封装类文档（AI教程）

60人气17天前
php仿typecho插件系统功能（ai教程）

181人气18天前
简

4个月前 . LV.2

最近都没更催更了

Windows QQ浏览器福建省莆田市仙游县
1. 寻梦xunm 作者博主
  
  3个月前 . 贵人 . LV.6
  
  @简
  人都躺进医院一个星期了
  
  Android 夸克浏览器浙江省杭州市
皮皮社

4个月前 . 贵人 . LV.4

大佬，能否发个效果图出来让人欣赏下。

Windows Chrome 湖南省永州市
博主自己开发的微博客程序博主自己开发的微博客程序
寻梦xunm 作者博主

我的音乐
