目前市面上主流的布局为float布局 , 本人通过flex布局实现了一遍 其中轮播图使用了swiper插件 图标使用了iconfont 尽可能的不使用定位 此为自我规划的结构分析 , 如图所示

1 清楚整个页面的整体布局，先整体再局部，先把整体内容规划好，再自上而下的布置每一块内容。 2 明确每个模块要实现怎样的效果，并且自外而内的设置好每个标签的样式。 3 不清楚某个样式怎么设置，可以去浏览器控制台中做相应的调整，调整合适后将样式写到文件中。 4 flex布局最好在父级元素添加display:flex; flex布局写完可以在新版本的浏览器里调,然后代码直接可以复制粘贴 5 在浏览器里hover可以点完:hov 可以查看 6 如果使用浮动布局,要善于使用伪元素清除浮动

7 em单位为一个相对的度量单位，它通过寻找父标签的font-size(注:若父元素也是em则会继续往上找,1em相对于浏览器是16px)。然后通过计算得出自身的font-size。利用em单位设置便签的width或者height等属性原理也一样。 8 改变font-size的值。height、width的值也需要重新计算。 9 outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。 注：轮廓线不会占据空间，也不一定是矩形。 input元素 outline:0; 或 outline:none; 可以去掉轮廓,便于自定义样式 10 box-sizing: border-box; 边框不纳入计算范围 11 伪类:hover 过渡效果

12 文字超出父级后显示…

13 鼠标悬浮阴影和上浮效果

14 :first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。 :first-of-type 匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。 :nth-child(2) 匹配的是某父元素的第二个子元素 :nth-child(odd)匹配的是某父元素的第奇数个子元素 :nth-child(even) 匹配的是某父元素的第偶数个子元素

15 vertical-align 属性 在行内元素的基线相对于该元素所在行的基线的垂直对齐 , 允许指定负长度值和百分比值 在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。 16 伪类操控相邻元素