爱站程序员基地<! DOCTYPE html>
<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;/*移动页面中的某一个标签,一般需要使用定位属性:positionabsolute (绝对的)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>
