发表于: 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中网格卡布局对信息卡排列并自适应页面;
评论