发表于: 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
评论