客户端落幕

为期一周的猫眼项目就此落下了帷幕，下面来说说做项目这一周的真实感受吧。

刚刚拿到这个项目的时候真挺懵的，之前都是一个页面，突然之间让你写6个PC端，9个移动端共计15个页面，我的天呐！光图片都是几十兆，我吐了，这可咋整，一周时间不光写要出来，还要做出该有的效果，“我看你在为难我胖虎”。咋办啊？调整心态呗，谁叫咱是“乙方”呢！整体看了一遍项目和要求后，大致知道该如何完成了，大方向有了目标也就明确了，剩下的就交给天意吧。

时间过得是真快，一敲代码该吃午饭了，再一敲额…放学了，又一敲这一天就没了，总的来说还是很充实吧，也收获了很多。

1.在做移动端时，除了导入用于渲染页面的CSS文件外，不能忘记导入 JS文件,作用是换算移动端的字符大小，以及要导入重置文件，用于清除默认样式。

2.页面的布局：页面的布局采用flex弹性盒模型，一般定义为三部分“页面头部header”、“页面主体main”以及“页面底部footer”，用工程化SASS来实现优雅简洁的CSS代码。尽量使用语义化标签和伪元素选择器，少用类名方便修改与维护，导航部分用无序列表来实现。

3.页面的效果，写页面时一定要有大局观。这个能不能被链接，这里是单选框还是多选框，这里是下拉菜单还是无序列表等等…必须要事先想清楚，不然你后期加效果时会质问自己，哇！这里我为什么没用链接，这里是单选框为啥我用了多选？改完HTML标签变了，那又得该CSS，你会被自己蠢哭的，改标签亲测用了一天哦。还有就是切记注意备份，经历过绝望，才知道什么叫痛苦，不要慌 淡定，想想我做PC端页面时，一个蠢操作，把HTML代码弄没了的时候，那可是几百行代码，差点没掀桌子。

4.轮播图banner设置多张图片的交替效果，先插入多张背景图片，并设置图片尺寸，然后将多张图片用定位的方法，使多张图片重叠，然后添加动画效果，设置不同时间段让不同的图片消失、出现，形成一个交替效果。

下面总结一下比较重要的几个点：

1. 表单、下拉列表、链接、单选框、复选框都是很常用的标签，
2. 创建从左到右的下划线。
3. 多行文本省略号。
4. 定位。
5. 让input标签和label标签关联。
6. 文字超出部分隐藏，点击下方按钮出现。
7. 图片被hover时，放大出现阴影。
8. 点赞数加一的动画效果
9. 移动端超出部分可以滑动屏幕。
10. 修改单选框样式，先清除默认样式，利用行盒标签制作一个，在让其与label标签关联。

 

猫眼项目的落幕也就意味着，客户端的学习告一段落，接下来进入前端的核心部分JavaScript，不管全面的路好不好走，咬着牙也得挺过来，加油吧！越努力越幸运！