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>

/*
categoryPageDiv
    categorySortBar
        categorySortBarTable categorySortTable
        categorySortBarTable
            sortBarPrice beginPrice
            grayColumn priceMiddleColumn
            sortBarPrice endPrice
*/

/* 商品页面 */
div.categoryPageDiv {
    max-width:1013px;/*一般不会宽度100%，基本是居中形式*/
    margin:10px atuo;/*有外边距，显得自然很多，加上auto居中*/
}

/* 商品排序栏 */
div.categoryPageDiv div.categorySortBar {
    margin: 40px;
    background-color: #FAF9F9;
}

/* 商品排序栏表格 */
div.categorySortBar table.categorySortBarTable {
    display: inline-block;
    border-collapse: collapse;
}

/* 很重要，第二个table要有border,input要有外边距，溢出的部分是灰色的背景 */
div.categorySortBar table.categorySortBarTable:nth-of-type(2) td {
    border:1px solid #CCC;
}


/* 商品排序表格(第一个) */
div.categorySortBar table.categorySortTable td{
    border:1px solid #CCC;
    font-size: 12px;
    padding:2px;
}

/* 字体图标颜色等 */
div.categorySortBar table.categorySortTable td a{
    color: #757575;
}

/* 图标大小,也是可以用font-size */
div.categorySortBar table.categorySortTable td a span{
    font-size: 10px;
}

/* td格子悬停状态 */
div.categorySortBar table.categorySortTable td:hover {
    background-color: #F1EDEC;
}

/* 链接悬停状态 */
div.categorySortBar table.categorySortTable td a:hover {
    color:#c40000;
}

/* 排序栏价格 */
div.categorySortBar table.categorySortBarTable td input.sortBarPrice {
    font-size: 12px;
    width: 55px;
    height: 15px;/*height原本是22px，但是为了更好的呈现input在内部focus时展现边框，所以input的height减小*/
    margin: 3px;/*神来之笔，margin*/
    border: 1px solid white;/*input的宽度和td的宽度不一样，input边框显示白色，*/
}

/* 排序栏价格 */
div.categorySortBar table.categorySortBarTable td input.sortBarPrice:focus {
    border:1px solid blue;
}