【HTML+CSS】留言板plus实现全过程

news/2024/10/3 21:58:19 标签: html, css, 前端

在这里插入图片描述

创建一个具有动态留言的简约风格留言板

在本教程中，我们将学习如何创建一个简约风格的留言板，它具备动态留言显示和一些基本动画效果。这个留言板将使用HTML和CSS构建，最终实现一个既美观又实用的界面。

准备工作

首先，确保你的工作环境已经安装了代码编辑器，例如VS Code或Sublime Text，这将帮助我们编写代码。

HTML结构

我们从创建基本的HTML结构开始。这个结构包括留言板的标题和留言区域。

html"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="title">
        <h1>留言贴</h1>
        <p>每一份留言都记录了您的想法，也为我们提供了珍贵的回忆</p>
    </div>
    <div class="message-board">
        <!-- 动态添加更多留言 -->
    </div>
</body>
</html>

CSS样式

接下来，我们添加CSS来美化界面，并实现一些动画效果。

css">body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
    min-height: 100vh;
}

.message-board {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

.message {
    background: #fff;
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 1.1em;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 250px;
    height: 200px;
}

.message:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.message-meta {
    font-size: 0.9em;
    color: #888;
    margin-bottom: 10px;
}

.message-content {
    font-size: 1em;
    color: #333;
    display: flex;
    align-content: center;
}

.message-author {
    text-align: right;
    margin: 10px;
    font-size: 0.9em;
    color: #555;
}

.title h1, .title p {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 14px;
}

动态留言效果

为了使留言板更具动态感，我们使用CSS的@keyframes规则来创建一个简单的滑入效果。

css">@keyframes slideIn {
    from {
        transform: translateY(-400%);
    }
    to {
        transform: translateY(0);
    }
}

.slide-in {
    animation: slideIn 1s ease forwards;
}