发表于: 2018-04-24 23:33:24

1 509



任务5-任务7总结*********************任务8日报在页尾

===========================================================================================

                                                                                                              任务5总结

===========================================================================================

任务名称:task5

成果链接:https://chenxingyu350128.github.io/learnCSS/

任务耗时:2天,无延期


思维导图:



任务总结:

遇到的困难:

1.按钮自带的边框阴影,设置border-shadow: none;无效。

最终通过设置按钮的边框移除默认的边框阴影。


2.底部的footer在高度缩小时,会与上一行内容相冲。

设置margin也无效,因为footer设置了,position:fixed;

上一行内容会在footer的空白处显示。

原因是footer未设置背景,解决方法:设置背景颜色为白色。


收获:

来线下之前一直以为,页面中那些高度,图片大小一定是按照某种规则来取值的,

但又找不到这种所谓的规则,做出来的页面很丑。看到师兄转发的一篇文章才进步了一点。



=================================================================================

                                                                                                                    任务6

===========================================================================================

任务名称:task6

成果链接:https://chenxingyu350128.github.io/learnCSS/

任务耗时:3天,无延期


个人导图:


任务总结

遇到的困难:

1.布局列表头时,下拉符号与左侧文本直接贴合。试过设置三角符号的margin-left。

然而,页面宽度缩小时,三角符号被挤出内容区域,自动换行。最后将三角符号右浮动,

》》》

并通过相对定位,达到预期效果。


2.布局单个列表时,第二行的左右两边,总有一个会换到下一行,影响美观,

左右的大小试过9+3~6+6布局,发现总有一侧换行。

询问旁边的师兄,采取white-space方法,得以在宽度320像素时保持完整性。

3.刚开始接触bootstrap,很多效果都想用添加类名的方式实现,算是滥用了。。搞得自己一团乱麻。


收获:

学习了bootstrap,学习大于号制作。学习了新接触的white-space。


=======================================================================================================

                                                                                                             任务7

=======================================================================================================

任务名称:task7

成果链接:https://chenxingyu350128.github.io/learnCSS/

任务耗时:3天,无延期

个人导图:


总结:

遇到的困难:

1.多次任务都遇到屏幕变宽导致网页变形,经一师兄的指点,才发现最终的原因是css使用单位不一,%和vw交叉使用。而要让经常变形的header、footer占满宽度,则只需要将.container改为container-fluid即可。

收获:

1.最难受的页面变形问题搞定了

2.学习了bootstrap的导航栏的写法

3.学习了利用html,css实现常见的布局

===================================================================================================

成果展示

————————————————————————————————————————————————————————————————————

日报

今天做的事:


1.基本完成任务8的第一个页面


2.学习媒体查询的知识:

每个媒体查询可以包含一个或多个媒体类型。

常见的媒体类型有所有(all),屏幕(screen),打印(print),电视(tv)和盲文(braille)。

Html5中又添加了新的媒体类型,甚至包含3d眼镜(3d-glasses)。

一个没有特别声明媒体类型的媒体查询,默认媒体类型是屏幕(screen)。


媒体特性中的宽高

最常见的一种媒体特性围绕设备或浏览器视窗的宽高。

这些尺寸可以使用媒体特性中的height,width,device-height和 device-width获取到,

并且这些特性均可以用min或max作为前缀,建立例如min-width 或 max-device-width的特性。

宽高基于视窗渲染区域的宽高而定,以浏览器窗口为例。另一方面,设备高度和设备宽度特性,

是基于输出设备的宽高,他们也许大于实际的渲染区域。这些宽高媒体特性可以使用任何相对或绝对的长度单位。


使用最大最小前缀

最大最小前缀在媒体特性中有相当多的地方使用。

最小前缀表示一个值大于或是等于,而最大前缀表示一个值小于或是等于。

使用最大最小前缀避免与html普通语法冲突,尤其不用使用<和>符号


明天计划的事:

继续任务8


遇到的困难:


在布局下图这一块时,当设备屏幕宽度达到320时,左中右开始不对称。

使用媒体查询,解决了宽度小于320时候的布局。

.step p {
margin-bottom: 0;
/*height: 2em;*/
   padding-left: 1.5em;
padding-right: 1.5em;
}
@media only screen and (max-width: 768px)
{
.step p {
height: auto;
max-height: 3em;
}

}

同样的,在战略合作企业这一块,因为是5个图标,在用到bootstrap时就傻眼了,

栅格系统的col-12除以5,不是一个整数,而col-XX-又只有整数可用。

刚好将学到的媒体查询用了进去

@media only screen and (min-width: 1200px) {
.col-lg-max{
width: 20%;
}
}




收获:

1.昨天的圆形问题,将高度上的单位都改成绝对单位后,

圆显示正常,不会因为flex弹性而影响。

这就是官网任务学习文档中的左列定宽右自适应吧。



进度:任务8


开始时间:2018.04.22

  

预计结束时间:2018.04.26


有无延期风险: 无


禅道:http://task.ptteng.com/zentao/my-task.html





返回列表 返回列表
评论

    分享到