当青训营遇上码上掘金,我选择的题目是:我的名片,很高兴能参加这次主题创作活动,下面是我的介绍。
题目内容:
名片是向人介绍自我的重要工具,作为一名程序员用代码做自我介绍是一件非常酷炫的事情。请大家围绕“我的名片”这个主题进行代码创作。
实现思路:
因为本次的题目是名片的制作,所以我首先想到的是css的盒子模型,在CSS中,盒子模型的内容至关重要,网页内容往往以块的形式出现,而盒模型则是针对块的一种模型结构。
通过css的盒子模型实现个人名片,通常会让个人名片往往显得更加简洁得体,可以有效传播信息,好的布局和背景设置是很重要的。
在本次名片设计中,通过给定css的盒子模型给出内边距padding,外边距margin,边框border,将网页结构模块化,对块及内容进行设置。
使用绝对布局的方式,使得布局相对可控,让整个名片更加完整,漂亮。
同时在css代码中要学会灵活运用选择器代替类名,让代码更简洁可读一些。
具体效果,如图所示:
代码:
`
名片展示</head>
<body>
<div id="d1">
<p id="p1">青训营学员</p>
<div id="d3">贾亚赛</div>
<div id="d2"></div>
<div>
<span>----------------------------------</span>
<p id="p2">邮箱:jyasai@qq.com</p>
<p id="p3">电话:19832586253</p>
</div>
</div>
</body>
`
## 总结:
通过这次主题活动,我学到了很多css的相关知识,让我的技能更加全面,由于目前刚刚接触前端的相关知识,所以本次的名片设计还不算尽善尽美,希望可以通过在青训营中后面的学习可以掌握更多知识和技能。