60多行代码仿制B站首页一个好看的卡片效果
文章目录
- 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、为啥是这个？2、仿制效果3、实现思路4、代码5、查看B站如何实现 1、为啥是这个？ 看到Bilibili首页的一个卡片，看着效果很不错，给人很舒适的感觉。一琢磨貌似也不难，甚至只需要一层 div 就可以实现主要框架…...
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…...
ESP32-C2开发板 ESP8684芯片 兼容ESP32-C3开发
C2是一个芯片采用4毫米x 4毫米封装，与272 kB内存。它运行框架，例如ESP-Jumpstart和ESP造雨者，同时它也运行ESP-IDF。ESP-IDF是Espressif面向嵌入式物联网设备的开源实时操作系统，受到了全球用户的信赖。它由支持Espressif以及所有…...
Zebec 创始人 Sam 对话社区，“Zebec 生态发展”主题 AMA 回顾总结
近日，Zebec Protocol 创始人 Sam 作为嘉宾，与社区进行了以“Zebec 生态发展”为主题的 AMA 对话。Sam 在线上访谈上对 Zebec 路线图、Zebec 质押、NautChain通证进行了解读，并对 Zebec 的进展、生态建设的愿景进行了展望。本文将对本次 AMA 进…...
一台电脑给另外一台电脑共享网络
这里写自定义目录标题 有网的电脑上操作一根网线连接两台电脑没网的电脑上 有网的电脑上操作 右键->属性->共享 如同选择以太网，勾选。确认。 一根网线连接两台电脑 没网的电脑上 没网的电脑为mips&麒麟V10 新增个网络配置ww，设置如下。 …...
AAA 认证
概念 AAA是认证（Authentication）、授权（Authorization）和计费（Accounting）的简称，是网络安全中进行访问控制的一种安全管理机制，提供认证、授权和计费三种安全服务。 AAA 常见架构...
jvm-程序计数器
1、是什么 4 学习路线 类加载器 内存结构方法区 类堆 对象虚拟机栈程序计数器本地方法栈 执行引擎解释器编译器 热点代码 5 程序计数器–作用 java源代码编译蛏二进制字节码 jvm指令。 对所有平台保持一致性。记住下一条jvm指令的执行地址。寄存器，cpu中读取速度…...
NestJs Debug配置文件
（事缓则圆,人缓则安,语迟则贵,虎行似病,鹰立似睡。清俞万春《荡寇志》） {"version": "0.2.0","configurations": [{"type": "node","request": "launch","name": &quo…...
题解 | #C.idol!!# 2023牛客暑期多校6
C.idol!! 数学 题目大意 正整数 n n n 的双阶乘 n ! ! n!! n!! 表示不超过 n n n 且与 n n n 有相同奇偶性的所有正整数乘积 求对于给定 n n n ， ∏ i 1 n i ! ! \prod\limits_{i1}^n i!! i1∏ni!! 的后缀 0 0 0 个数 解题思路 根据双阶乘的性质&…...
使用filebeat收集并解析springboot日志
序 本文主要研究一下如何使用filebeat收集并解析springboot日志 安装 在官网的下载页面filebeat/downloads提供了一些特定平台的安装包，不过对应linux最为省事的安装方式就是直接下载x86_64压缩包，然后解压即可 wget https://artifacts.elastic.co/d…...
P1993 小 K 的农场
小 K 的农场 题目描述 小 K 在 MC 里面建立很多很多的农场，总共 n n n 个，以至于他自己都忘记了每个农场中种植作物的具体数量了，他只记得一些含糊的信息（共 m m m 个），以下列三种形式描述：…...
Spring boot 集成 Skywalking 配置 || Skywalking 打不开【已解决】
一、Skywalking官网 Apache SkyWalking 1.下载Skywalking APM （如果下载最新的，双击打开闪退，选老点的版本） 2. 下载 Skywalking Agents 如果下载太慢，建议复制下载链接，然后用下载器下载，比…...
手把手教你使用 ftrace 对 Linux 系统进行 debug
1、简介 strace：用来跟踪 Linux 进程执行时的系统调用和接收所接收的信号，可以跟踪到一个进程产生的系统调用，包括参数，返回值，执行消耗的时间。 ftrace：是一个 Linux 内核函数跟踪器，function tracer，旨在帮助开发人员和系统设计者可以找到内核内部发生的事情，从 L…...
【练】要求定义一个全局变量 char buf[] = “1234567“，创建两个线程，不考虑退出条件，打印buf
要求定义一个全局变量 char buf[] "1234567"，创建两个线程，不考虑退出条件，另： A线程循环打印buf字符串，B线程循环倒置buf字符串，即buf中本来存储1234567，倒置后buf中存储7654321. 不…...
iOS Viper架构（中文版）【看懂这篇就够了】
完整源码地址 一、iOS_Viper iOS的Viper架构，作为一个从业多年的iOS开发者，我个人认为应该要会一点viper 二、前言 viper的设计模式在iOS开发中不流行，甚至是Swift中，也没有用，我认为比较可惜。作为iOSer,当你掌握…...
深入理解缓存 TLB 原理
今天分享一篇TLB的好文章，希望大家夯实基本功，让我们一起深入理解计算机系统。 TLB 是 translation lookaside buffer 的简称。首先，我们知道 MMU 的作用是把虚拟地址转换成物理地址。 MMU工作原理 虚拟地址和物理地址的映射关系存储在页表…...
获取k8s scale资源对象的命令
kubectl get --raw /apis/<apiGroup>/<apiVersion>/namespaces/<namespaceName>/<resourceKind>/<resourceName>/scale 说明：scale资源对象用来水平扩展k8s资源对象的副本数，它是作为一种k8s资源对象的子资源存在…...
基于ChatYuan-large-v2 语言模型 Fine-tuning 微调训练 广告生成 任务
一、ChatYuan-large-v2 ChatYuan-large-v2是一个开源的支持中英双语的功能型对话语言大模型，与其他 LLM 不同的是模型十分轻量化，并且在轻量化的同时效果相对还不错，仅仅通过0.7B参数量就可以实现10B模型的基础效果，正是其如此的…...
SpringBoot集成Logback日志
SpringBoot集成Logback日志 文章目录 SpringBoot集成Logback日志一、什么是日志二、Logback简单介绍三、SpringBoot项目中使用Logback四、概念介绍一、日志记录器Logger1.1、日志记录器对象生成1.2、记录器的层级结构1.3、过滤器1.4、logger设置日志级别1.5、java代码演示1.6、…...
MATLAB(R2023a)添加工具箱TooLbox的方法-以GPOPS为例
一、找到工具箱存放位置 首先我们需要找到工具箱的存放位置，点击这个设置路径可以看到 我们的matlab工具箱的存放位置 C:\Program Files\MATLAB\R2023a\toolbox\matlab 从资源管理器中打开这个位置，可以看到里面各种工具箱 二、放入工具箱 解压我们…...
[特殊字符] 智能合约中的数据是如何在区块链中保持一致的？
🧠 智能合约中的数据是如何在区块链中保持一致的？ 为什么所有区块链节点都能得出相同结果？合约调用这么复杂，状态真能保持一致吗？本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里…...
未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？
编辑：陈萍萍的公主一点人工一点智能 未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战，在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...
JavaSec-RCE
简介 RCE(Remote Code Execution)，可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景：Groovy代码注入 Groovy是一种基于JVM的动态语言，语法简洁，支持闭包、动态类型和Java互操作性，…...
python打卡day49
知识点回顾： 通道注意力模块复习空间注意力模块CBAM的定义 作业：尝试对今天的模型检查参数数目，并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...
安宝特方案丨XRSOP人员作业标准化管理平台：AR智慧点检验收套件
在选煤厂、化工厂、钢铁厂等过程生产型企业，其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进，需提前预防假检、错检、漏检，推动智慧生产运维系统数据的流动和现场赋能应用。同时，…...
ssc377d修改flash分区大小
1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...
MVC 数据库
MVC 数据库 引言 在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...
将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？
Otsu 是一种自动阈值化方法，用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理，能够自动确定一个阈值，将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...
今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存
文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...
Device Mapper 机制
Device Mapper 机制详解 Device Mapper（简称 DM）是 Linux 内核中的一套通用块设备映射框架，为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程，并配以详细的…...