发表于: 2018-11-29 21:44:36
2 650
今天完成的事情:
1、完成任务七第一个页面“首页”的代码编写。
因为任务七有三个页面要写,今天下午才开始写第一个页面,上午一直在写任务6的日报总结,还有电脑又不行了,连ps切图都切不了,然后网购买了个内存条,明天到货,哇咔咔,希望能够兼容。
今天写这个页面还算是比较顺利。先在大脑中构思下怎么写,然后在写的时候修改下属性样式。
(1)header头部里那个功能键的样式,我是用border写的,用<h1>标签来写,用绝对定位来设置它固定的位置。
(2)主体部分的是用div写的,居中效果是用的flex布局中的justify-content属性,感觉现在就这个属性用的最熟悉了。
第一个div里用的是justify-content属性中的一个新的值:space-around;
space-around:项目位于各行之前、之间、之后都留有空白的容器内。
演示效果图:
也是可以达到文字居中的效果,
我写出来的效果,只需要用一个属性就可以了,给父级设置,作用于子级。
主体部分我分了两个div来写的。
第二个div只需要完成一部分,后面的你只需要调试下代码就行,大部分的样式是一样的。
div里嵌套一个div,如下图:
然后给div设置样式,再用标签写文本内容,然后用flex设置它的样式。有很多都是先写出来,然后在f12中调试看查找问题。
其实写的时候就好理解了,div分开来写,css也分开来写。效果如上图。
明天的计划:
1,完成首页底部的小圆点的css样式编写。
2,完成任务七第二个页面的编写。
问题:
1,
不知道怎么会有右边距,这里有一条线,我在div里用border-bottm写的,我先设的margin-left的值,删掉后还是有这个边距。
解决方法:是我设置的div的width值,删掉就解决了。如图:
评论