发表于： 2018-10-31 21:30:42
1 825
今天完成的事情：初步完成了任务5，了解了怎样用代码来控制页面头部和底部固定不变，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="task05.css">
</head>
<body>
<header>
<div>
<img src="task05-cancle.png" height="25" width="15"/>
<div>
<p>个人主页</p>
</div>
</div>
</header>
<main>
<div>
<img src="task05-tou.png" height="100" width="100"/>
<div clsaa="name-a">
<div>
<p>徐士林 55岁</p>
</div>
<div>
<img src="task05-location.png" height="23" width="18"/>
<p> 京城·四方·报纸林</p>
</div>
</div>
</div>
<div>
<div>
<p> 专业技能</p>
</div>
</div>
<div>
<div>
<img src="task05-star.png" height="15" width="16"/>
<p> 住家</p>
</div>
<div>
<img src="task05-star.png" height="15" width="16"/>
<p> 不含餐</p>
</div>
</div>
<div>
<div>
<p>从业年限</p>
</div>
<div>
<p>0—3年</p>
</div>
</div>
<div>
<div>
<p>工作时间</p>
</div>
<div>
<p>全天</p>
</div>
</div>
<div>
<div>
<p>服务价格</p>
</div>
<div>
<p>25元/小时</p>
</div>
</div>
<div>
<div>
<p>自我介绍</p>
</div>
<div>
<p>
可以洗衣、做饭、照顾老人。在护工方面有5年的经验，经验丰富。</p>
</div>
</div>
</main>
<footer>
<div>
<div >
<span>留言</span>
</div>
<div></div>
<div>
<span>电话联系</span>
</div>
</div>
</footer>
</body>
</html>
明天计划的事情，完成任务5，了解任务6
遇到的问题：
1，今天在做任务5 的时候，页面顶端header初步构想是用float来做，但是如果用float来做的话，首先一点的是div盒子里面的居中问题不是很好解决，最后的话我决定采用flex布局来做，
<header class="one">
<div class="top">
<img src="task05-cancle.png" height="25" width="15"/>
<div class="my">
<p>个人主页</p>
</div>
</div>
</header>
.top{
background-color: #4CB4C3;
width: 100%;
height: 60px;
display: flex;
align-items: center;
}
.my{
color: white;
display: flex;
height: 60px;
width: 100%;
justify-content: center;
align-items: center;
}
.top img{
margin-left: 3vw;
}
如代码所示，采用flex布局可以利用align-items: center实现文字和图片的垂直居中问题，利用 justify-content: center; 可以很好的解决水平居中的为题。
2.在做中间内容背景图上面内容的时候，因为在护工头像右边是两行文字，而且下面那行文字前面还带有一个小的图标，初次构想我是想在头像右边加一个大的div盒子，然后把这两行文字利用</br> 换行来解决问题，但是在实际操作过程中我发现这种写法最后换行的话问题太多，由于我没能找到解法所以放弃来这种写法，然后我把这两行文字分成两个div，最外面在 嵌套一个大的div,最上面名字那一行倒是很好搞定，位置的话利用头像的位置来做相对定位，下面一行地址也是利用相对定位的写法，但是在进行页面缩放的时候第二行位置会随着挤压而发生改变。随后我采用第三种写法，利用flex布局的方法，先利用相对位置确定名字所在位置，下面地址利用flex布局中的
flex-direction="column"
来解决这个问题，最终达到效果。
收获：通过今天的学习，对flex布局有了更加深刻的理解，了解了怎么样设置背景图片及其等比例缩放，怎么样利用绝对定位来控制页面顶部和底部的固定。最后希望大家看到这边日报的，代码中出现任何问题最好先备份一下然后再修改，不要像我一样任务5 辛苦了一天，结果到最后提交的时候因为一点错误导致本地代码和github代码全部丢失。千万不要大意呀！！！
返回列表
评论