当前位置： 首页 > news >正文

60多行代码仿制B站首页一个好看的卡片效果

news 2026/4/2 8:28:28

文章目录

  • 1、为啥是这个？
  • 2、仿制效果
  • 3、实现思路
  • 4、代码
  • 5、查看B站如何实现

1、为啥是这个？

看到Bilibili首页的一个卡片，看着效果很不错，给人很舒适的感觉。一琢磨貌似也不难，甚至只需要一层 div 就可以实现主要框架，然后就动手试了一下。

2、仿制效果

3、实现思路

卡片主要分为三个部分：主要内容区+两个“阴影”块
如果要实现，绝对定位，最多三个 div ，不能再多了
转念一想，如果算上伪元素 ::before ::after 岂不是只用一个 div 就可以实现。

过程中可能会涉及一丢丢层叠顺序之类的小细节。实现起来确实也不难

4、代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Card</title><style>*{margin: 0;padding: 0;}body{background-color: grey;}.box{position: relative;width: 100%;height: 500px;background-color: rgb(255, 255, 255);padding: 80px 0;z-index: -10;}.main{width: 300px;height: 190px;border: 1px solid #bdbdbd;background-color: white;border-radius: 6px;margin: auto;position: relative;text-align: center;line-height: 190px;}.main::before{content: "";position: absolute;width: 90%;height: 100%;margin: 0 auto;background-color: #E3E5E7;border-radius: 8px;top: 6px;right: 5%;z-index: -2;}.main::after{content: "";position: absolute;width: 78%;height: 100%;margin: 0 auto;background-color: #F1F2F3;border-radius: 8px;top: 12px;right: 11%;z-index: -3;}</style>
</head>
<body><div class="box"><div class="main">你好世界!</div></div>
</body>
</html>

5、查看B站如何实现

三个div（这样可能更稳妥一些）

相关文章：

60多行代码仿制B站首页一个好看的卡片效果

文章目录 1、为啥是这个&#xff1f;2、仿制效果3、实现思路4、代码5、查看B站如何实现 1、为啥是这个&#xff1f; 看到Bilibili首页的一个卡片&#xff0c;看着效果很不错&#xff0c;给人很舒适的感觉。一琢磨貌似也不难&#xff0c;甚至只需要一层 div 就可以实现主要框架…...

编程日记 2023/8/7 2:02:37

Redis内网主从节点搭建

Redis内网主从节点搭建 1、文件上传2、服务安装3、服务启动4、配置主从复制 1、文件上传 内网环境手动上传gcc-c、redis.tar文件 2、服务安装 # 解压 unzip gcc-c.zip unzip gcc_rpm.zip tar -zxvf redis-6.2.13.tar.gz# 安装 cd gcc_rpm/ rpm -ivh *.rpm --nodeps --force…...

编程日记 2023/8/7 2:01:35

ESP32-C2开发板 ESP8684芯片 兼容ESP32-C3开发

C2是一个芯片采用4毫米x 4毫米封装&#xff0c;与272 kB内存。它运行框架&#xff0c;例如ESP-Jumpstart和ESP造雨者&#xff0c;同时它也运行ESP-IDF。ESP-IDF是Espressif面向嵌入式物联网设备的开源实时操作系统&#xff0c;受到了全球用户的信赖。它由支持Espressif以及所有…...

编程日记 2023/8/7 2:00:32

Zebec 创始人 Sam 对话社区，“Zebec 生态发展”主题 AMA 回顾总结

近日&#xff0c;Zebec Protocol 创始人 Sam 作为嘉宾&#xff0c;与社区进行了以“Zebec 生态发展”为主题的 AMA 对话。Sam 在线上访谈上对 Zebec 路线图、Zebec 质押、NautChain通证进行了解读&#xff0c;并对 Zebec 的进展、生态建设的愿景进行了展望。本文将对本次 AMA 进…...

编程日记 2023/8/7 1:59:30

一台电脑给另外一台电脑共享网络

这里写自定义目录标题 有网的电脑上操作一根网线连接两台电脑没网的电脑上 有网的电脑上操作 右键->属性->共享 如同选择以太网&#xff0c;勾选。确认。 一根网线连接两台电脑 没网的电脑上 没网的电脑为mips&麒麟V10 新增个网络配置ww&#xff0c;设置如下。 …...

编程日记 2023/8/7 1:58:29

AAA 认证

概念 AAA是认证&#xff08;Authentication&#xff09;、授权&#xff08;Authorization&#xff09;和计费&#xff08;Accounting&#xff09;的简称&#xff0c;是网络安全中进行访问控制的一种安全管理机制&#xff0c;提供认证、授权和计费三种安全服务。 AAA 常见架构...

编程日记 2023/8/7 1:57:28

jvm-程序计数器

1、是什么 4 学习路线 类加载器 内存结构方法区 类堆 对象虚拟机栈程序计数器本地方法栈 执行引擎解释器编译器 热点代码 5 程序计数器–作用 java源代码编译蛏二进制字节码 jvm指令。 对所有平台保持一致性。记住下一条jvm指令的执行地址。寄存器&#xff0c;cpu中读取速度…...

编程日记 2023/8/7 1:56:27

NestJs Debug配置文件

&#xff08;事缓则圆,人缓则安,语迟则贵,虎行似病,鹰立似睡。清俞万春《荡寇志》&#xff09; {"version": "0.2.0","configurations": [{"type": "node","request": "launch","name": &quo…...

编程日记 2023/8/7 1:55:24

题解 | #C.idol!!# 2023牛客暑期多校6

C.idol!! 数学 题目大意 正整数 n n n 的双阶乘 n ! ! n!! n!! 表示不超过 n n n 且与 n n n 有相同奇偶性的所有正整数乘积 求对于给定 n n n &#xff0c; ∏ i 1 n i ! ! \prod\limits_{i1}^n i!! i1∏n​i!! 的后缀 0 0 0 个数 解题思路 根据双阶乘的性质&…...

编程日记 2023/8/7 1:54:23

使用filebeat收集并解析springboot日志

序 本文主要研究一下如何使用filebeat收集并解析springboot日志 安装 在官网的下载页面filebeat/downloads提供了一些特定平台的安装包&#xff0c;不过对应linux最为省事的安装方式就是直接下载x86_64压缩包&#xff0c;然后解压即可 wget https://artifacts.elastic.co/d…...

编程日记 2023/8/7 1:53:22

P1993 小 K 的农场

小 K 的农场 题目描述 小 K 在 MC 里面建立很多很多的农场&#xff0c;总共 n n n 个&#xff0c;以至于他自己都忘记了每个农场中种植作物的具体数量了&#xff0c;他只记得一些含糊的信息&#xff08;共 m m m 个&#xff09;&#xff0c;以下列三种形式描述&#xff1a;…...

编程日记 2023/8/7 1:52:20

Spring boot 集成 Skywalking 配置 || Skywalking 打不开【已解决】

一、Skywalking官网 Apache SkyWalking 1.下载Skywalking APM &#xff08;如果下载最新的&#xff0c;双击打开闪退&#xff0c;选老点的版本&#xff09; 2. 下载 Skywalking Agents 如果下载太慢&#xff0c;建议复制下载链接&#xff0c;然后用下载器下载&#xff0c;比…...

编程日记 2023/8/7 1:51:19

手把手教你使用 ftrace 对 Linux 系统进行 debug

1、简介 strace：用来跟踪 Linux 进程执行时的系统调用和接收所接收的信号，可以跟踪到一个进程产生的系统调用，包括参数，返回值，执行消耗的时间。 ftrace：是一个 Linux 内核函数跟踪器，function tracer，旨在帮助开发人员和系统设计者可以找到内核内部发生的事情，从 L…...

编程日记 2023/8/7 1:50:18

【练】要求定义一个全局变量 char buf[] = “1234567“，创建两个线程，不考虑退出条件，打印buf

要求定义一个全局变量 char buf[] "1234567"&#xff0c;创建两个线程&#xff0c;不考虑退出条件&#xff0c;另&#xff1a; A线程循环打印buf字符串&#xff0c;B线程循环倒置buf字符串&#xff0c;即buf中本来存储1234567&#xff0c;倒置后buf中存储7654321. 不…...

编程日记 2023/8/7 1:49:15

iOS Viper架构（中文版）【看懂这篇就够了】

完整源码地址 一、iOS_Viper iOS的Viper架构&#xff0c;作为一个从业多年的iOS开发者&#xff0c;我个人认为应该要会一点viper 二、前言 viper的设计模式在iOS开发中不流行&#xff0c;甚至是Swift中&#xff0c;也没有用&#xff0c;我认为比较可惜。作为iOSer,当你掌握…...

编程日记 2023/8/7 1:48:14

深入理解缓存 TLB 原理

今天分享一篇TLB的好文章&#xff0c;希望大家夯实基本功&#xff0c;让我们一起深入理解计算机系统。 TLB 是 translation lookaside buffer 的简称。首先&#xff0c;我们知道 MMU 的作用是把虚拟地址转换成物理地址。 MMU工作原理 虚拟地址和物理地址的映射关系存储在页表…...

编程日记 2023/8/7 1:47:11

获取k8s scale资源对象的命令

kubectl get --raw /apis/<apiGroup>/<apiVersion>/namespaces/<namespaceName>/<resourceKind>/<resourceName>/scale 说明&#xff1a;scale资源对象用来水平扩展k8s资源对象的副本数&#xff0c;它是作为一种k8s资源对象的子资源存在&#xf…...

编程日记 2023/8/7 1:46:09

基于ChatYuan-large-v2 语言模型 Fine-tuning 微调训练 广告生成 任务

一、ChatYuan-large-v2 ChatYuan-large-v2是一个开源的支持中英双语的功能型对话语言大模型&#xff0c;与其他 LLM 不同的是模型十分轻量化&#xff0c;并且在轻量化的同时效果相对还不错&#xff0c;仅仅通过0.7B参数量就可以实现10B模型的基础效果&#xff0c;正是其如此的…...

编程日记 2023/8/7 1:45:08

SpringBoot集成Logback日志

SpringBoot集成Logback日志 文章目录 SpringBoot集成Logback日志一、什么是日志二、Logback简单介绍三、SpringBoot项目中使用Logback四、概念介绍一、日志记录器Logger1.1、日志记录器对象生成1.2、记录器的层级结构1.3、过滤器1.4、logger设置日志级别1.5、java代码演示1.6、…...

编程日记 2023/8/7 1:44:07

MATLAB(R2023a)添加工具箱TooLbox的方法-以GPOPS为例

一、找到工具箱存放位置 首先我们需要找到工具箱的存放位置&#xff0c;点击这个设置路径可以看到 我们的matlab工具箱的存放位置 C:\Program Files\MATLAB\R2023a\toolbox\matlab 从资源管理器中打开这个位置&#xff0c;可以看到里面各种工具箱 二、放入工具箱 解压我们…...

编程日记 2023/8/7 1:43:06

金融保险会议室怎么打造？数据安全+高效协作会议系统标杆

金融保险机构的会议室不仅是协作空间&#xff0c;更是数据安全与合规管控的核心场景。面对战略研讨、风控决策、客户洽谈等高密会议需求&#xff0c;传统会议系统已难以兼顾 “高清协作、智能提效、数据不外泄” 三大核心诉求。思科视频会议 思必驰音频 离线转写主机的组合方…...

编程新知 2026/4/2 8:16:01

Ostrakon-VL处理网络协议：从数据包捕获文件可视化网络流量

Ostrakon-VL处理网络协议&#xff1a;从数据包捕获文件可视化网络流量 1. 网络流量分析的痛点与机遇 网络工程师每天都要面对海量的网络数据包&#xff0c;传统的分析工具虽然功能强大&#xff0c;但存在几个明显痛点&#xff1a; 数据量大&#xff1a;一个中等规模企业的日…...

编程新知 2026/4/2 7:31:14

阿里云RDSClaw：给OpenClaw装上超级记忆和超级大脑，会怎样？

RDSClaw 喊你领取免费试用了&#xff01;点击下方训练营&#xff0c;可领取免费试用&#xff0c;跟随训练营中的课程可轻松部署你的专属小龙虾&#xff01; 训练营报名链接&#xff1a;养虾训练营- RDSClaw_阿里云培训中心-阿里云 参营福利&#xff1a;完成RDSClaw实操部署&a…...

编程新知 2026/4/2 7:31:13

大规模数据清洗效率提升300%的Polars 2.0实战方案（内存泄漏避坑全图谱）

第一章&#xff1a;Polars 2.0大规模数据清洗的范式跃迁 Polars 2.0 不再是 Pandas 的轻量替代品&#xff0c;而是一次面向现代硬件与真实数据工程场景的底层重构。其核心跃迁体现在三重解耦&#xff1a;计算图与执行引擎分离、内存布局与逻辑 Schema 解耦、以及 I/O 层与处理层…...

编程新知 2026/4/2 7:19:04

STM32H743+CubeMX配置FDCAN实战：如何利用TxFIFO优化FreeRTOS下的CAN通信性能？

STM32H743CubeMX配置FDCAN实战&#xff1a;如何利用TxFIFO优化FreeRTOS下的CAN通信性能&#xff1f; 在嵌入式系统开发中&#xff0c;CAN总线因其高可靠性和实时性被广泛应用于工业控制、汽车电子等领域。当我们将目光投向STM32H743这类高性能微控制器时&#xff0c;其内置的FD…...

编程新知 2026/4/2 6:24:29

实战指南：基于同一份OpenSpec，用快马平台同步生成前后端代码，确保联调无忧

最近在开发一个电商平台时&#xff0c;我们团队遇到了前后端联调效率低下的问题。由于接口文档和实际代码存在差异&#xff0c;经常出现前端调用参数和后端接收不一致的情况。后来我们发现&#xff0c;基于OpenSpec规范同步生成前后端代码可以完美解决这个问题&#xff0c;这里…...

编程新知 2026/4/2 4:19:15

SEO网站广告如何与本地化营销相结合

SEO网站广告与本地化营销的结合&#xff1a;如何提升本地企业的市场竞争力 在当今数字化经济的浪潮中&#xff0c;SEO网站广告和本地化营销已经成为企业营销的两大重要手段。如何将这两者有机地结合&#xff0c;以实现最大的营销效益&#xff0c;是许多企业面临的重要课题。本…...

编程新知 2026/4/2 4:17:15

ROS2开发环境搭建避坑指南：Win11 + WSL2 + Ubuntu 22.04 从安装到测试的完整记录

ROS2开发环境搭建实战&#xff1a;Win11与WSL2深度适配指南 环境准备与系统调优 在Windows 11上搭建ROS2开发环境&#xff0c;选择WSL2作为Linux子系统是最佳实践方案。不同于传统虚拟机方案&#xff0c;WSL2提供了接近原生Linux的性能表现&#xff0c;同时完美集成Windows桌…...

编程新知 2026/4/2 3:40:16

OpenClaw个性化设置：Qwen3.5-9B模型参数调优实战

OpenClaw个性化设置&#xff1a;Qwen3.5-9B模型参数调优实战 1. 为什么需要调整模型参数&#xff1f; 上周我在用OpenClaw自动处理一批技术文档时&#xff0c;遇到了一个奇怪的现象&#xff1a;同样的任务指令&#xff0c;有时候AI能完美执行&#xff0c;有时候却会输出一堆无…...

编程新知 2026/4/2 2:49:16

别再被@JsonFormat和@DateTimeFormat搞晕了！SpringBoot中时间处理的完整避坑指南

SpringBoot时间格式化终极指南&#xff1a;从JsonFormat到实战避坑 凌晨三点的办公室&#xff0c;咖啡杯已经见底&#xff0c;屏幕上却再次弹出那个熟悉的400错误——"Failed to parse Date value"。这可能是每个Java开发者在处理时间格式时都经历过的噩梦。时间数据…...

编程新知 2026/4/2 1:28:11