html+css网页设计与制作

作者：断晴星魂发布日期:2025-03-01 浏览:124

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML + CSS 网页设计与制作示例</title>
    <style>
        /* 基本样式设置 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        header {
            background-color: #333;
            color: #fff;
            padding: 10px 0;
            text-align: center;
        }

        nav {
            display: flex;
            justify-content: center;
            background-color: #444;
        }

        nav a {
            color: #fff;
            padding: 14px 20px;
            text-decoration: none;
            text-align: center;
        }

        nav a:hover {
            background-color: #ddd;
            color: black;
        }

        main {
            padding: 20px;
            background-color: #fff;
            margin: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 10px 0;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>

<header>
    <h1>HTML + CSS 网页设计与制作</h1>
</header>

<nav>
    <a href="#home">首页</a>
    <a href="#about">关于我们</a>
    <a href="#services">服务</a>
    <a href="#contact">联系我们</a>
</nav>

<main>
    <h2>欢迎来到我们的网站</h2>
    <p>这是一个使用 HTML 和 CSS 设计的简单网页示例。通过合理的布局和样式，可以创建美观且易于维护的网页。</p>
</main>

<footer>
    <p>&copy; 2023 示例网站. 保留所有权利.</p>
</footer>

</body>
</html>

解释说明：

HTML 结构:
- <!DOCTYPE html>：声明文档类型为 HTML5。
- <html lang="zh-CN">：指定文档语言为简体中文。
- <head>：包含页面的元数据（如字符编码、视口设置、标题等）和样式定义。
- <body>：页面的主要内容区域。
CSS 样式:
- body：设置了全局字体、背景颜色和边距。
- header：顶部导航栏，包含一个大标题，背景颜色为深灰色，文字颜色为白色。
- nav：导航菜单，使用 Flexbox 布局居中对齐链接，鼠标悬停时改变背景颜色和文字颜色。
- main：主要内容区域，设置了内边距、背景颜色、外边距、圆角和阴影效果。
- footer：底部信息栏，固定在页面底部，包含版权信息。

这个示例展示了如何使用 HTML 和 CSS 创建一个简单的响应式网页布局，并应用基本的样式和交互效果。

上一篇：html网页制作代码大全

下一篇：html语言