【HTML+CSS】仿电子美学打造响应式留言板

在这里插入图片描述

创建一个响应式的留言板

在这篇文章中,我们将学习如何创建一个简单而美观的留言板,它将包括基本的样式和动画效果,以及响应式设计,确保在不同设备上都能良好显示。

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="message-board"><!-- 动态添加更多留言 --><div class="message slide-in"><div class="message-meta">2024-9-5</div><div class="message-content">今天的进度有点慢...</div><div class="message-author">努力中的小白</div></div><!-- 更多留言 --></div>
</body>
</html>

CSS 样式

接下来,我们添加CSS样式来美化留言板。我们将使用Flexbox来布局留言,并添加一些动画效果。

body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;margin: 0;padding: 20px;background-color: #f4f4f4;display: flex;justify-content: center;align-content: space-between;min-height: 100vh;
}.message-board {max-width: 800px;
}.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: 400px;
}.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;
}.message-author {text-align: right;margin: 0 0 0px;font-size: 0.9em;color: #555;
}@keyframes slideIn {from {transform: translateY(-400%);}to {transform: translateY(0);}
}.slide-in {animation: slideIn 1s ease forwards;
}

响应式设计

为了确保留言板在不同设备上都能良好显示,我们可以使用媒体查询来调整留言的宽度。

@media (max-width: 600px) {.message {width: 100%;}
}

动画效果

我们为留言添加了一个简单的滑动动画,当页面加载时,每个留言都会从屏幕外滑入。

@keyframes slideIn {from {transform: translateY(-400%);}to {transform: translateY(0);}
}.slide-in {animation: slideIn 1s ease forwards;
}

结论

通过这篇文章,我们学习了如何创建一个基本的留言板,包括样式和动画效果。我们使用了Flexbox来布局留言,并添加了响应式设计,确保留言板在不同设备上都能良好显示。此外,我们还为留言添加了滑动动画,提高了用户体验。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/54232.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android SQLite的基本使用、生成Excel文件保存到本地

1. Android SQLite的基本使用 1.1. SQLiteOpenHelper Android 底层已经通过一个SQLiteOpenHelper的抽象类将数据库的创建&#xff0c;以及修改&#xff0c;更新等都放在了里面。 要使用它必须实现它的OnCreate(SQLiteDatabase db)&#xff0c;onUpgrade(SQLiteDatabase db, int…

YOLOv11改进 | 独家创新- 注意力篇 | YOLOv11结合全新多尺度线性注意力机制MLAttention(全网独家创新)

1. MLAttention介绍 (1). 多尺度卷积操作&#xff1a;MLAttention通过多尺度卷积操作来增强不同尺度的特征表达能力。采用了多种卷积核尺寸&#xff08;例如5x5、1x7、7x1、1x11、11x1、1x21、21x1&#xff09;的深度可分离卷积来捕捉不同感受野的特征。较小的卷积核擅长捕捉细…

我店生活系统小程序开发功能解析

一、市场定位与目标用户 市场定位&#xff1a;我店生活小程序旨在打造一个集购物、娱乐、服务于一体的综合性本地生活服务平台&#xff0c;满足用户多样化的生活需求。通过整合周边生活服务资源&#xff0c;提供一站式的生活服务体验。 目标用户&#xff1a;主要面向中青年人…

TypeScript 算法手册【快速排序】

文章目录 1. 快速排序简介1.1 快速排序定义1.2 快速排序特点 2. 快速排序步骤过程拆解2.1 选择基准元素2.2 划分数组2.3 递归排序 3. 快速排序的优化3.1 三数取中法选择基准3.2 插入排序与快速排序结合案例代码和动态图 4. 快速排序的优点5. 快速排序的缺点总结 【 已更新完 Ty…

从零开始Ubuntu24.04上Docker构建自动化部署(二)Docker-安装docker-compose

安装docker compose 下载 sudo curl -SL https://github.com/docker/compose/releases/download/v2.29.2/docker-compose-linux-x86_64 -o /usr/local/bin/docker-compose 授权 sudo chmod x /usr/local/bin/docker-compose 查看版本 sudo docker-compose --version 创建一…

C语言基础(7)之操作符(1)(详细介绍)

目录 1. 各种操作符介绍 1.1 操作符汇总表 2. 移位操作符 2.1 移位操作符知识拓展 —— 原码、反码、补码 2.2 移位操作符讲解 2.2.1 右移操作符 ( >> ) 2.2.2 左移操作符 ( << ) 3. 位操作符 3.1 & (按位与) 3.2 | (按位或) 3.3 ^ (按位异或) 3.4…

排序算法之——归并排序,计数排序

文章目录 前言一、归并排序1. 归并排序的思想2. 归并排序时间复杂度及空间复杂度3. 归并排序代码实现1&#xff09;递归版本2&#xff09;非递归版本 二、计数排序1. 计数排序的思想2. 计数排序的时间复杂度及空间复杂度3. 计数排序代码实现 总结&#xff08;排序算法稳定性&am…

