当青训营遇上码上掘金
本文用于
「青训营 X 码上掘金」主题创作活动中对我的名片代码做注解。(本文只介绍了名片正面的写法，名片背面的写法见后续文章)
主题一（我的名片）：名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。请大家围绕“我的名片”这个主题进行代码创作。
查找了一些名片格式，决定仿照下面这个美食订餐卡的格式进行一个名片的制作
名片背景
在浏览器搜索选定下图作为名片的背景
名片正面
简单设计了一下名片正面的内容:
写名片的背景
用css定义背景，使用background-image:url()属性。
测量一下背景图的宽和高（宽800px高504px）
布置名片正面的内容
css部分先使用下列代码清除所有的边距
* {
margin:0;
padding:0;
}
- 带有稀土掘金logo的部分应该作为图片插入到html中
- 左下角花束也要作为图片放置在代码中
- 其余部分均可以放置在标题标签或者段落标签中
名片正面要用到的图片
遇到的问题1：
在单纯添加img图片时会变成下图样式
但是img是行内标签，为什么会出现这样的格式呢？
稀土掘金logo导致
个人名片及其下方所有文字都向下移动了，但是我们需要实现的效果是个人名片位于名片顶部。
解决方案：给
img标签添加float:left声明，实现下方效果
给图片定位的方法
精灵图
也叫雪碧图，将多张图片合为一整张图，用
background-position实现背景图片的定位技术
用这样的方法可以将一个网页面中所需要用到的所有图片放在一张图中，只用保存一个文件，减少内存压力。
position
具体使用方法推荐参考MDN文档：position - CSS（层叠样式表） | MDN (mozilla.org)
遇到的问题2:
正面名片写完之后发现中间有一点点空，正好需要一个提示向下滑动查看名片反面，找到了让文本居于页面正中央的方法。
具体方法参考：设置div出现在网页的正中央_冰息的博客-CSDN博客
