写一个简约大气静态html的页面完全适配移动端和pc端

日期: 2026-01-05

标签: 教育

以下是一个简约大气的静态HTML页面示例，适配移动端和PC端：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简约大气页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        
        header {
            background-color: #333;
            color: #fff;
            padding: 20px;
            text-align: center;
        }
        
        main {
            padding: 20px;
            text-align: center;
        }
        
        footer {
            background-color: #333;
            color: #fff;
            padding: 10px;
            text-align: center;
        }
        
        @media (max-width: 600px) {
            header, main, footer {
                padding: 10px;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1>简约大气页面</h1>
    </header>
    
    <main>
        <h2>欢迎来到简约大气页面</h2>
        <p>这是一个适配移动端和PC端的静态HTML页面示例。</p>
    </main>
    
    <footer>
        &copy; 2022 简约大气页面. All rights reserved.
    </footer>
</body>
</html>

这个页面有一个顶部的标题栏（header），中间的内容区域（main），和底部的版权信息（footer）。页面使用了简洁的黑白配色，并使用了媒体查询来适配移动端和PC端的不同屏幕尺寸。在小于600像素的屏幕上，各个区域的内边距会减小，以适应较小的屏幕空间

原文地址: https://www.cveoy.top/t/topic/iDHL 著作权归作者所有。请勿转载和采集!