发表于： 2018-06-15 16:29:52
1 605
今天完成的事情：
做侧边导航栏
了解重叠样式表
CSS架构
明天计划的事情：
最难的侧边导航栏已经弄完了，剩下的两个页面一天内弄完应该是没问题的。
做任务时还要做到CSS架构。
应用SASS的其他功能。
遇到的问题：
说一下侧边导航栏的制作方法吧：
首先确定按钮的位置：
然后使用<label>关联：
<label class="la inline-block" for="menu"></label>
.la {
width: 3rem;
height: 3rem;
background: url("img7/BackIcon.png") no-repeat 0.5rem 0.7rem;
}
设置<input>
<input type="checkbox" id="menu">
需要注意的是<input>与页面主体的最大的盒子与侧边导航栏内容应该是同级关系：
设置侧边栏内容：
然后用CSS关联侧边导航栏内容跟页面主体内容：
input[type="checkbox"]:checked ~ .cb,
input[type="checkbox"]:checked ~ .main{
transform: translateX(80vw);
transition: transform 0.4s ease;
}
input[type="checkbox"] {
display: none;
}
基本上就可以了。
说一下最开始踩的坑：
一开始想的思路是点击按钮然后侧边把页面内容推向右边
但是这样很难实现。很麻烦。
后来改正思路，既然不能推动，那就把这两个一起移动。
使用transition和transform。
transition可以产生动画效果，让侧边导航栏平滑出现而不是突然出现。
transform可以让侧边导航栏跟内容在视觉上产生位移。(transform的效果类似relative。不会脱离文档流，但是视觉上产生了位移。)
使用<input>、:checked 把这两个关联起来，产生“点击后发生位移”效果。
然后<label>关联<input>。点击<label>后，<input>的:checked就产生效果，就可以得到想要的效果了。
收获：
CSS架构
1.简短的CSS reset
CSS reset(css重置)基本上是不需要的。有些常用标签我也是会简单重置一下的。
2.CSS通用样式库：CSS通用样式库就是可以在任何网站使用的CSS样式库。CSS样式分离再分离。
3.网站CSS样式库：文字链接颜色是什么，文字链接经过的样式是什么；一些常用的背景色样式，常用的边框样式等，以及一些高宽等。
4.网站通用样式：网站通用样式专指“独立元素”的通用样式，所谓“独立元素”指的是网站通用的导航，菜单，按钮，选项卡，文本框装饰，图片装饰，圆角处理等等。这些“独立元素”的样式千万不能对其进行分离并归入“网站通用样式库”中，否则，日后会给你留下无尽的痛苦的！
5.网站公共结构样式：
网站公共结构样式：“网站的结构样式”主要指的是最外框div的样式，一般限制网站的宽度(960~990不等)，还有就是网站的分栏布局样式，这里的样式仅仅针对主体结构，例如left_part，或是right_part；还包括网站的头部的一些公用结构，底部的样式结构等。强烈建议公共结构仅仅定宽定高，设置浮动属性，切不可在结构样式上添加margin或是padding属性，这会使网站的公共结构的重用性大大降低！
CSS reset：就是把浏览器提供的默认样式覆盖掉。
因为各个浏览器都会有自己默认的样式。为了防止切换页面时，浏览器的默认样式给 我们带来麻烦。
CSS选择器对性能的影响源于浏览器匹配选择器和文档元素时所消耗的时间，所以优化选择器的原则是应尽量避免需要消耗更多匹配时间的选择器。 按我的理解就是通配符会匹配所有的标签。把一些我们不需要使用的标签也渲染了。这样会加大网页的渲染时间。而且影响的范围太大。所以尽量不使用。
进度：task13
任务开始时间：2018.6.14
预计结束时间：2018.6.17
是否有延期风险：无
禅道：http://task.jnshu.com/zentao/project-task-687.html
任务十二总结：
成果链接：https://qingtiandataiyang.github.io/task12/task6.html
任务耗时：3天
任务总结：
思维导图：
开发过程中应该遵守哪些编码规范和class命名规范？
1.背景介绍
1、好的编码规范可以尽可能的减少一个软件的维护成本，并且几乎没有任何一个软件，在其整个生命周期中，均由最初的开发人员来维护；
2、好的编码规范可以改善软件的可读性，可以让开发人员尽快而彻底地理解新的代码；
3、好的编码规范可以最大限度的提高团队开发的合作效率；
4、长期的规范性编码还可以让开发人员养成好的编码习惯，甚至锻炼出更加严谨的思维。
2.知识剖析
基本准则
符合web标准，语义化html，结构表现行为分离，兼容性优良。页面性能方面，代码要求简洁明了有序，尽可能的减小服务器负载，保证最快的解析速度。
html规范
1、页面的第一行添加标准模式声明<!DOCTYPE html>
2、页面title是极为重要的不可缺少的一项
3、按照从上至下、从左到右的视觉顺序书写html结构
4、代码缩进：tab键设置四个空格（通常在软件右下角设置相应空格大小）
5、html中除了开头的DOC和'UTF-8'或者head里特殊情况可以大写外，其他都为小写，css类都为小写
6、建议为html根元素指定lang属性，从而为文档设置正确的语言lang="zh-CN"
7、不同doctype在不同浏览器下会触发不同的渲染模式< meta http-equiv="X-UA-Compatible" content="IE=Edge">
8、非特殊情况下样式文件必须外链至< head >...< /head>之间;非特殊情况下JavaScript文件必须外链至页面底部
9、尽可能减少div嵌套
10、在页面中尽量避免使用style属性,即style="…";写在相应的样式文件中
11、对于属性的定义，确保全部使用双引号，绝不要使用单引号
12、背景图片请尽可能使用sprite技术,减小http请求
13、给区块代码及重要功能(比如循环)加上注释,方便后台添加功能
14、不要使用@import,与<link>标签相比,@import指令要慢很多,不光增加了额外的请求次数,还会导致不可预料的问题。
CSS规范
排版规范
1、如果是在html中写内联的css，则必须写成单行
2、每一条规则的大括号{前后加空格
3、属性名冒号之前不加空格，冒号之后加空格
4、每一个属性值后必须添加分号，并且分号后加空格
5、多个selector共用一个样式集，则多个selector必须写成多行形式
class命名
1、规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或_
2、命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合
3、不允许通过1、2、3等序号进行命名；避免class与id重名
4、class用于标识某一个类型的对象，命名必须言简意赅
5、尽可能提高代码模块的复用，样式尽量用组合的方式
6、规则名称中不应该包含颜色（red/blue）、定位（left/right）等与具体显示效果相关的信息。应该用意义命名，而不是样式显示结果命名
CSS书写规范
1、CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。
2、去掉小数点前的“0”
3、简写命名——很多用户都喜欢简写类名，但前提是要让人看懂你的命名。
4、16进制颜色代码缩写——有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。
5、长名称或词组可以使用中横线来为选择器命名。
6、不要随意使用Id——id在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先与class，所以id应该按需使用，而不能滥用。
7、有多个选择器时，选择器必须独占一行
8、选择器的嵌套层级不应该大于三级，位置靠后的限制条件应该尽可能的准确。
书写顺序：
布局方式、位置（position, top, right, z-index, display, float等）
尺寸（width, height, padding, margin）
文本相关（font, line-height, letter-spacing, color- text-align等）
视觉效果（background, borde，animation, transition）
以提高代码的可读性。
返回列表
评论