SOURCE

<!-- homepageCategoryProducts
eachHomepageCategoryProducts
left-mark
categoryTitle
productItem
    productItemDescLink
    productItemDesc
    productPrice 
<div style="clear:both"></div> -->

<!-- 总体div -->
<div class="homepageCategoryProducts">
    <!-- div+div+span+div>a{img}+a{span}+span -->
    <div class="eachHomepageCategoryProducts">
        <div class="left-mark"></div>
        <span class="categoryTitle">太阳镜</span>
        <br>
        <div class="productItem">
            <a href="#nowhere"><img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/9543.jpg"></a>
            <a href="#nowhere" class="productItemDescLink">
                <span class="productItemDesc">
                    [热销]好先生同款墨镜孙红雷偏光男士太阳镜韩明星
                </span>
            </a>
            <span class="productPrice">
                97.5
            </span>
        </div>
                    <!-- 复制的，自己不想写 -->
                    <div class="productItem">
                        <a href="#nowhere"><img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/9532.jpg"></a>
                        <a href="#nowhere" class="productItemDescLink">
                            <span class="productItemDesc">[热销]
                            陌森太阳眼镜男女2016偏光定制驾驶近视
                            </span>
                        </a>
                        <span class="productPrice">
                            518.70
                        </span>
                    </div>
                    <div class="productItem">
                        <a href="#nowhere"><img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/9521.jpg"></a>
                        <a href="#nowhere" class="productItemDescLink">
                            <span class="productItemDesc">[热销]
                            帕莎Prsr太阳镜女偏光镜潮范冰冰同款女
                            </span>
                        </a>
                        <span class="productPrice">
                            624.00
                        </span>
                    </div>
                    <div class="productItem">
                        <a href="#nowhere"><img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/9510.jpg"></a>
                        <a href="#nowhere" class="productItemDescLink">
                            <span class="productItemDesc">[热销]
                            变色眼镜男女款半框太阳镜大框潮流防辐射防
                            </span>
                        </a>
                        <span class="productPrice">
                            170.00
                        </span>
                    </div>
                    <div class="productItem">
                        <a href="#nowhere"><img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/9499.jpg"></a>
                        <a href="#nowhere" class="productItemDescLink">
                            <span class="productItemDesc">[热销]
                            新款男士偏光太阳镜日夜两用墨镜潮运动开车
                            </span>
                        </a>
                        <span class="productPrice">
                            551.00
                        </span>
                    </div> 
                    <!-- 以上自己复制的 -->
        <!-- 清除浮动 -->
        <div style="clear:both"></div>   
    </div>
<!-- 以下也是复制的，内容和上面一样 -->
<div class="eachHomepageCategoryProducts">
            <div class="left-mark"></div>
            <span class="categoryTitle">安全座椅</span>
            <br>
                    <div class="productItem">
                        <a href="#nowhere"><img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/10192.jpg"></a>
                        <a href="#nowhere" class="productItemDescLink">
                            <span class="productItemDesc">[热销]
                            新生儿婴儿提篮式安全座椅汽车用车载儿童安
                            </span>
                        </a>
                        <span class="productPrice">
                            882.00
                        </span>
                    </div>
                    <div class="productItem">
                        <a href="#nowhere"><img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/10181.jpg"></a>
                        <a href="#nowhere" class="productItemDescLink">
                            <span class="productItemDesc">[热销]
                            REEBABY汽车儿童安全座椅ISOFI
                            </span>
                        </a>
                        <span class="productPrice">
                            1,344.00
                        </span>
                    </div>
                    <div class="productItem">
                        <a href="#nowhere"><img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/10170.jpg"></a>
                        <a href="#nowhere" class="productItemDescLink">
                            <span class="productItemDesc">[热销]
                            REEBABY儿童安全座椅9个月-12岁
                            </span>
                        </a>
                        <span class="productPrice">
                            1,216.00
                        </span>
                    </div>
                    <div class="productItem">
                        <a href="#nowhere"><img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/10159.jpg"></a>
                        <a href="#nowhere" class="productItemDescLink">
                            <span class="productItemDesc">[热销]
                            好孩子汽车儿童安全座椅goodbaby9
                            </span>
                        </a>
                        <span class="productPrice">
                            1,199.40
                        </span>
                    </div>
                    <div class="productItem">
                        <a href="#nowhere"><img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/10148.jpg"></a>
                        <a href="#nowhere" class="productItemDescLink">
                            <span class="productItemDesc">[热销]
                            惠尔顿儿童安全座椅isofix硬接口汽车
                            </span>
                        </a>
                        <span class="productPrice">
                            1,993.60
                        </span>
                    </div>
            <div style="clear:both"></div>
        </div> 
    <!-- 以上都是复制的 -->

    <!-- end图片 -->
    <img src="http://how2j.cn/tmall/img/site/end.png" class="endpng" id="endpng">

</div>

/* 
整体的产品列表div   homepageCategoryProducts
产品项             productItem
产品描述信息        productItemDesc
产品价格            productPrice
图片                img
产品图片鼠标悬停状态    img:hover
一个分类下5个产品为一个div  eachHomepageCategoryProducts
产品超链            productDescLink
分类名称            categoryTitle
竖状条              left-mark
最下方"END"字样图片  ending
*/


/* 整体的产品列表div */
div.homepageCategoryProducts {
    background-color: #F5F5F5;
    padding: 50px 10px;
    margin: 10px auto;
    max-width: 1013px;/*最大宽度1013px，如果用户的分辨率比较大，那么就会使产品列表整体宽度最大1013，并且居中，这样看上去好一点，而不是铺满整个屏幕*/
}

/* 产品项 */
div.productItem {
    width: 189px;
    height: 285px;
    border: 1px solid white;;
    margin: 8px 4px;

    float:left;/*向左漂浮，这样使得所有的产品项可以水平摆放*/

    cursor: pointer;/*鼠标指正变成点击状态*/
}

/* 产品描述信息  */
div.productItem a.productItemDescLink span.productItemDesc {
    display:block;/*换行*/
    font-size: 12px;
    color:  #666666;
    padding: 16px;
}

/* 产品价格 */
div.productItem span.productPrice {
    display: block;/*换行，单独一行*/
    font-size: 16px;
    color:  #FF003A;
    margin-left: 16px;
    margin-top: -10px;/*产品描述信息的padding为16px，降低价格和信息直接的距离，用margin*/
}

/* 图片 */
div.productItem img {
    width: 187px;    /* +2*1px border = 189px 产品项  ...width:height:189:285*/
    height: 190px;
}

/* 产品图片鼠标悬停状态 */
div.productItem img:hover {
    opacity: 0.7;   /*变亮*/
    filter: alpha(opacity = 70);    /*火狐浏览器变亮*/
}

/* 一个分类下5个产品为一个div */
div.homepageCategoryProducts div.eachHomepageCategoryProducts {
    padding: 0 0 40px 0;
}

/* 产品超链 */
div.productItem a.productItemDescLink {
    display: inline-block;
    height: 66px;
    text-decoration:none;/*一般是链接才能去下划线*/
}

/* 分类名称 */
span.categoryTitle {
    font-size:16px;
    margin-left: 30px;
    color: #646464;
    font-weight: bold;
}

/* 竖状条 */
div.left-mark {
    display: inline-block;
    width: 5px;
    height: 20px;
    background-color: #19C8A9;
}

/* 最下方"END"字样图片 */
img#endpng {
    display: block;/*变成块状，单独占一行，可以设置宽高*/
    width: 82px;
    margin: 0 auto;
}