我的名片作品参与的我的名片的主题，主要运用了前端技术，其中包括HTML和CSS，对作品进行设计，实现了结构和样式的分离。

我的作品主要运用了前端的知识（HTML和CSS）: 在结构和样式上相分离，采用了外部样式表。①html的标签运用了< div></ div>和< span></ span>来设置名片的内容：代码如下：

姓名:Qing
职位:第五届青训营学员
手机号:*****
QQ:123
邮箱:123@qq.com

②用CSS对HTML内容进行美化，为了能够区分需要美化的内容，采用了多个基础选择器对内容进行选择，其中包括标签选择器，类选择器和id选择器。在布局上设置了高和宽，移动页面中的某一个标记,使用了定位属性 position:absolute| relative 移动位置的属性使用了left和top，来固定想要内容所在的位置。单位采用了百分比和像素两种形式，方便对内容的部署。设置下边距 margin-bottom margin 外边距外间距 bottom 底部,下部,下边其中还运用了元素显示模式的转换，</ span>属于行内元素，用display: black把它转换为了块元素，因为一个模式的元素需要另一个模式的特性，所以转换为块元素，更便于后续的设计。对于文字内容，用font-size设置了字体的大小，font-weight设置了字体的粗细，700为加粗，400为不加粗。font-family设置了字体。对于背景图片的引用运用了background-image: url(); 等等。 Css部分的代码如下: .pos { height: 100%; }

body { height: 100%; background: no-repeat; overflow: hidden; }

#whole { height: 320px; width: 500px; background-color: rgb(192, 250, 255); border-radius: 5%; position: relative; left: 25%; top: 15%; }

#header { background-image: url(image.baidu.com/search/deta…); height: 150px; width: 150px; border-radius: 75%; background-size: 100% 100%; position: absolute; top: 120px; left: 290px; }

#message { position: absolute; top: 60px; left: 60px; }

span { display: block; margin-bottom: 5px; font-family: 宋体; } 但是本作品运用码上掘金还未能导入正确的url,不能运行出图片内容，还需要改善。