编程技术

Document

静态网页开发模板——小白入门（HTML &CSS）

<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        * {
            box-sizing: border-box;
        }

        /* body 样式 */
        body {
            font-family: Arial;
            margin: 0;
        }

        /* 标题 */
        .header {
            padding: 80px;
            text-align: center;
            background: #1abc9c;
            color: white;
        }

        /* 标题字体加大 */
        .header h1 {
            font-size: 40px;
        }

        /* 导航 */
        .navbar {
            overflow: hidden;
            background-color: #333;
        }

        /* 导航栏样式 */
        .navbar a {
            float: left;
            display: block;
            color: white;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
        }

        /* 右侧链接*/
        .navbar a.right {
            float: right;
        }

        /* 鼠标移动到链接的颜色 */
        .navbar a:hover {
            background-color: #ddd;
            color: black;
        }

        /* 列容器 */
        .row {
            display: -ms-flexbox; /* IE10 */
            display: flex;
            -ms-flex-wrap: wrap; /* IE10 */
            flex-wrap: wrap;
        }

        /* 创建两个列 */
        /* 边栏 */
        .side {
            -ms-flex: 30%; /* IE10 */
            flex: 30%;
            background-color: #f1f1f1;
            padding: 20px;
        }

        /* 主要的内容区域 */
        .main {
            -ms-flex: 70%; /* IE10 */
            flex: 70%;
            background-color: white;
            padding: 20px;
        }

        /* 测试图片 */
        .fakeimg {
            background-color: #aaa;
            width: 100%;
            padding: 20px;
        }

        /* 底部 */
        .footer {
            padding: 20px;
            text-align: center;
            background: #ddd;
        }

        /* 响应式布局 - 在屏幕设备宽度尺寸小于 700px 时, 让两栏上下堆叠显示 */
        @media screen and (max-width: 700px) {
            .row {
                flex-direction: column;
            }
        }

        /* 响应式布局 - 在屏幕设备宽度尺寸小于 400px 时, 让导航栏目上下堆叠显示 */
        @media screen and (max-width: 400px) {
            .navbar a {
                float: none;
                width: 100%;
            }
        }
    </style>
</head>
<body>

<div class="header">
    <h1>静态网页测试实例</h1>
    <p>创建一个页面。</p>
</div>

<div class="navbar">
    <a href="#">链接</a>
    <a href="#">链接</a>
    <a href="#">链接</a>
    <a href="#" class="right">链接</a>
</div>

<div class="row">
    <div class="side">
        <h2>关于我</h2>
        <h5>我的照片:</h5>
        <div class="fakeimg" style="height:200px;">这边插入图像</div>
        <p>关于我的介绍..</p>
        <h3>更多内容</h3>
        <p>我的更多内容</p>
        <div class="fakeimg" style="height:60px;">这边插入图像</div><br>
        <div class="fakeimg" style="height:60px;">这边插入图像</div><br>
        <div class="fakeimg" style="height:60px;">这边插入图像</div>
    </div>
    <div class="main">
        <h2>标题</h2>
        <h5>副标题</h5>
        <div class="fakeimg" style="height:200px;">图像</div>
        <p>一些文本..</p>
        <p>自建网站，应用模板！！！</p>
        <br>
        <h2>标题</h2>
        <h5>副标题</h5>
        <div class="fakeimg" style="height:200px;">图像</div>
        <p>一些文本..</p>
        <p>自建网站，应用模板！！！</p>
    </div>
</div>

<div class="footer">
    <h2>底部内容</h2>
</div>

</body>
</html>

这段代码是一个简单的 HTML 页面，用于创建一个网页。下面是对每个标签和属性的解释：

  1. <!DOCTYPE html>：声明文档类型为 HTML。
  2. <html>：HTML 根元素，包含整个页面的内容。
  3. <head>：头部元素，用于包含页面的元数据和引用外部资源。
  4. <title>：指定页面的标题，在浏览器标签栏中显示。
  5. <meta charset="UTF-8">：指定页面的字符编码为 UTF-8。
  6. <meta name="viewport" content="width=device-width, initial-scale=1">：设置页面的视口（viewport），使其在移动设备上具有正确的缩放行为。
  7. <style>：用于定义页面的样式。
  8. <body>：网页的主体部分，包含可见的内容。
  9. <div>：用于定义文档中的区块或容器。
  10. .header、.navbar、.row、.side、.main、.fakeimg、.footer：这些是 CSS 类选择器，用于选择对应类名的 HTML 元素并应用样式。
  11. <h1>、<h2>、<h3>、<h4>、<h5>：标题元素，用于表示不同级别的标题。
  12. <p>：段落元素，用于表示文本段落。
  13. <a>：锚点元素，用于创建链接。
  14. href：<a> 元素的属性，用于指定链接的目标 URL。
  15. float：CSS 属性，用于设置元素的浮动方式。
  16. display：CSS 属性，用于设置元素的显示方式。
  17. color：CSS 属性，用于设置文本颜色。
  18. text-align：CSS 属性，用于设置文本对齐方式。
  19. padding：CSS 属性，用于设置元素的内边距。
  20. background-color：CSS 属性，用于设置元素的背景颜色。
  21. width、height：CSS 属性，用于设置元素的宽度和高度。

        在这段代码中，页面被划分为几个区域：标题栏（.header）、导航栏（.navbar）、内容区域（.row、.side、.main）和底部（.footer）。使用 CSS 样式对这些区域进行了样式定义，包括背景颜色、文本对齐、内边距等。内容区域内包含了标题、段落和图像等元素来展示具体内容。

        需要注意的是，这段代码只是一个静态网页模板，不包含任何实际的功能和交互性。它仅用于演示如何使用 HTML 和 CSS 创建网页结构和样式。如果你希望添加更多功能，比如表单、动画（比如：轮播图，等等）、JavaScript 等，需要在代码中增加相应的标签和脚本。