SOURCE

<!-- 商品页面 -->
<div class="categoryPageDiv">
    <img src="http://how2j.cn/tmall/img/category/72.jpg">
    <!-- 商品排序栏 table*2-->
    <div class="categorySortBar">
        <!-- 有格子的或者排列很整齐的可以用table,有边框或者无边框都可以设置 -->
        <!-- 商品排序栏表格（table）+ 商品排序表格 -->
        <table class="categorySortBarTable categorySortTable">
            <!-- table>tbody{tr>td}+tfoot{tr>td} -->
            <tbody>
                <tr>
                    <!-- 标签（可以点击）+图标（span，class是bootstrap） -->
                    <!-- <td><a href="#nowhere"></a><span class=""></span></td> -->
                    <td><a href="#nowhere">综合<span class="glyphicon glyphicon-arrow-down"></span></a></td>
                    <td><a href="#nowhere">人气<span class="glyphicon glyphicon-arrow-down"></span></a></td>
                    <td><a href="#nowhere">新品<span class="glyphicon glyphicon-arrow-down"></span></a></td>
                    <td><a href="#nowhere">销量<span class="glyphicon glyphicon-arrow-down"></span></a></td>
                    <td><a href="#nowhere">价格<span class="glyphicon glyphicon-resize-vertical"></span></a></td>
                </tr>
            </tbody>
        </table>

        <!-- 价格区间选择框,也是可以用table,3格 1+1+1(输入框加一横加输入框)(请输入一般都是输入框) -->
        <!-- class选择跟上面可以重复，毕竟样式可以一起设置 -->
        <table class="categorySortBarTable">
            <tbody>
                <tr>
                    <!-- class是为了呈现样式，比如，hover的时候的边框。 -->
                    <!-- sortBarPrice排序栏 begin end price 契合初始价，结束价-->
                    <!-- 中间grayColumn:灰色列（样式）  priceMiddleColumn:价格中间列(意味从开始价到结束价)-->
                    <td><input class="sortBarPrice beginPrice" type="text" placeholder="请输入"></td>
                    <td class="grayColumn priceMiddleColumn">-</td>
                    <td><input class="sortBarPrice endPrice" type="text" placeholder="请输入"></td>
                </tr>
            </tbody>
        </table>
        
    </div>
</div>

/* 整个body */
body{
    font-size: 12px ;
    /* 把所有文字的大小调成12px,这是天猫默认的文字大小 */
    font-family: Arial;
    /* 字库使用Arial */
}

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

/* 排序按钮栏 */
div.categorySortBar{
    background-color: #FAF9F9;
    /* 背景色: #FAF9F9 */
    margin: 40px 20px 20px 20px;
    /* 外边距 */
    padding: 4px;
    /* 内边距 4px */
}

/* 排序栏中的两个表格 */
table.categorySortBarTable{
    border-collapse: collapse;
    /* 单元格之间没有空隙 */
    display:inline-block;
    /* 显示为内联，既可以设置大小，又能够不换行 */
}

/* 排序表格中的Bootstrap图标 */
table.categorySortBarTable span.glyphicon{
    font-size: 10px;
    /* 字体大小: 10px */
}

/* 排序表格中的单元格 */
table.categorySortBarTable td{
    height:17px;
    /* 高度:17px */
    font-size:12px;
    /* 字体大小:12px */
    border:1px solid #CCCCCC;
    /* 边框 */
    padding:3px;
    /* 内边距 3px */
}

/* 默认选中的那个单元格 */
table.categorySortBarTable td.grayColumn{
    background-color: #F1EDEC;
    /* 背景色: #F1EDEC */
}

/* 超链 */
table.categorySortBarTable td a{
    color: #806F66;
    /* 字体颜色: #806F66 */
}

/* 超链鼠标悬浮状态 */
table.categorySortBarTable td a:hover{
    color: #C40000;
    /* 字体颜色: #C40000 */
}

/* 价格区间输入框 */
table.categorySortBarTable input{
    border-width: 0px;
    /* 隐藏边框 */
    height: 15px;
    /* 高度: 15px */
    width: 50px;
    /* 宽度: 50px */
}

/* 价格区间中间的棒棒 */
table.categorySortBarTable td.priceMiddleColumn{
    width: 5px;
    /* 宽度: 5px */
    vertical-align: middle;
    /* 垂直居中 */
    color: #CCCCCC;
    /* 字体颜色: #CCCCCC */
}

/* 几个排序按钮所在td鼠标悬停状态 */
table.categorySortTable td:hover{
    background-color: #F1EDEC;
    /* 背景色: #F1EDEC */
}