<html class="html">
<!--注释快捷键:Ctrl+ shift+/-->
<!--head 头部标记 控制性信息 控制body中的内容信息-->
<head>
<!--设置字符集编码格式 为 UTF-8-->
<meta charset="UTF-8">
<style>
/*
选择器:
三种基本选择器: id选择器 标签名选择器 class类选择器
id选择器:#id值{} //由于id值唯一,要慎重使用
标签选择器:标签名{} //由于可能会出现多个相同标签,所以慎用
class选择器: .class值{}
*/
/* #body {
background-image: url(‘bg.jpg‘);
}
body{
background-image: url(‘bg.jpg‘);
}*/
.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;
/*移动页面中的某一个标签,一般需要使用定位属性:position
absolute (绝对的)
relative (相对的)
父标签使用相对定位,字标签使用绝对定位--->父相子绝
位置移动的属性： left top
*/
position: relative;
/*百分比比例参考父标签相对，如果上层没有父标签，会找到根标签，*/
left:25%;
top:15%;
/*设置标签的边角弧度border-radius*/
border-radius: 4%;
}
.logo{
background-image:url(‘./logo.png‘);
height: 60px;
width: 300px;
background-size: 100% 100% ;
position: absolute;
left: 20px;
top: 20px;
}
.header{
background-image:url(‘./header.png‘);
height: 150px;
width: 150px;
border-radius: 75px;
background-size: 100% 100%;
position: absolute;
left: 300px;
top: 100px;
}
.message{
position: absolute;
left: 20px;
top: 120px;
}
/*标签选择器 设置span之间的距离
设置下边距 margin-bottom
根据标签的两大特征,(
1,该标记是否可以独占一行
2,该标记是否可以设置高度和宽度
)来区分:行标签 块标签
行标签:不能独占一行, 一般不能设置高度和宽度 如:span标签 inline (在一行上)
块标签:独占一行,能够设置高度和宽度 如:div标签 block(块)
*/
span{
/*强制性改变标签特征 :用display*/
margin-bottom:5px;
display:block;
/*设置字体
font-family
*/
font-family: 黑体;
}
</style>
</head>
<body class="body" ><!-- division 布局
设置高度和宽度 style属性(风格)
height(高)
width(宽)
-->
<!-- 通过id来区分是哪个div -->
<div class="card" >
<!-- 如果想引入图片,可以把图片资源放在web下,方便引用 ,一定要给图片设置大小,不然不显示 -->
<div class="logo" >
</div>
<div class="header"></div>
<div class="message">
<!--font-size -->
<span style="font-size:20px;font-weight: bold">姓名:张三</span><br>
<span>职位:java讲师</span><br>
<span>手机号:1883889488</span><br>
<span>QQ:8886889488</span><br>
<span>邮箱:888688@qq.com</span>
</div>
</div>
</body>