发表于: 2017-04-01 23:34:02

3 594


今天完成的事情

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



日报用时半个小时,天哪赶紧睡了....


返回列表 返回列表
评论

    分享到