发表于: 2017-04-01 23:34:02
3 592
今天完成的事情
1.完成了职位列表,针对一个列表再复制黏贴(一定要保证第一个列表百分百完成后才可以复制黏贴,不然修改死你):
A:列表构造
a.运用了bs的栅格系统,来做职业列表的方向(啊,忘记给a标签了_(:з」∠)_);
b.运用了列表,一开始设两个单位,当要给(啊文本没有居中_(:з」∠)_*2)这个修改大小的时候,用width一直改不了(对列表不熟悉第一次用),之后看看colspan(呵呵,一开始将colspan和rowspan混淆了)后面的值,灵关一闪!!能给1和2的值,也可以给更大的呀!1也可以是4的合并!2也可以是8的合并!然后成功修改了;
c.另外花了我大量的时间修改行内元素span,因为很少用这个,所以用错了,导致文本全部换行,然后查了资料再做了;
d.参照chrome的选择器修改了边框:.table>tbody>tr>td{border: 1px solid #ddd}
B.加上hover:
a.在列表之下做完这个半透明,然后用flex放在旁边(此时列表边距为0),用margin-left:-宽度,跟列表重叠,在将透明度为零,:hover是透明度为1;搞定;
b.尝试过用z-index调整,但absolute太麻烦了,pass;
C.若干个列表的布局:
a.一开始用flex,space between,flex-wrap:wrap,但是哦,如果是五个列表的话,第二行两个between放在左右两边,中间空出一个空间,很难看,所以这个pass(但是用媒体查询将这个运用到width1024px的屏幕大小);
b.加大父元素宽度,列表加上适当的margin-right(a中的margin-left:-(宽度+margin-right)使半透明正常重叠),使列表们between,flex-wrap:wrap,这样第二行就正常排列了;
c.从这个布局中知道了师兄所说的首页四个格子不要放在一行的意思:模板中有些大小需要固定,如果屏幕缩放后宽度也会缩小,那样就变得很难看了比如这个丑不丑!丑!!
每天完成的事情
1.完成任务8第三个页面;
2.有空余时间修改第一个页面;
遇到的问题
1.一开始列表看起来根本不想列表,主要是第一列的宽非常宽,第二列非常窄:
解决方式:
a.发现第一列头像的上边框只有第一列的宽度,仔细观察,第一列全部都是登场的且头像那个单位是饱满的,怀疑colspan写错...;
b.将全部rowspan和colspan互换,一下子和谐了....
2.关于td长度问题:
解决方式:
a.想了一下合并的数值,可以自己设定多少个单位!然后通过草稿稍微画一下,分成八个单位,原本为1的改为4.2为8;需要稍微短的那个为3,另一个为5,完美了!
3.重叠问题:
解决方式:
尝试1:z-index,但是absolute很麻烦,即使其父元素时定位元素,但每一个需要定位的数据都是独立的不能重复,很麻烦的;
尝试2:列表和半透明边距0→flex row→半透明margin-right:-宽度;就可以了;
4.多个单位布局,溢出需要换行问题:
解决方式:今天完成的事情-1-C;
5.今天的页面有时候会这样有时候不会;还没解决!
收获
1.栅格系统熟练度UP;
2.列表熟练度UPUPUPUPUPUPUP(折腾这玩意儿太久了...)
3.重叠问题、多个单位布局,溢出需要换行问题,以后遇到也不怕不怕啦;
4.span用法熟练度半个UP!!!
日报用时半个小时,天哪赶紧睡了....
评论