发表于: 2017-03-06 22:27:39
2 698
- 今天完成的事情:
1.找到慕课网上关于ps切图以及对ps设置更改的视频,将ps右边栏选项调整为图层、历史、信息、字符模式。
2.切出任务五所需的图片,记录图片大小,测量各模块的高度及模块间距并记录。(突然发现昨天下载的markman今天就要下岗了)
3.发现任务五的表格比较多,一个个div的话会很麻烦,学习其他师兄们任务五的日志时,发现可以使用ul列表,然而不知道什么是ul,于是去学列表,查询的时候顺便学了下ul、ol、dl的区别:
ul和ol前者是无序列表,后者是有序列表,列表项都用<li>,区别在于无序列表下的项之间没有递进的关系,有序列表下的列表项可以用1、2、3....;A,B,C......标记递进关系。(ol可以使用<ol type=“#”>来选择符号)
dl是定义列表,列表项用<dd>,列表项是对定义列表的注释。
4.发现任务5用到flex布局会更为简便,学习flex的基本用法,flex布局是弹性布局,是用来为盒装模型提供最大的灵活性。
flex-direction决定项目排列方向,raw(从左到右)raw-reverse(右到左)colum(上到下)clumn-reverse(下到上)。
flex-wrap定义换行,nowrap(不换行)wrap(换行)(wrap-reverse)第一行在下面。
flex-flow是方向和换行的简写。还有很多内容大概看了一遍,先记这些常用的。
5.css外联样式表是可以分离的,这次任务的css样式要写非常多行,来回找着非常麻烦,看的眼花。师兄说可以分离样式表,优点是样式表越是细分,越是精简,可以将一些背景代码,或者是通用代码分离出来单列一个样式表,确认这份样式表没问题后就可以将精力放在调试别的代码上。
6.学习background,发现将图片设定为background-size:cover可以使背景图像完全覆盖背景区域。不过好像也可以将页面可视宽度的最大值就设定成图片的最大宽度,然后加100%使它缩放也可以覆盖背景区域。
7.学习media媒体查询,针对不同的媒体类型定义不同的样式,在不同屏幕大小时设定不同大小的值,使图片在不同分辨率时正常显示,学的时候看到要设定好多个值,但是在古尘大大的代码中发现只设最小320px好像也可以适应手机屏幕,不太明白为什么。
8.浏览小课堂时看到写关于代码规范的,解开了我任务四中调整代码顺序使得模块正常显示的原因:
css中书写顺序要遵循:
1.显示属性:display/list-style/position/float/clear....
2.自身属性(盒模型):width/height/margin/padding/border
3.行高:line-height
4.文本属性:color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content.....
明天要做的事情:
继续做任务五基础知识的学习工作,学好基础,看得懂每一部分代码展现成页面时是哪一部分,才不会瞎写结果写错了找错误都不知道从哪儿找起只能一个个试。
遇到的问题:
暂无。
收获:
要学的好多,而且代码量瞬间就大了起来,百行以上了,要细心。
评论