发表于: 2018-07-31 22:20:58
1 671
今天完成的事情:今天开始任务14得内容
任务十四需要我们学习做出自己得官网组件库
感觉在网上看了一天的资料,感觉像是懂了一些关于,模块,组件和全局样式相关的知识,
但又感觉啥都没明白很颓废
关于全局的css基础重置,我一直是以
*{padding:0; margin:0;} 来完成,今天发现这种方法貌似太过肤浅,感觉因该用什么就重置什么比较好
但也不能像有些网站那样 比如
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0;padding: 0; }
这样子的重置也不算完美,这里面就有不少是无用的重置如 div dt啥的
然后组件和通用样式库
这俩样都需考虑重用率高的比较好
通用样式库主要是为了节省css的代码,让css代码更简洁,如常用字体大小的
.f0{font-size:0;}.f10{font-size:10px;}.f12{font-size:12px;}.f13{font-size:13px;}.f14{font-size:14px;}.f16{font-size:16px;}.f20{font-size:20px;}.f24{font-size:24px;}
如常用的padding和margin值
.m0{margin:0;}.ml1{margin-left:1px;}.ml2{margin-left:2px;}.ml5{margin-left:5px;}.ml10{margin-left:10px;}.ml20{margin-left:20px;}.mr1{margin-right:1;}.mr2{margin-right:2px;}.mr5{margin-right:5px;}.mr10{margin-right:10px;}.mr20{margin-right:20px;}.mt1{margin-top:1;}.mt2{margin-top:2px;}.mt5{margin-top:5px;}.mt10{margin-top:10px;}.mt20{margin-top:20px;}.mb1{margin-bottom:1px;}.mb2{margin-bottom:2px;}.mb5{margin-bottom:5px;}.mb10{margin-bottom:10px;}.mb20{margin-bottom:20px;}.ml-1{margin-left:-1px;}.mt-1{margin-top:-1px;} .p1{padding:1px;}.pl1{padding-left:1px;}.pt1{padding-top:1px;}.pr1{padding-right:1px;}.pb1{padding-bottom:1px;}.p2{padding:2px;}.pl2{padding-left:2px;}.pt2{padding-top:2px;}.pr2{padding-right:2px;}.pb2{padding-bottom:2px;}.pl5{padding-left:5px;}.p5{padding:5px;}.pt5{padding-top:5px;}.pr5{padding-right:5px;}.pb5{padding-bottom:5px;}.p10{padding:10px;}.pl10{padding-left:10px;}.pt10{padding-top:10px;}.pr10{padding-right:10px;}.pb10{padding-bottom:10px;}.p20{padding:20px;}.pl20{padding-left:20px;}.pt20{padding-top:20px;}.pr20{padding-right:20px;}.pb20{padding-bottom:20px;}
通用样式库和组件库可能是在团队合作中用的比较多一些,需要注意的是通用样式库使用过多的情况
这种情况会让html代码变得过多,所以我认为这俩者因该按自己得经验进行取舍
然后再是去看了折叠导航栏手写得做法
http://www.cnblogs.com/LiveWithIt/p/5925194.html
看了这个官网推荐得资料,感觉没看懂,然后打算找个可以置顶得便签软件先把整个结构给粘贴上去对照去看
然后找到了印象笔记。。 把代码复制上去后贼难受,没有语法高亮,全是黑的很难受 然后我手动给全部改了
没有啥快捷键只能一个一个弄颜色,真的很难受
准备工作做好了 打算对照着看代码,然后去理解一下了,这样对照的看感觉还是不错的
明天计划的事情:完成轮播图和导航栏,争取完成第一个页面
遇到的问题:稍微有点找不到方向吧。。
收获:学习了关于组件库,通用样式库,重置样式
评论