今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）
今晚完成了任务五的上面布局，
明天计划的事情：（一定要写非常细致的内容）
明天计划完成任务五
遇到的问题：（遇到什么困难，怎么解决的）
关于布局的一些问题，我觉得我的布局问题就是关于居中，居中如果加上了的话，是不是还要用上浮动才可以，要用到定位吗。还是说用个垂直居中呢？用哪个比较好呢？为啥这个图片那么大，可以缩小点，又看得到全部嘛
收获：（通过今天的学习，学到了什么知识）
居中对其的方式，有使用绝对定位和负外边距对块级元素进行垂直居中position: relative;
使用绝对定位和transform transform: translate(0, -50%)
这种方法有一个非常明显的好处就是不必提前知道被居中元素的尺寸了，因为transform中translate偏移的百分比就是相对于元素自身的尺寸而言的。
position: absolute;
相对于一个盒子内的文字进行居中生效的话，要对于他的父级元素来进行改变，才可以，单个的标签是没有办法进行居中的
添加背景图片的时候，需要设置单张图片。不然的话会填充全部的地方，那也就是说没有设置no-repeat;的时候是没办法不填充的
margin: auto
被居中元素的宽高也可以不设置，但不设置的话就必须是图片这种自身就包含尺寸的元素，否则无法实现
line-height 基于当前字体尺寸的百分比行间距
html{
font-size: 62.5%;
}
body{
margin: 0;
}
header{
height:4.4rem;
background-color: #5FC0CD;
text-align: center;
}
/*.return{*/
/*width: 20px;*/
/*height: 20px;*/
/*border-top: 1px solid white;*/
/*border-right: 1px solid white;*/
/*transform:rotate(45deg);*/
/*}*/
.arrow{
width: 1.5rem;
height: 1.5rem;
border-top: 3px solid white;
border-left: 3px solid white;
transform:rotate(-45deg);
display: inline-block;
margin-left: 3.5rem;
margin-top: 1.2rem;
float: left;
}
header span{
font-size: 2rem;
color: white;
line-height: 4rem;
}
.box2{
background:url(./doctor.png) no-repeat;
height:32.6rem;
background-size: 100%;
}
.headportrait{
background: url(./head\ portrait.png) no-repeat;
height: 8.45rem;
background-size:cover;
display: inline-block;
width: 8.45rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="task5.css">
</head>
<body>
<header>
<a class="return"></a>
<a class="arrow"></a>
<span>个人主页</span>
</header>
<div class="box2">
<div class="doctor"></div>
<div class="headportrait"></div>
<span class="name">高素雅</span>
<span class="age">51岁</span>
<span class="site">北京.通州.果园</span>
</div>
<div class="box3">
<div class="skill">
<span>专业技能</span>
</div>
<div class="require">
<span class="require1">住家</span>
<span class="require2">不含餐</span>
</div>
<div class="experience">
<span class="experience1">工作年限</span>
<span class="experience2">0~3年</span>
</div>
<div class="time">
<span class="time1">工作时间</span>
<span class="time2">全天</span>
</div>
<div class="price">
<span class="price1">服务价格</span>
<span class="price2">25元/小时</span>
</div>
<div class="introduce">
<span class="introduce1">自我介绍</span>
<span class="introduce2">可以洗衣、做饭、照顾老人。在护
工方面有5年的经验，经验丰富。</span>
</div>
<div class="connection">
<a class="leave word">留言</a>
<a class="phone">电话联系</a>
</div>
</div>
</body>
</html>
返回列表
评论