发表于： 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
返回列表
评论