一 小米商城页面的分析

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

二 小米商城搭建的细节

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

.clear::after {
   
    content: '';
    display: block;
    clear: both;
}

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 过渡效果

.header .header_search #search_btn:hover {
   
    background-color: #ff6700;
    color: white;
    transition: all .2s linear;
}

12 文字超出父级后显示…

.span16 .product_show p {
   
    padding: 0 20px;
    overflow: hidden;
    /*超出部分隐藏*/
    white-space: nowrap;
    /*不换行*/
    text-overflow: ellipsis;
    /*超出部分文字以...显示*/
}

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

.box-bd ul li:hover{
   
    z-index: 2;
    -webkit-box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
    box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
    -webkit-transform: translate3d(0,-2px,0);
    transform: translate3d(0,-2px,0);    
}

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

/*除了第一个a之外其余的都应用如下样式 俩个代码都可以实现,任选其一即可*/
.footer .footer-service ul li:not(:first-child) a::before{
   
    content: "";
    position: absolute;
    background: #e0e0e0;
    width: 1px;
    height: 1.2em;
    margin-top: 4px;
    margin-left: -60px;
}

/* .footer .footer-service ul li a::before{
    content: "";
    position: absolute;
    background: #e0e0e0;
    width: 1px;
    height: 1.2em;
    margin-top: 4px;
    margin-left: -60px;
} */
/* .footer .footer-service ul li:first-child a::before{
    display: none;
} */

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

<div class="consumer-region">
       关注小米：
        <a href="https://weibo.com/xiaomishangcheng" target="_blank">
            <em class="iconfont">em>
        a>
        <span href="#">
            <em class="iconfont">em>
        span>
        <img src="img/section/wx-img.png" alt="