小米页面总结

顶栏

1. 多个行内元素会存在空格现象，需要清除，给父元素设置一个font-size：0
2. 看清元素是否有链接，包裹在a标签下。
3. 一般给有动画的元素加上transition属性，和阴影效果
4. 使用伪元素制作小图标标定位时，需要写自己的定位位置。
5. 下拉动画的设置为初始高度为0，当hover时给他一个高度动画

头部内容

1. 实现手机下拉的列表，多个li叠在一起，是给有列表的li给ul一个hover状态，当ul被hover时，会出现下拉列表。设置ul里被hover的li的z-index值
2. 图标的使用，加入购物车，下载代码，拿出一个需要引进的iconfont.css文件，然后在demo_fontclass.html里面查找在i标签引入的类<i class=“iconfont xxxx”
3. 去掉input的focus框，outline：none

轮播内容

1. 当需要内容的颜色跟着背景图片变动时，让自己定位在图片上，设置自己的透明度。
2. 轮播图直接变化效果，让input绑定label，label写好下面按钮的样式定位在图片下面，然后通过点击label，让input：checked的时候选中对应的需要操作的动画。对用input和div的透明度来让图片一一显示，图片的左右切换是，给每一个div也就是图片写俩个标签，当图片切换时，对应的左右按钮也就为不同的了。我写的是display这样可以直接显示，如果设置透明度来做，需要设置index。

左右切换内容

通过一个div显示固定宽度的内容覆盖在一个很长的ul上，让ul隐藏起来，然后通过定位在ul上方的按钮操作，按钮是通过margin-left做的，也可以用transform做，每一个大小的值需要写死，然后按钮是叠在一起的，要跟着变化需要设置没一个按钮的index让对应的组显示出来，写了6个input和四组label。

细节

1. css选择器的优先级抒写
2. css代码的复用
3. 基本布局：行内布局，浮动布局，flex布局，表格布局，定位布局

转载于:https://juejin.im/post/5c0d29b7e51d4560f06aed1a