自适应html5单页模板

作者：戮尽逆者发布日期:2025-02-06 浏览:359

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自适应HTML5单页模板</title>
    <style>
        /* 基本样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        header {
            background-color: #333;
            color: #fff;
            padding: 1rem;
            text-align: center;
        }

        main {
            padding: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        section {
            background-color: #fff;
            margin-bottom: 1rem;
            padding: 1rem;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 1rem;
            position: fixed;
            bottom: 0;
            width: 100%;
        }

        /* 自适应布局 */
        @media (max-width: 768px) {
            main {
                padding: 1rem;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1>自适应HTML5单页模板</h1>
    </header>

    <main>
        <section>
            <h2>欢迎使用自适应HTML5单页模板</h2>
            <p>这是一个简单的自适应HTML5单页模板，适用于各种设备。页面会根据屏幕大小自动调整布局。</p>
        </section>

        <section>
            <h2>特点</h2>
            <ul>
                <li>响应式设计，适合所有设备</li>
                <li>简洁明了的结构</li>
                <li>易于修改和扩展</li>
            </ul>
        </section>
    </main>

    <footer>
        <p>&copy; 2023 自适应HTML5单页模板</p>
    </footer>
</body>
</html>

解释说明

HTML5结构:
- 使用了标准的HTML5标签，如<header>、<main>、<section>和<footer>，使代码更加语义化。
自适应布局:
- 使用了CSS媒体查询（@media），以确保页面在不同设备上都能良好显示。例如，在宽度小于768px的屏幕上，main部分的内边距会减小。
样式:
- 简单而美观的基础样式，包括字体、颜色、间距等，使得页面看起来整洁有序。
固定底部:
- footer部分使用了position: fixed，使其始终位于页面底部，即使内容较少时也能保持在视窗底部。

这个模板可以作为基础，进一步扩展和定制以满足具体需求。

上一篇：html5canvas

下一篇：html中section标签的作用