Register
> 博客>

html网页框架代码实例

新速特源码 2月27日 24 0 

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
    <style>
        /* 在这里添加你的 CSS 样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f0f0f0;
        }
        header {
            background-color: #333;
            color: #fff;
            padding: 10px 0;
            text-align: center;
        }
        nav {
            background-color: #444;
            color: #fff;
            text-align: center;
            padding: 5px 0;
        }
        nav a {
            color: #fff;
            text-decoration: none;
            padding: 0 10px;
        }
        nav a:hover {
            background-color: #666;
        }
        section {
            padding: 20px;
            margin: 10px;
            background-color: #fff;
            border-radius: 5px;
        }
        footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 10px 0;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
    </header>
    <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
    </nav>
    <section>
        <h2>About Us</h2>
        <p>This is a simple example of an HTML website framework.</p>
    </section>
    <footer>
        <p>&copy; 2024 My Website. All rights reserved.</p>
    </footer>
</body>
</html>

这段代码创建了一个简单的 HTML 网页框架，包括了顶部的标题、导航栏、内容区域和底部的页脚。CSS 部分定义了一些基本的样式，包括页面的布局、颜色和字体。你可以根据自己的需求和喜好修改这些样式。

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
    <style>
        /* CSS 样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f0f0f0;
        }
        header {
            background-color: #333;
            color: #fff;
            padding: 10px 0;
            text-align: center;
        }
        nav {
            background-color: #444;
            color: #fff;
            text-align: center;
            padding: 5px 0;
        }
        nav a {
            color: #fff;
            text-decoration: none;
            padding: 0 10px;
        }
        nav a:hover {
            background-color: #666;
        }
        section {
            padding: 20px;
            margin: 10px;
            background-color: #fff;
            border-radius: 5px;
        }
        footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 10px 0;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
    </header>
    <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
    </nav>
    <section>
        <h2>About Us</h2>
        <p>This is a simple example of an HTML website framework. It includes a header, navigation bar, section, and footer.</p>
        <p>You can modify this framework and add more content according to your requirements.</p>
    </section>
    <footer>
        <p>&copy; 2024 My Website. All rights reserved.</p>
    </footer>
</body>
</html>

在这个更新的版本中，我扩展了"About Us"部分的内容，让它更加详细，并提供了更多的说明。你可以

腾讯云最新优惠活动，点击查看

Related

热门文章

微海报