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(这样可能更稳妥一些)

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

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

相关文章

MacBook Pro 16 M1 Max 升级 macOS Ventura 13.5 兼容测评

今天给大家带来了 MacBook Pro 16 M1 Max 升级 macOS Ventura 13.5 兼容 100 挑战赛 的视频&#xff0c;现在充电头再以文章的形式呈现给大家&#xff0c;让大家更清楚、直白的了解这款笔记本在升级系统后的兼容性如何。 MacBook Pro 16 M1 Max 配置了 140W 的 MagSafe 充电口&…

mybatisJava对象、list和json转换

1. 参考mybatis-plus mybatis Java对象、list和json转换 网上好多不靠谱&#xff0c;参考mybatis-plus中TableField&#xff0c;mybatis中自定义实现 这样不需要对象中属性字符串接收&#xff0c;保存到表中&#xff0c;都是转义字符&#xff0c;使用时还要手动转换为对象或者…

【Opencv入门到项目实战】(四):图像梯度计算|Sobel算子|Scharr算子|Laplacian算子

文章目录 0.引言1. Sobel算子2. Scharr算子3. Laplacian算子 0.引言 在图像处理中&#xff0c;梯度是指图像中像素灰度变化的速率或幅度&#xff0c;我们先来看下面这张图 假设我们想要计算出A点的梯度&#xff0c;我们可以发现A点位于边缘点&#xff0c;A点左边为黑色&#x…

骨传导耳机真不伤耳吗?骨传导耳机有什么好处?

骨传导耳机真不伤耳吗&#xff1f;骨传导耳机有什么好处&#xff1f; 我先来说说骨传导耳机的工作原理吧&#xff0c;骨传导是一种传声方式&#xff0c;声波通过颅骨、颌骨等头部骨头的振动&#xff0c;将声音传到内耳。其实骨传导的现象我们很常见&#xff0c;就像我们平时嗑瓜…

Qt5.13引入QtWebApp的模块后报错: error C2440: “reinterpret_cast”: 无法从“int”转换为“quintptr”

1、开发环境 Win10-64 qt5.13 msvc2015-64bit-release 2、报错 新建一个demo工程。 引入QtWebApp的httpserver、logging、templateengine三个模块后。 直接运行&#xff0c;&#xff0c;此时报错如下&#xff1a; E:\Qt5.13.1\install\5.13.1\msvc2015_64\include\QtCore…

测试工程师的工作

目录 1.何为软件测试工程师&#xff1f; 2.软件测试工程师的职责&#xff1f; 3.为什么要做软件测试&#xff1f; 4.软件测试的前途如何&#xff1f; 5.工具和思维谁更重要&#xff1f; 6.测试和开发相差大吗&#xff1f; 7.成为测试工程师的必备条件 8.测试的分类有哪…

【chrome扩展开发】vue-i18n使用问题及解决方案

记录chrome扩展开发时调用vue-i18n的一些问题和解决方法 环境 vue: ^3.3.4vue-i18n: ^9.2.2vite: ^4.4.8 错误1 Uncaught (in promise) EvalError: Refused to evaluate a string as JavaScript because unsafe-eval is not an allowed source of script in the following Con…

阿里云平台注册及基础使用

首先进入阿里云官网&#xff1a; 阿里云-计算&#xff0c;为了无法计算的价值 点击右上角“登录/注册”&#xff0c;如果没有阿里云账号则需要注册。 注册界面&#xff1a; 注册完成后需要开通物联网平台公共实例&#xff1a; 注册成功后的登录&#xff1a; 同样点击右上角的…

python与深度学习(十四):CNN和IKUN模型二

目录 1. 说明2. IKUN模型的CNN模型测试2.1 导入相关库2.2 加载模型2.3 设置保存图片的路径2.4 加载图片2.5 图片预处理2.6 对图片进行预测2.7 显示图片 3. 完整代码和显示结果4. 多张图片进行测试的完整代码以及结果 1. 说明 本篇文章是对上篇文章IKUN模型训练的模型进行测试。…

el-select控制单选还是多选

<el-form :inline"true" :model"form" class"demo-form-inline"><el-form-item><el-select v-model"form.properties_id" placeholder"请选择样品性质" clearable :multiple"multiple_properties"…

