htmlcss网页设计代码作业

作者：昂首向前走，发布日期:2025-01-24 浏览:38

<!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;
        }

        /* 导航栏样式 */
        nav {
            background-color: #333;
            color: white;
            padding: 1rem;
            text-align: center;
        }

        nav a {
            color: white;
            margin: 0 1rem;
            text-decoration: none;
        }

        /* 主体内容样式 */
        .container {
            width: 80%;
            margin: 2rem auto;
            background-color: white;
            padding: 2rem;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        h1 {
            color: #333;
        }

        p {
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <nav>
        <a href="#">首页</a>
        <a href="#">关于我们</a>
        <a href="#">服务</a>
        <a href="#">联系我们</a>
    </nav>

    <div class="container">
        <h1>欢迎来到我们的网站</h1>
        <p>这是一个简单的 HTML 和 CSS 组合的网页设计示例。通过这个例子，你可以学习如何使用 HTML 和 CSS 来创建一个基本的网页布局。</p>
    </div>
</body>
</html>

解释说明：

HTML 结构：
- <!DOCTYPE html>：声明文档类型为 HTML5。
- <html lang="zh-CN">：指定网页语言为简体中文。
- <head>：包含网页的元数据（如字符集、视口设置、标题等）。
- <body>：包含网页的主要内容。
CSS 样式：
- body：设置全局字体、背景颜色和外边距。
- nav：定义导航栏的背景颜色、文本颜色、内边距和文本对齐方式。
- nav a：设置导航链接的颜色、间距和去除下划线。
- .container：定义主体内容区域的宽度、居中显示、背景颜色、内边距和阴影效果。
- h1 和 p：分别设置标题和段落的样式。
页面内容：
- 导航栏包含四个链接：首页、关于我们、服务和联系我们。
- 主体内容区域包含一个标题和一段描述性文字。

这个示例展示了如何使用 HTML 和 CSS 创建一个简单的响应式网页布局。

上一篇：在html中单元格的标记有什么