发表于: 2019-01-08 23:37:02

1 623


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

1、完成了任务13的两个页面的编写。

从任务11、12开始,除了使用第三方的插件重构以前的页面之外,就是对代码的优化,尽量让自己写出来的代码都是有用的,这个是重点。

      从任务12开始就要自己写样式,不引用bootstrap的组件,然后任务13中也是开始学习了解组件化和模块化,bootstrap是一个库,但也是由组件组成的,每一个都是单独的样式,例如:btn是button按钮的简写类名,给这个类名写了模块样式,所以只需要再用的时候加上btn的类名就行了。任务13开始还只是刚接触,可以通过设置基础重置样式,让一些带有margin、padding值或者a标签的下划线的默认样式恢复成初始状态,使用方法,通过用link外联来链接一个reset.css文件,然后在这个文件里写上一些基础的重置样式。例如:

注意:这里只写一些元素的重置样式,不能写其他。类似,a标签的:text-decoration:none;隐藏下划线的属性。

       出了这个也可以再写一个样式库,样式库里可以放一些margin、padding值,定义属性或者是字体大小,通过语义化来简写类名,每一个都单独的设置属性值,需要用的时候就可以加到class里,这样既减少了代码量,样式库就相当于一个公共的,想要给元素增加属性直接引用就行,跟使用bootstrap的组件一样,我是这样理解的。使用方法:

语义化,可以理解为你能知道这个类名的属性是什么,例如,我想给“one”这个div设置margin值或者padding值,后面加上类名pd-20,以为padding:20px。简单的语义化写法能让人清楚了解这个属性值。

    写法就如下:

一样还是通过link外联来引入,相对路径的方法。这样写下来,不仅代码减少了,每一个模块都拆分的很清楚,都是单独的。其他的属性再通过less来编写。


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

 完成任务13的页面制作。

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

1、在写任务13的第三个页面时,发现一个问题,我给子级设了font-size:13px,父级就会有默认的行高,这个是什么原因造成的,我不太理解,但是给父级设font-size:13px就能解决这个问题。

   


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

通过运用外联来引入样式库和重置样式表。


返回列表 返回列表
评论

    分享到