发表于: 2018-12-19 22:07:02

2 717


今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin) 

今天完成了第三个页面的编写。

    写第三个页面的相对时间上用的要短一点,因为大篇幅的都是文字,只是在左侧的那一栏小标题要用到hover效果,然后耗费了一点时间,还是有一些小细节的问题,例如:左侧的hover效果是除了字体的颜色还有小圆点也要有实心的颜色填充,目前我只是完成了文字颜色的hover效果,这个问题等等还要去查下资料。

    其实写起来还好,就是一些小细节需要后期调试下,栅格的引用算是这几天写的多稍稍有点概念,我发现栅格也只能写在768以上的网格效果,小于768px以下的就必须用到媒体查询,不然排列就很奇怪。对于媒体查询怎么去设置让网页在768px以下的效果,感觉很模糊,有点摸不着头绪,像做首页的导航栏时,只是让导航栏在768px以下变成汉堡菜单后通过下拉组件让其达到垂直居中的效果样式,第一次写感觉不难,但是在写职业推荐的时候,栅格col-xs只能到768px,以下就会变形,我知道要运用到媒体查询,但是有种无法下手的感觉。

     刚开始接触bootstarp的时候很烦,觉得引用特别麻烦有很多自带属性,然后还要通过找权重去覆盖它自带的属性。感觉很费时间,但是感觉可能还是要经历这个过程,所有在后面几天写出来后感觉其实没有想得那么难,方法有很多,看自己怎么运用吧。

    正文页面还有一个问题,文字的开头是有空格,因为网页不会识别空格,所以这里是要运用到一个什么属性,等下去查查资料。


明天计划的事情:(一定要写非常细致的内容)


    调试三个页面的代码,有一些细节上的问题需要重构代码,还有768px下的媒体查询的运用是页面在768px屏幕分辨率下能正常显示。

    完成后提交任务,这个任务真的是拖太长时间了,一直拖着到最后还是要去完成,所以就拖慢了进度。

 
遇到的问题:(遇到什么困难,怎么解决的) 

1、
在写主体部分左边文字的hover效果时,我用一个大的div嵌套了两个标签,所以我在给最大的div设hover的属性时,是没有效果的,要做出hover效果只能是在一个div里的内容。
    
之前是这样写的,并没有hover效果。
后面去掉了p标签就解决了这个问题。
2、
给div设宽度后flex的justify-content:conter就会不起作用。如下图:
试了好多种方法,后面div嵌套太多了,为了区分就没有用div标签,换成了span,然后设display:block,虽然排列看上去好像没有区别,但是设置text-align:center没办达到居中,因为block属性让宽度受到了限制,所以设了text-align:center是有用的只是被block属性限制了。如下图:
之前的问题是要么能居中,但hover效果没有用,要么有hover效果后就不能居中。
后面我就嵌套了一个大的div,然后在网页上设flex,因为span是行内元素,所以会是内容都挤在一起显示,如图:
所以定义flex后,设置flex-direction:column就让横向的span标签变成竖列排列。再设置align-items:center就能垂直居中。
代码:
    


收获:(通过今天的学习,学到了什么知识)



返回列表 返回列表
评论

    分享到