当青训营遇上码上掘金
当青训营遇上码上掘金
我很有幸参见到字节跳动青训营第五届，再次我第一次用码上掘金写的第一个作品也就是我的名片。
我的名片作品：主要用HTML和CSS来完成，下面来说一下设计思路。
设计思路
- 先创建HTML文件，以及css文件
- 并将其CSS引入到HTML文件中
- 将body背景通过CSS中的
background-color属性将背景设置为纯色（因为是简单的名片所以不让其背景过于单调） - 在body中添加div元素并将class属性设置为box，在通过css中的width，及height设置盒子的宽和高。
- 通过绝对定位让盒子使其保持文档中间
- 给盒子box通过css中的
border-radius属性将盒子设置为圆角（使其盒子更好看美观） - 给div通过CSS中的
background: linear-gradient(to bottom right ,rgb(139, 218, 241),rgb(160, 250, 167));添加渐变色 - 将盒子box的边框通过css中的
border: #fff 10px solid;添加一个边框（使其更像名片）
HTML代码部分
CSS代码部分
成品效果
代码部分缺少一些引用等是因为使用的是码上掘金将其自动生成/引用。
总结
现在大体的名片样子已经成型，接下来给盒子里面添加内容
- 给盒子box中添加一个盒子div并将class属性设置为nr（设置class方便写css中方便记忆）
- 在给盒子nr中添加自己想要的内容建立什么的等...通过各种文本标签来完成（自行网上查询）
- 盒子nr也用绝对定位的方法将其居中在盒子的上半部分，然后给其设置长宽高。
- 在盒子中想要添加图片的化我用的是将图片转换为base64然后将其编码复制进去使其不用连图片一起打包进去 这只是简单的名片设计，其了解前端的基础如：
- 绝对定位
- css中的圆角，背景
- 设置字体颜色 ，使字体居中
- 以及了解盒子模型 了解这些即可完成一些简单的名片设计，想让名片更有立体感可以给盒子box添加引用部分根据自己喜欢的样子给值。
要是一些学的时间比较长的可以给其盒子nr加个动画效果，比如鼠标移动上去使其变化字体颜色或者字体，这些动画效果可以通过JavaScript也可以通过css来完成。
