发表于: 2019-12-21 21:46:37

1 1049


今天完成的事

1,对任务8首页所有样式的修正;

2,对bootsrap的深入学习;

3,对margin:auto的理解更深一步;

明天的计划

1,对合作企业页面的制作;

2,对职业推荐页的制作;

3,对grid布局的学习;http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

遇到的问题

1,对首页导航栏的链接标签无法通过常规方法进行对其设置,后来对着组件的代码一行行调试观察,找到是因为被设置了 margin-right:auto !important;的原因导致常规对齐方式无效,虽然寻找的得艰难,但也收获了对在块级元素中对子元素margin-left:auto让其右对齐的自动分配空间的方法,对以前margin:0 auto居中的理解更深;

收获

一,对合作企业页面的初步设计:

1,明确效果:一个自适应的页面,手机观看无影响;

 (1)合作企业边栏的制作,考虑使用无序列表制作;固定定位并居中;

 (2)对主题介绍信息的制作:共两部分;

   Ⅰ,对公司的简介:透明背景+绝对定位,并且简介信息不环绕公司logo;

   Ⅱ,对公司的详细介绍;

二,对职业推荐页面的初步制作设计:

1,明确效果要求:手机端观看无影响,使用grid布局;整个页面主要分为三部分:

  Ⅰ,信息卡片的制作,共四小部分:

      (1)职业简介,独占一列;

      (2)难度划分块,2行2列

      (3)薪资待遇块,左边一行等于右边三行高;

      (4)其他,2行;

  Ⅱ,hover出现卡片大小一样的职业详细介绍,透明背景(rbga)+绝对定位(不占据文档流)

  Ⅲ,boostrap中网格卡布局对信息卡排列并自适应页面;



返回列表 返回列表
评论

    分享到