发表于: 2018-07-18 00:13:12
1 293
最近耽误了学习啊啊啊啊啊啊,赶紧跟上进度,完成CSS学习
今日完成内容
css的架构
学习资料,张鑫旭——我是如何对网站CSS进行架构
1.首先通读了文章,再看看之前任务CSS的杂乱很有体会啊。之前CSS就是需要啥写啥,想到啥写啥,哪不符合要求就改哪里。不成体系。读完文章觉得好的CSS就要像做一个针对任务的BS4一样。
2.CSS reset
之前都是*{...},现在按照推荐的写法,简短有效的reset
body{ line-height:1.4; color:#333; font-family:arial; font-size: 12px;background:white;} input,textarea,select{font-size:12px;font-size:100%;font-family:arial;font-family:inherit; } body,h1,h2,h3,h4,h5,h6,p,ul,ol,form{ margin:0; } h4,h5,h6{ font-size:1em; } ul,ol{ padding-left:0; list-style-type:none; } /*image with no-border*/a img{border:0;}img{border:0;}
3.CSS 通用样式库
这个部分主要是常用的通用CSS样式,例如居中,超链接的下划线,字体,字体大小颜色,边框等等。这个部分类似BS4中的utilities将主要常用的css样式做成类似变量的一样,直接引用。
4.网站样式库
这个部分主要是网站自己特殊的在网站中通用的CSS样式,比如多个网页通用的颜色,图片的大小,字体的样式,常用的背景色等等。
5.网站元素样式
样式不是指css,而是指网站的通用元素,本任务中主要是导航条和按钮。
6.网站公共结构样式
主要布局方式由于该任务最初是BS4基础做的,本次任务也模仿BS4做了col-row-container结构
7.单页面精细结构
每个网页的独特布局与样式,经过前面几个步骤,这个部分已经比较简单了。
CSS做左边菜单
实在没找到CSS做法,最后使用JS完成此内容,并且颜色搭配和案例正好相反。主要方法是主页面内容绝对定位或者块级行内,并且父级别元素overflow:hidden。
明日计划
验收任务13,准备任务14,15,学习一些JS知识
今日收获
了解并且实践了CSS框架,感觉像是自己做了个BS4一样,熟悉了JS用法例如function,dom,事件,
遇到困难
菜单栏消耗大量事件,但是最后还是解决了。
评论