携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情
🐱🏍写在前面
按照惯例在写文章之前都得介绍一下为什么要写这篇文章，但其实我只是想在下班之后让自己不那么堕落，所以还是打开电脑来写点代码，但是又不知道写什么，刚好昨天体验了一下码上掘金 那么不如今天就来仿造一个码上掘金吧（只限于静态部分
拆分结构
从一个干饭人的角度看过去，嗯~ 没有看到footer应该就是由一个header和main组成。然后头部看起来可以直接用万能flex直接space-between直接解决两侧布局的问题。main这边可以先拆出一个左侧的sider bar，在这中间又可以分出header content footer再就是右侧的内容区域了，跟左侧的sider bar相似，大致结构已经清楚了下面就是敲代码了
准备开始
还是先来创建个代码片段吧，这一章是写一个首页，也就是下面这个地方展示片段列表的页面
这里先选择创建一个空白的代码片段，之后如果有时间的话再本地启一个
react项目来重写一遍，再有时间的话再上个python或者node写个后端服务来玩一下，要是感兴趣的话欢迎持续关注一下，扯的有点远了直接开始吧
编码环节
先给项目起一个响亮的名字，就叫码上掘金吧
首先给项目搭一个框架，颜色直接从官网偷#18212d还有直接拿来的logo 跟刚刚拆分的一样，先用<header>来写一个头部，然后<main>作为内容区域，来看一下效果
很显然，这还只是开始，所以再往
css里面加点料他就变成了这样，这下就正常多了，不过header还差一个底部边框，还有minder还差一个hover的效果
这里用
after给header加上个底部边框，用after的好处是可以在不影响盒子自身border的情况下给盒子加上边框，而再加上absolute之后我们可以很方便的为元素设置内边框，不会因为设置了外边框导致盒子占用的宽度或者高度增加，也不用为了实现内边框去设置盒模型为content-box 总之我感觉使用after来设置边框是特别好的一种方案 emmmm继续写代码吧
现在，底部边框就出现了，继续来实现
minder的hover效果，在这里本来以为掘金的大佬是在hover的时候去改一下background，但还是我太菜了，大佬在这边利用fill-opacity属性巧妙的控制白色透明度实现了hover的效果，这是一个用于svg元素的属性，来自MDN的介绍是：该属性指定了填色的不透明度或当前对象的内容物的不透明度。 抱着学习的心态我仔细思考了一下用这种方法做hover效果的好处，总结一下这种方法应该是更符合对于做一个图标的hover态效果的，毕竟现在看到的效果没有扩散到图标外，所以完全可以在svg图标内来解决，而对于盒子本身的hover态效果可能应该更多用于除图标外或者联动的一些效果，总之，这样应该更加规范吧。直接进入总结吧剩下的下次再写，代码会在片段通过审核之后贴在下面，欢迎大佬指出可以改进的地方
代码片段如下
🎉总结
这篇文章也是下班之后强行自律拿刷b站的时间换来的，内容不难，但主要还是想要让自己保持一个时刻学习的状态，虽然是仿造，但是多看看多学学也能获得提升，希望大家一起加油！
