发表于: 2017-03-06 22:27:39

2 698


  1. 今天完成的事情:

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.....

明天要做的事情:

继续做任务五基础知识的学习工作,学好基础,看得懂每一部分代码展现成页面时是哪一部分,才不会瞎写结果写错了找错误都不知道从哪儿找起只能一个个试。



遇到的问题:

暂无。

收获:

要学的好多,而且代码量瞬间就大了起来,百行以上了,要细心。


返回列表 返回列表
评论

    分享到