H+C某东页面项目心得

某东页面项目心得

1.常用模块类名命名

2.模块中一排小Li显示

描述：每一行最后一个li因为右边框的原因，导致一行无法放下4个li。

方法：1.可以使用nth-child(4n)方法去掉最后li的边框。

li:nth-child(4n) {
    border-right:0;
}

​ 方法： 2.可以使用将父盒子右边框去掉，则Li刚好可以在一行显示.而且li的右边框会充当父盒子边框。

.father {
border-right:0;
}

方法: 3.使用margin-left：-1px，margin-top:-1px，让每一个Li都往回倒1px，则一行可以显示4个。

​方法 : 4.可以让ul宽度宽一点，可以让LI显示在一行，在使用超出隐藏。

​

3.电商搜索框

1.不给父盒子宽度和高度加上定位可以到相应位置,搜索框给三个边框,按钮直接给高宽

.seach {
            position: absolute;
            top: 25px;
            left: 347px;
        } 
        .seach input {
            float: left;
            width: 454px;
            height: 36px;
            padding-left: 10px;
            border: 2px solid #b1191a;
            border-right: none;
        }
        
        .seach button {
            float: left;
            width: 82px;
            height: 36px;
            background-color: #b1191a;
        } 

2.某东 给父盒子宽度和边框加上定位可以到相应位置,搜索框和按钮没有边框直接给内容高宽

 .seach {
            position: absolute;
            top: 25px;
            left: 347px;
            width: 538px;
            height: 36px;
            border: 2px solid #b1191a;
        }
        
        .seach input {
            float: left;
            width: 454px;
            height: 32px;
            padding-left: 10px;
        }
        
        .seach button {
            float: left;
            width: 80px;
            height: 32px;
            background-color: #b1191a;
            color: #fff;
            font-size: 16px;
        }

4.购物车

父盒子使用定位，直接定位到相应位置。

购物车使用伪类标签定位并且引用字体图标。

右上角数字框只给高度和行高，不给宽度，避免数字增加后装不下，给左右5PX行高挤开数字和盒子距离。使用border-radius上右下 50%，让盒子变圆。最后使用定位定位到右上，注意不能使用右定位！否则购物数量多了之后会向左边挤开

.shopcar {
            position: absolute;
            top: 25px;
            right: 63px;
            width: 140px;
            height: 35px;
            background-color: #f7f7f7;
            border: 1px solid #dfdfdf;
            text-align: center;
            line-height: 33px;
        }
        
        .shopcar::before {
            content: '\e93a';
            margin-right: 7px;
            font-family: 'icomoon';
            color: #b1191a;
        }
        
        .shopcar::after {
            content: '\e920';
            margin-left: 15px;
            font-family: 'icomoon';
        }
        
        .shopcar:hover {
            border-color: #c81623;
        }
        
        .count {
            position: absolute;
            top: -5px;
            /* 不能给右定位,否则购物数量多了之后会向左边挤开 */
            left: 105px;
            height: 14px;
            line-height: 14px;
            padding: 0 5px;
            background-color: #e60012;
            border-radius: 7px 7px 7px 0;
            color: #fff;
        }

5.选择框

描述：c3模型 鼠标选择边框时，里面的图片会移动位置，抖动。

解决：提前给盒子LI一个透明边框占据位置

.main_banner_dowm1 span li {
    float: left;
    width: 58px;
    height: 58px;
    margin: 0 2px;
    text-align: center;
    /* 加上透明边框，占据位置 */
    border: 1px solid transparent;
}
.main_banner_dowm1 li:hover {
    cursor: pointer;
    border: 1px solid #c81623;
}

6.注册框

    /* 加上透明边框，占据位置 */
    border: 1px solid transparent;
}
.main_banner_dowm1 li:hover {
    cursor: pointer;
    border: 1px solid #c81623;
}

6.注册框

使用UL和LI 写

例如填写信息框等等收集信息