点击查看更新记录
更新记录
2021-07-28:菜单栏解析
点击查看参考教程
参考方向 | 教程原贴 |
---|---|
hexo-theme-butterfly-heo | 张洪HEO-产品设计师的知识博客 |
洪哥的细节美化样式 | zhheoblog.css |
洪哥的博客可以说算是基于butterfly主题里魔改的最舒服的一款了,从最基础的圆角到卡片UI排布,乃至侧栏底栏的UI重构,处处都能体现出产品设计师的专业素养。本文旨在对洪哥博客的一些组件进行反向解析。 此处之所以是反向解析,是因为我想的是告诉各位洪哥的改动思路,而不是单纯叫你们去抄洪哥的css,本文的最终目的是让各位既知其然亦知其所以然,能够在掌握之后开发属于自己的个性化主题。 因此,并不是说学完本文,你的主题就能和洪哥的博客一样了。而是学完以后,你就会自己制作了。 行文顺序会一个组件一个组件的解析,更新时间可能会很长。还请各位有点耐心。
有必要声明的一点是,请各位在反编译的过程中尊重他人的劳动成果,尤其需要注意站点的版权协议,抄UI就差不多了,可别把洪哥设计的各种图标也抠走了。那我可就成罪人了。
洪哥的细节美化样式都很贴心的写在了单独的css里,以供参考:zhheoblog.css,可以说,直接引用这个样式,对洪哥的主题模拟就完成了一大半。
下文会重点解析的也是各种dom结构的更改。所以读起来会非常像糖果屋微调合集。
洪哥的顶栏菜单,子菜单是横向排布的,且子菜单居中。
子菜单横向排布很好解决。在中添加以下样式
改成横向之后,会出现一个现象,因为子菜单的显隐是由父元素的hover属性控制的,所以当我们改动UI以后,为了按子菜单,鼠标势必会有一瞬间离开父菜单。这就导致一度出现“天下武功,唯快不破”的局面。为此,我们需要调整一下子菜单的偏移量,让他始终相对父元素保持居中。同时适当上调子菜单位置,让他能更好的和父菜单接合。
新建,添加样式
打开,修改内容。参数记得自己计算。