极简炫酷的留言条

code_stream

已于 2024-01-26 13:13:43 修改

阅读量52

点赞数

分类专栏： # 其他内容文章标签：前端

于 2023-10-13 14:31:25 首次发布

本文链接：https://blog.csdn.net/code_stream/article/details/133809790

版权

其他内容专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一、需求

有时候，我们需要给别人一些小小的留言，但又想在不搞得复杂的前提下，将它设置为好看一点，怎么办呢？跟着本教程，即可实现自己的小目标啦。

二、教程

1. 首先在桌面上创建好一个txt格式的“文本文件”，命名请根据自身的需要，本文示例为： test.txt

2. 然后复制下面代码：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>留言条</title>
    <style>
        body {
            background-color: #f2f2f2;
        }

        .container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        h1, p {
            text-align: center;
        }

        hr { /*透明渐变水平线*/
            width: 80%;
            margin: 0 auto;
            border: 0;
            height: 4px;
            background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
        }
    </style>
</head>
<body>
<div class="container">
    <hr>
    <h1>留言</h1>
    <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
    <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
    <p>哈哈哈哈哈哈哈哈哈哈哈哈</p>
    <hr>
    <p style="color: #8a6d3b">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
        <br><br>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
        <br><br>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
        <br><br>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
    </p>
    <h4>~~~ 非常感谢您 ~~~</h4>
</div>
</body>
</html>

3. 将“哈哈哈哈哈哈”这些文本改成你需要的留言内容。

4. 最后，保存修改。然后将文件名由原来的 test.txt 改为 test.html 即可。