当青训营遇上码上掘金，这便是我这只立志成为人参的萝卜开始进化的地方
成果展示
代码介绍：
<!--head 头部标记 控制性信息 控制body中的内容信息 -->
<head>
<!-- 设置字符集编码格式为UTF-8 -->
<meta charset="UTF-8">
<style>
/* 删除某一行的快捷键 ctrl+d
<!-- --> 不可用
选择器:
三种基本选择器:id选择器 标记选择器 class选择器
id选择器语法格式: #id值{}
标记选择器语法格式: 标记名称{}
class选择器语法格式: .class值{} （使用频率最高）
*/
.html{
height: 100%;
}
body{
background-image: url('./bg.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
height: 100%;
overflow: hidden;
}
#card{
height: 350px;
width: 500px;
background-color: white;
/*设置标志的倒角*/
border-radius: 5%;
/*移动页面中的某一个标记,一般需要使用定位属性 position
absolute 绝对的
relative 相对的
父标记使用相对定位 子标记使用绝对定位---->父相子绝
位置移动的属性:left top
left 左边的,靠左的 实际上往右移动 距离左边有多远 水平方向上移动
top 上边的 靠上的 实际上往下移动 距离上边有多远 垂直方向上移动
*/
position: relative;
/*百分比 比例是参照父标记 如果父标记没有position定位属性 会一直往上找 直到找到根部标记html结束*/
left: 25%;
top: 15%;
}
#logo{
background-image:url('./logo.png') ;
height: 60px;
width: 300px;
background-size:100% 100%;
/*绝对定位属性*/
position: absolute;
/*往下移动20像素*/
top: 20px;
/*往右移动20像素*/
left: 20px;
}
#header{
background-image: url('./header.png');
height: 150px;
width: 150px;
border-radius:75%;
background-size:100% 100%;
/*绝对定位属性*/
position: absolute;
/*往下移动20像素*/
top: 120px;
/*往右移动20像素*/
left: 300px;
}
#message{
/*绝对定位属性*/
position: absolute;
/*往下移动20像素*/
top:100px;
/*往右移动20像素*/
left: 20px;
}
/* 标记选择器 标记名称从{}
设置下边距 margin-bottom
margin 外边距 外间距
bottom 底部,下部,下边
根据标记的两大特征来区分(
1.该标记是否可以独占一行
2.该标记是否课题设置高度和宽度
)来区分:行标记 块标记
行标记:不独占一行,一般不能设置高度而和宽度 如span标记 inline在一行上
快标记:独占一行,能够设置高度和宽度 如div标记 block 块
*/
span{
/* 强制性改变标记的特征 display */
display: block;
margin-bottom: 5px;
/*设置字体*/
font-family: 宋体;
}
</style>
</head>
<body>
<!--division 布局
设置高度和宽度 style
height高度
width宽度-->
<div id="card">
<div id="logo"></div>
<div id="header"></div>
<div id="message">
<!--换行标记 br-->
<!--font-size 字体尺寸
font-weight 设置字体粗细 border 加粗 lighter 变细 -->
<span style="font-size: 30px;font-weight: bolder" >姓名:Ultraman</span><br>
<span>职位:青训营菜鸟</span><br>
</div>
</div>
</body>
活动感悟：
名片是一个人在社会生活中的一种身份象征，很多场合都会需要用它来进行“自我介绍”，所以这个时候名片品质的好坏直接与个人形象对等起来，名片是什么你就是什么。所以名片设计意义重大。
当这种极具人文色彩的事物与技术结合，碰撞出了奇妙的火花~