Linux 系统编程 开篇/ 文件的打开/创建

从本节开始学习关于Linux系统编程的知识&#xff01; 学习Linux的系统编程有非常多的知识点&#xff0c;在应用层面&#xff0c;很重要的一点就是学习如何“用代码操作文件来实现文件创建&#xff0c;打开&#xff0c;编辑等自动化执行” 那如何自动化实现对文件的创建&#…

GitHub上删除项目后,IDEA分享项目到GitHub提示Remote is already on GitHub

文章目录 一、错误信息二、解决方法1.删除GitHub上的项目2.找到项目里的.git隐藏文件3.找到config文件4.打开config文件&#xff0c;删除[remote "git-test"]及下面两行内容5.继续使用IDEA分享项目到GitHub即可 一、错误信息 二、解决方法 1.删除GitHub上的项目 2.…

整理mongodb文档:collation

文章连接 整理mongodb文档:collation 看前提示 对于mongodb的collation。个人主要用的范围是在createcollection&#xff0c;以及find的时候用&#xff0c;所以本片介绍的时候也是这两个地方入手&#xff0c;对新手个人觉得理解概念就好。不要求强制性掌握&#xff0c;但是要…

Flink CEP(三)pattern动态更新

线上运行的CEP中肯定经常遇到规则变更的情况&#xff0c;如果每次变更时都将任务重启、重新发布是非常不优雅的。尤其在营销或者风控这种对实时性要求比较高的场景&#xff0c;如果规则窗口过长&#xff08;一两个星期&#xff09;&#xff0c;状态过大&#xff0c;就会导致重启…

谈谈新能源技术

目录 1.什么是新能源 2.新能源的发展历程 3.新能源的优势 1.什么是新能源 新能源是指利用自然界可再生资源、无害的高效能资源或者核能等来替代传统能源的能源形式。与传统化石燃料相比&#xff0c;新能源具有更高的可持续性、更低的环境影响和更长久的供应。以下是一些常见的…

C++多线程环境下的单例类对象创建

使用C无锁编程实现多线程下的单例模式 贺志国 2023.8.1 在多线程环境下创建一个类的单例对象&#xff0c;要比单线程环境下要复杂很多。下面介绍在多线程环境下实现单例模式的几种方法。 一、尺寸较小的类单例对象创建 如果待创建的单例类SingletonForMultithread内包含的成…

openwr折腾记7-Frpc使用自主域名解析透传本地服务

FFrpc使用自主域名解析透传本地服务 综述frp透传服务结构流程-http服务域名透传 第一部分openwrt-frpc客户端配置和使用指定服务器指定规则在自己的域名运营商处添加域名解析 第二部分gpt3.5辅助shell编码实现frp自由切换服务器并更新dns解析获取切换服务器参数脚本实现切换 更…

Kubernetes(K8s)从入门到精通系列之十:使用 kubeadm 创建一个高可用 etcd 集群

Kubernetes K8s从入门到精通系列之十&#xff1a;使用 kubeadm 创建一个高可用 etcd 集群 一、etcd高可用拓扑选项1.堆叠&#xff08;Stacked&#xff09;etcd 拓扑2.外部 etcd 拓扑 二、准备工作三、建立集群1.将 kubelet 配置为 etcd 的服务管理器。2.为 kubeadm 创建配置文件…

postgresql表膨胀处理之pgcompacttable部署及使用

环境&#xff1a; 1&#xff09;redhat-release&#xff1a;CentOS Linux release 7.6.1810 (Core) 2&#xff09;database version&#xff1a;postgresql 14.6 一、添加pgstattuple pgcompacttable工具使用过程中需要依赖pgstattuple&#xff0c;因此需先添加pgstattuple…

服务器排查并封禁ip访问

前言 购买的服务器难免会遇到被攻击的情况&#xff0c;当我们发现服务器状态异常时&#xff0c;可以通过连接当前服务器的ip排查一下&#xff0c;并对可疑ip进行封锁禁止。我们可以通过路由跟踪来查看可疑ip。以下是两种解决方案。 解决方案 iptables netstat是一个用于监视…