解决方案:梯度提升树(Gradient Boosting Trees)跟GBDT(Gradient Boosting Decision Trees)有什么区别

文章目录 一、现象二、解决方案梯度提升树&#xff08;GBT&#xff09;GBDT相同点区别 一、现象 在工作中&#xff0c;在机器学习中&#xff0c;时而会听到梯度提升树&#xff08;Gradient Boosting Trees&#xff09;跟GBDT&#xff08;Gradient Boosting Decision Trees&…

【JavaEE】——线程池大总结

阿华代码&#xff0c;不是逆风&#xff0c;就是我疯&#xff0c; 你们的点赞收藏是我前进最大的动力&#xff01;&#xff01;希望本文内容能够帮助到你&#xff01; 目录 引入&#xff1a;问题引入 一&#xff1a;解决方案 1&#xff1a;方案一——协程/纤程 &#xff08;1…

【完-网络安全】Windows注册表

文章目录 注册表启动项及常见作用五个根节点常见入侵方式 注册表 注册表在windows系统的配置和控制方面扮演了一个非常关键的角色&#xff0c;它既是系统全局设置的存储仓库&#xff0c;也是每个用户的设置信息的存储仓库。 启动项及常见作用 快捷键 WinR打开运行窗口&#x…

rabbitMq-----broker服务器

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言管理的字段 前言 搭建一个网络服务器&#xff0c;在内部提供各个业务接口即可。 在业务处理函数中&#xff0c;每次请求过来找到对应的信道&#xff0c;通过信…

【C++】C++基础

目录 一. C关键字(C98) 二、C的第一个程序 三、命名空间 3.1.namespace的价值 3.2.namespace的定义 3.2.命名空间使用 总结&#xff1a;在项目当中第一、第二种方法搭配使用&#xff0c;第三种冲突风险非常大&#xff0c;仅适合练习使用。 四、C输入&输出 五、缺省…

调试分析:[跳数度量]更改为[距离度量]后的 routing_bellmanford 算法

回顾复习2023年8月的《★修改Exata6.2源码&#xff1a;〔修改Bellmanford最短路径路由的衡量标准从【路由跳数】改为【“路由器节点间的物理距离”】&#xff0c;并动画演示〕》&#xff0c;VS2015调试Exata&#xff0c;跟踪调试修改后的[ routing_bellmanford.cpp ]源码&#…

useCallback()

官网直达&#xff1a;https://zh-hans.react.dev/reference/react/useCallback 点击按钮&#xff0c;子组件会重新渲染 import { memo, useState, useCallback } from react;const Child (props) > {console.log(我是子组件&#xff01;我在渲染呢&#xff01;&#xff0…

k8s架构,从clusterIP到光电半导体,再从clusterIP到企业管理

clusterIP作为k8s中的服务&#xff0c; 也是其他三个服务的基础 ~]$ kubectl create service clusterip externalname loadbalancer nodeport 客户端的流量到service service分发给pod&#xff0c;pod由控制器自动部署&#xff0c;自动维护 那么问题是service的可用…

计算机网络期末复习真题(附真题答案)

前言&#xff1a; 本文是笔者在大三学习计网时整理的笔记&#xff0c;哈理工的期末试题范围基本就在此范畴内&#xff0c;就算真题有所更改&#xff0c;也仅为很基础的更改数值&#xff0c;大多跑不出这些题&#xff0c;本文包含简答和计算等大题&#xff0c;简答的内容也可能…

【RADARSAT Constellation Mission(RCM)卫星星座简介】

RADARSAT Constellation Mission&#xff08;RCM&#xff09;卫星星座是加拿大太空局&#xff08;CSA&#xff09;的下一代C波段合成孔径雷达&#xff08;SAR&#xff09;卫星星座&#xff0c;以下是对其的详细介绍&#xff1a; 一、基本信息 发射时间&#xff1a;2019年6月…

基于微信小程序的四六级词汇+ssm(lw+演示+源码+运行)

摘 要 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;四六级词汇小程序被用户普遍使用&#xff0c;为方便用户能…

容器适配器-stack、queue、priority_queue和仿函数

目录 1.什么是适配器 2.deque 1.简单了解结构 2.deque的缺陷 3.为什么选择deque作为stack和queue的底层默认容器 3.stack&#xff08;栈&#xff09; 4.queue&#xff08;队列&#xff09; 5.仿函数 6.priority_queue&#xff08;优先级队列&#xff09;&#xff08;堆…

CentOS 系统中设置宝塔面板开机自启

创建 Systemd 服务文件&#xff1a; 在 /etc/systemd/system/ 目录下创建一个新的服务文件&#xff0c;例如 bt.service&#xff1a; sudo vi /etc/systemd/system/bt.service在文件中添加以下内容&#xff1a; [Unit] Description宝塔面板[Service] Typesimple ExecStart/usr/…