css3: 1.开发前要进行规划，明确功能需求， 一些细节要注意 比如这个照片展示，它点击某张图片时，把点击的图片展示出来，而其他 图片要隐藏。这个过程，就是要注意一个先后顺序。是其他图片先消失，而且是 高度变为0，然后是要展示的图片宽度变成100%。
2.一些值得关注的知识点 (1)".close"的叉，不是写了个x，而是给close加了：before和：after 再在伪元素里写width,height,背景色#fff，再旋转（-45deg，45deg），也不是我想的用 border:1px solid #fff。我也没尝试用border，猜测可能border不能旋转？ (2).wrapper .body .html{w100%, h100%}; 这个我也是首次知道。 为了当用户改变页面大小，不出现滚动条，content随着页面变化而改变大小，始终在 第一屏，所以有了.wrapper{w100%,h100%}，想让.wrapper占据整个页面，大小随着 页面改变。 但是没实现，最后发现应该使html{w100%,h100%},因为，.body、.wrapper都是继承html的 【3】那些动态 【】 (1)最初时：它从下面滑上来，而且是依次，有时间差 这个实现原理我也是没想到 先把每个.inner平移下去：.init .item .inner : transform:translate3d(0, 100%, 0); 当有.init时候，图片下移 html写“.wrapper .init”，所以一开始图片都是在.content 然后在js中设置定时器，200ms后，$('.wrapper').removeClass('.inner');就是说它是 自动的。 然后.item .inner{transition: transform 0.5s linear}图片从下到滑上来，让它0.5s 内完成 然后时间差：【transition-delay：看代码】没想到还有transition-delay (2)点的图片全屏展示，其他消失掉 两个类：.active{width: 100%;}（点的是那个 就给那个.item加上.active） .item:not(.active){w:0;h:0;} 然后点开它那个效果是，那4个高度先缩没了，然后停一会儿后，宽度展开 所以 .item{transition:h 0.5s linear, w 0.5s linear 0.5s}; 然后如果就.item:not(.active){w:0;h:0;}这样设置，那一开始图片肯定都不见 所以js里很有技巧的给点击的.item加上.active——$(this).addClass('active'); $('.wrapper').addClass('wrapper-active'); //【】这个$(this)就指向具体点的那一个item 当有类wrapper-active就说明点击图片了 然后在此前提下： .wrapper-active .item:not(.active){w:0;h:0;} 所以说，给.item:not(.active)加了个 限制条件 //所以核心是 让一个图片展示或消失就是w、h的事儿 //我设想到一个网页点叉 或者 说图书馆电脑惠普声音控件这种 (3)让点开图片消失，恢复到一开始 承接(2)的来，取消掉.active和.wrapper-active $('.close').click(function (e) { e.stopPropagation(); $('.wrapper').removeClass('wrapper-active'); $('.active').removeClass('active');
}) 【】 细枝末节： (4)每个item的背景图片 很容易写错成：.item .bg:nth-of-type(1)/(2){ }; (5).content{justify-content:spacebetween;}不是把.item{float:left/inline-block} 因为item就是图片间有制表符间隔，默认继承fnt-size大小16px， (6)其他图片消失时，都向上缩（怎么让它在中间消失）： 设置.content{align-items:center;}就是它高度无论百分多少，都始终在中间 (7)关于字体： .dis一开始的消失，到显示图片的出现，到随着图片消失而消失 .dis{opa:0; transition：opacity 0.2s linear;} [transition是.dis随着图片消失而消失，opa从1又变为0时起作用] 所以.dis出现时：.active .dis{opa:1;transition: opa 0.2s linear;} 点击图片展开，“image”消失掉 .wrapper-active .item .title{opa:0; transform: opa 0.2s linear 1s;} 出现时延迟，随着图片消失时立刻消失 [注意权重，不然可能被覆盖]
.title ——》“image”消失 .wrapper-active .item .title{opa:0; transform：opa 0.2s linear;} 【！！！没有js】 3.常用技巧总结 (1）因为随着页面大小变化，所以设置w/h都是百分比 (2)水平垂直居中也可用flex解决 父级：flex;justify-content/align-items:center（主轴、侧轴水平居中） 这个比top:50%,left:50%简单有效，而且设置弹性布局也方便后续 【容器/里面的项目】 (3)margin-left;margin-top 负1/2宽高，可用css3：translate(-50%, -50%); (4)ul》li 轮播图里还有这里，用来装图片的容器 (5） 4.学习方法总结 (1）学习一个新项目要2遍 第一遍囫囵吞枣，第二遍，看遍代码，想想它为什么 这么写。肯定是不明白的，带着问题再看遍，然后边看边记，觉得这次的学习方法 还是不错的； (2)pdf……如此吧 (3)项目总结还是比较好的 (4)总结就是升华 【4】书写习惯 先结构 然后css * 还有 布局，盒子m、p、w、h盒模型一些设置，font,color,bg-color（这个次序） ps: 心路历程：我一直在追求学完后自己能独立把它实现出来，不然我觉得自己很废， 等于还是没学会。但现在我觉得就算一个项目学完后，不能把它完全做出来或者 里面的东西你不能全懂，也没什么大不了。能掌握多少就多少，不是说你做不出来 之后就学不下去了。要学的东西还很多，学不会的更多……就一句话，这个项目不是 很重要，以后遇到，就把代码一粘，原理能懂就懂，不懂算了，不要钻牛角尖
