发表于: 2018-08-02 22:59:07

1 601


今天完成的事情:

1.页面一做完了,不过大佬不让我做前端了,让我转PM。。。

2.

明天计划的事情:

1.开始PM任务一

2.

遇到的问题:暂无


收获:

1. 那个响应式算是学会了一些,可以收缩页面,然后变成单列显示。

所谓col-xs就是适合超小屏幕应用。

col-sm适合小屏幕应用。

我把col-xs后面的数字改成了12,

也就是只有一列,就可以了。

<div class="row">
<div class="col-xs-12 col-sm-3 col-han">
<div>
<img src="media/rocket.png">
</div>
<h4>高效</h4>
<p class="col-p">将五到七年的成长时间,缩短到一年到三年。</p>
</div>

代码的意思是,宽的时候是四行,窄的时候是一行。


2.关于响应式,如何让竖向排列的文字不变形?

这就应用到媒体查询了,具体就是横向排列靠左,纵向排列居中。

@media only screen and (max-width: 600px) {
.col-p {
text-align: center;
   }
@media only screen and (min-width: 992px) {
.col-p {
text-align: left;
   }


3.关于图片垂直居中的,就是让子元素都垂直居中:

display: flex;
justify-content: center;
align-items: center;


进度:CSS任务八

任务开始时间:2018.07.30
预计demo时间:2018.08.04
是否有延期风险:有。                        

任务代码地址:任务五代码已经提交  (还需要再修改。。。还没来得及。。。)

任务六:https://kewangbuji.github.io/cssTask/task6/task6.html

任务七:https://kewangbuji.github.io/cssTask/task7/task7Test.html

https://kewangbuji.github.io/cssTask/task7/task7Result.html

https://kewangbuji.github.io/cssTask/task7/task7Homepage.html



返回列表 返回列表
评论

    分享到