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

曾经终败给现在 2023-10-13 16:11 40阅读 0赞

<!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 等，需要在代码中增加相应的标签和脚本。