t云建站,哈尔滨市建设工程质量安全站,免费网站建设价格,免费影视网站入口大全文章目录 1、为啥是这个#xff1f;2、仿制效果3、实现思路4、代码5、查看B站如何实现 1、为啥是这个#xff1f;
看到Bilibili首页的一个卡片#xff0c;看着效果很不错#xff0c;给人很舒适的感觉。一琢磨貌似也不难#xff0c;甚至只需要一层 div 就可以实现主要框架… 文章目录 1、为啥是这个2、仿制效果3、实现思路4、代码5、查看B站如何实现 1、为啥是这个
看到Bilibili首页的一个卡片看着效果很不错给人很舒适的感觉。一琢磨貌似也不难甚至只需要一层 div 就可以实现主要框架然后就动手试了一下。
2、仿制效果 3、实现思路
卡片主要分为三个部分主要内容区两个“阴影”块 如果要实现绝对定位最多三个 div 不能再多了 转念一想如果算上伪元素 ::before ::after 岂不是只用一个 div 就可以实现。
过程中可能会涉及一丢丢层叠顺序之类的小细节。实现起来确实也不难
4、代码
!DOCTYPE html
html langen
headmeta charsetUTF-8titleCard/titlestyle*{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
bodydiv classboxdiv classmain你好世界!/div/div
/body
/html5、查看B站如何实现
三个div这样可能更稳妥一些
