今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）
今天完成了任务六的一部分CSS样式，更改了一下HTML的部分布局
明天计划的事情：（一定要写非常细致的内容）
计划继续完成任务六
遇到的问题：（遇到什么困难，怎么解决的）
用flex布局的时候，我的页眉的局部我用的flex，可是我用了以后发现自动向内部靠拢了，我无意间敲出来的
收获：（通过今天的学习，学到了什么知识）
我学习到了，部分FLEX布局的应用，那个时候局中部分我用了两个居中办法，一个那个时候还不生效，后老我查了后我才知道是这样的
解决方法：
1.确定好自己的主轴方向是不是row，如果是column，那么恭喜你，align-items:center是不起效果的，这时候你可以试试justify-content:center,是不是居中了呢？（ps:这个问题我花了半天时间才弄明白，之前一直以为align-items只是控制上下居中的，没有注意主轴的方向）
2.在带有数字的view或者text标签中不能上下居中,布局如下：
情况1：都是中文的情况下，给view加上align-items:center 其实是能居中的。
原来是要我确认好主轴的方向后，再尝试使用了FLEX试试，我继续用雪碧图敲完剩下的
关于雪碧图的，我能认为的就是一些概念的理解问题
<!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="task6.css">
</head>
<body>
<header>
<div class="box">
<!-- 菜单盒子 -->
<button class="menu">找雇主</button>
<button class="submenu">找护工</button>
</div>
<div class="icon"></div>
<!-- 导航盒子 -->
</header>
<main>
<div>
<button>
<span>所在地</span>
<span></span>
<span>食宿</span>
<span></span>
<span>病人情况</span>
</button>
</div>
<div>
<div>
<span></span>
<span>服务日期</span>
<p>2015-7-5 至 2015-7-12</p>
<span></span>
<span>北京.通州.果园</span>
</div>
<div>
<span>25元/小时</span>
<span></span>
</div>
</div>
<div>
<span></span>
<span>服务日期</span>
<p>2015-7-5 至 2015-7-12</p>
<span></span>
<span>北京.通州.果园</span>
</div>
<div>
<span>35元/小时</span>
<span></span>
</div>
<div>
<span></span>
<span>服务日期</span>
<p>2015-7-5 至 2015-7-12</p>
<span></span>
<span>北京.通州.果园</span>
</div>
<div>
<span>45元/小时</span>
<span></span>
</div>
<div>
<span></span>
<span>服务日期</span>
<p>2015-7-5 至 2015-7-12</p>
<span></span>
<span>北京.通州.果园</span>
</div>
<div>
<span>45元/小时</span>
<span></span>
</div>
<div>
<span></span>
<span>服务日期</span>
<p>2015-7-5 至 2015-7-12</p>
<span></span>
<span>北京.通州.果园</span>
</div>
<div>
<span>45元/小时</span>
<span></span>
</div>
<div>
<img>
<span>服务日期</span>
</div>
</main>
<footer>
<div>
<img>
<span>首页</span>
</div>
<div>
<img>
</div>
<div>
<img>
<span>我的</span>
</div>
</footer>
</body>
</html>
html{
font-size:62.5%
}
body{
font-size:1.6rem;
margin: 0;
}
header{
height:4.4rem;
background-color:#5FC0CD;
display:flex;
justify-content: center;
align-items: center;
}
.box{
background-color: #55A8B3;
display: flex;
border-radius: .5rem;
}
.menu{
font-size:1.7rem;
width:7.2rem;
height:3.5rem;
color:white;
background-color:#55A8B3;
border:1px solid #55A8B3;
border-top-left-radius:.5rem;
border-bottom-left-radius:.5rem;
}
.submenu{
font-size:1.7rem;
width:7.2rem;
height:3.5rem;
color:#5FC0CD;
background-color:white;
border:1px solid white;
border-radius: .5rem;
}
.icon{
background: url(./css_sprites\ \(1\).png) no-repeat;
width: 2.1rem;
height: 2.2rem;
background-position: -10px -10px;
zoom: 0.5;
}
返回列表
评论