&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;zh-CN&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;简洁明快的网站&lt;/title&gt;
    &lt;style&gt;
        <em> {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: &#39;Segoe UI&#39;, Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
        }
        
        /</em> 导航栏 <em>/
        nav {
            background: #fff;
            padding: 1rem 5%;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        nav ul {
            list-style: none;
            display: flex;
            justify-content: center;
            gap: 2rem;
        }
        
        nav a {
            text-decoration: none;
            color: #333;
            font-weight: 500;
            transition: color 0.3s;
        }
        
        nav a:hover {
            color: #4A90E2;
        }
        
        /</em> 头部区域 <em>/
        header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            text-align: center;
            padding: 6rem 2rem;
        }
        
        header h1 {
            font-size: 3rem;
            margin-bottom: 1rem;
        }
        
        header p {
            font-size: 1.3rem;
            opacity: 0.9;
        }
        
        /</em> 内容区域 <em>/
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 4rem 2rem;
        }
        
        section {
            margin-bottom: 4rem;
        }
        
        h2 {
            font-size: 2rem;
            margin-bottom: 1.5rem;
            color: #667eea;
            text-align: center;
        }
        
        /</em> 卡片布局 <em>/
        .cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }
        
        .card {
            background: #f8f9fa;
            padding: 2rem;
            border-radius: 10px;
            text-align: center;
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        }
        
        .card h3 {
            color: #667eea;
            margin-bottom: 1rem;
        }
        
        /</em> 按钮 <em>/
        .btn {
            display: inline-block;
            background: #667eea;
            color: white;
            padding: 0.8rem 2rem;
            text-decoration: none;
            border-radius: 5px;
            margin-top: 1rem;
            transition: background 0.3s;
        }
        
        .btn:hover {
            background: #764ba2;
        }
        
        /</em> 页脚 <em>/
        footer {
            background: #333;
            color: white;
            text-align: center;
            padding: 2rem;
        }
        
        footer p {
            opacity: 0.8;
        }
        
        /</em> 响应式设计 <em>/
        @media (max-width: 768px) {
            header h1 {
                font-size: 2rem;
            }
            
            header p {
                font-size: 1rem;
            }
            
            nav ul {
                flex-direction: column;
                gap: 1rem;
            }
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;!-- 导航栏 --&gt;
    &lt;nav&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;a href=&quot;#home&quot;&gt;首页&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#features&quot;&gt;特色&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#about&quot;&gt;关于&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#contact&quot;&gt;联系&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/nav&gt;
    
    &lt;!-- 头部横幅 --&gt;
    &lt;header id=&quot;home&quot;&gt;
        &lt;h1&gt;欢迎来到我们的网站&lt;/h1&gt;
        &lt;p&gt;简洁 · 明快 · 现代&lt;/p&gt;
        &lt;a href=&quot;#features&quot; class=&quot;btn&quot;&gt;了解更多&lt;/a&gt;
    &lt;/header&gt;
    
    &lt;!-- 主要内容 --&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;!-- 特色功能区 --&gt;
        &lt;section id=&quot;features&quot;&gt;
            &lt;h2&gt;我们的特色&lt;/h2&gt;
            &lt;div class=&quot;cards&quot;&gt;
                &lt;div class=&quot;card&quot;&gt;
                    &lt;h3&gt;🚀 快速高效&lt;/h3&gt;
                    &lt;p&gt;采用最新技术，确保网站加载速度快，用户体验流畅。&lt;/p&gt;
                &lt;/div&gt;
                &lt;div class=&quot;card&quot;&gt;
                    &lt;h3&gt;📱 响应式设计&lt;/h3&gt;
                    &lt;p&gt;完美适配各种设备，从手机到电脑都能完美显示。&lt;/p&gt;
                &lt;/div&gt;
                &lt;div class=&quot;card&quot;&gt;
                    &lt;h3&gt;🎨 简洁美观&lt;/h3&gt;
                    &lt;p&gt;现代化的设计风格，简洁而不失优雅。&lt;/p&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/section&gt;
        
        &lt;!-- 关于我们区 --&gt;
        &lt;section id=&quot;about&quot;&gt;
            &lt;h2&gt;关于我们&lt;/h2&gt;
            &lt;p style=&quot;text-align: center; max-width: 800px; margin: 0 auto; font-size: 1.1rem;&quot;&gt;
                我们致力于提供优质的网页设计服务，帮助客户打造专业、现代的在线形象。
                我们的团队拥有丰富的经验，能够将您的想法转化为现实。
            &lt;/p&gt;
        &lt;/section&gt;
        
        &lt;!-- 联系我们区 --&gt;
        &lt;section id=&quot;contact&quot;&gt;
            &lt;h2&gt;联系我们&lt;/h2&gt;
            &lt;div style=&quot;text-align: center;&quot;&gt;
                &lt;p style=&quot;margin-bottom: 1rem; font-size: 1.1rem;&quot;&gt;有任何问题？随时与我们联系！&lt;/p&gt;
                &lt;a href=&quot;mailto:contact@example.com&quot; class=&quot;btn&quot;&gt;发送邮件&lt;/a&gt;
            &lt;/div&gt;
        &lt;/section&gt;
    &lt;/div&gt;
    
    &lt;!-- 页脚 --&gt;
    &lt;footer&gt;
        &lt;p&gt;&amp;copy; 2024 我们的网站. 保留所有权利.&lt;/p&gt;
    &lt;/footer&gt;
&lt;/body&gt;
&lt;/html&gt;