前端开发初级写法

网页主体部分2

需达到的效果

效果分析:鼠标划过产品会轻微移动并有阴影效果

css代码参考

网页结构中默认样式需自行清除

.warpper {

            width: 1240px;

            margin: 0 auto;

        }

       

        .goods {

            height: 520px;

        }

       

        .goods .goods-h {

            height: 115px;

            line-height: 115px;

        }

       

        .goods .goods-list {

            height: 405px;

        }

       

        .goods-h h3 {

            font-size: 29px;

            height: 115px;

            font-weight: normal;

        }

       

        .goods-h h3 span {

            margin-left: 34px;

            font-size: 16px;

            counter-reset: #999;

        }

       

        .goods-h a {

            font-size: 16px;

            color: #999;

        }

       

        .goods-h a::after {

            display: inline-block;

            content: '';

            margin-left: 15px;

            width: 6px;

            height: 13px;

            background: url(../images/sprites.png) 0 -110px;

        }

       

        .goods-list ul li {

            position: relative;

            top: 0;

            transition: all .2s;

            float: left;

            margin-right: 8px;

            width: 304px;

            height: 405px;

            text-align: center;

            background-color: #f0f9f4;

        }

       

        .goods-list ul li:hover {

            top: -2px;

            box-shadow: 0 15px 30px rgba(0, 0, 0, .1);

        }

       

        .goods-list ul li:last-child {

            margin-right: 0;

        }

       

        .goods-list li img {

            width: 100%;

        }

       

        .goods-list li h3 {

            height: 40px;

            margin-top: 21px;

            font-size: 20px;

            font-weight: normal;

            color: #ccc;

        }

       

        .goods-list li p {

            font-size: 23px;

            color: #9a2e1f;

        }

       

        .goods-list li span {

            font-size: 17px;

        }

       

        .goods-list li a {

            display: block;

            width: 304px;

            height: 405px;

        }

       

        .goods-list li i {

            position: absolute;

            left: 17px;

            top: 18px;

            height: 51px;

            width: 28px;

            padding: 7px 6px 8px 4px;

            border: 1px solid #27ba9b;

            line-height: 1;

            font-size: 18px;

            color: #27ba9b;

            border-radius: 2px;

        }