当青训营遇上码上掘金。

创作灵感

看了一位作者的代码作品，他的作品是一个卡片介绍，然后我就有了也做一个卡牌的想法，当然不能做的一样，所以我就想起来一个叫神经拟态的样式风格，个人感觉这个风格很不错，比较喜欢，然后就想着用这个神经拟态配合卡片实现一个介绍的名片，最后我想说的是对于审美这方面，我表示对搭配这方面，可以说是乱来的，哈哈哈。

主题

一只飞翔的猪，这个主题其实是我在网上找图片，找到了这个飞翔的猪的图片。然后就取了这个名字。

演示

忘记做卡片内容的自适应了，就只设置了一个最小宽度，建议全屏观看，(^o^)/~。

技术

代码我就不放了，可以点进去自己看，我就大概说一下用了哪些css技术吧，有flex布局、怪异盒模型、通过阴影实现的神经拟态风格、定位、边框、文字居中等等，差不多就这些。

思路

就是app的大盒子开启flex布局让里面单独的一个div居中，然后给卡片中放入两个div左右个一个，给卡片的div设置flex布局，并且横向为靠两边分布，这样就可以不用设置margin来挤开两个盒子了而且还是自适应的。 然后两个盒子中的图片的盒子在设置一个padding这样就到达了画框的效果，至于介绍的那个div就是用p标签和h4标签写文字，然后在app给盒子中设置所有文字的样式。

总结

最后实现的效果可能不尽人意，但是重在过程，通过编写这个名片的过程让我重新的加深了一些css属性的印象，并且能够感觉到通过不断的编写这些代码，让自己对一些属性和样式使用的更加熟练，可以说是有收获的。