Product details page --- excellent purchase product detail module product_detail

Building structure

Whole big box product detail module named: product_detail (not to height, pay attention to remove the influence caused by floating)
No. 1 box named: aside (left side of the float, there is no broadband to height)
No. 2 box named: detail (Right float side, with a height to width not)

<!--产品细节模块-->
<div class="product_detail clearfix"><!--父亲没高度，孩子还都浮动-->
    <div class="aside fl">123</div>
    <div class="detail fr">abc</div>
</div>

.aside {
    width: 208px;
    /*不给高度*/
    height: 1000px;/*等下会删掉*/
    border: 1px solid #ccc;
}
.detail {
    width: 978px;
    /*不给高度*/
    height: 1000px;/*等下会删掉*/
    border: 1px solid #ccc;
}

aside: on the left tab column layout

No. 1 box named tab_list to highly enough, and which put ul li note here is the tab bar to switch layout
No. 2 box named tab_con which contains a number of ul_item and No. 1 inside the box li-one correspondence
step1: the production tab_list

<div class="aside fl">
    <div class="tab_list">
        <ul>
            <li class="first_tab current">相关分类</li>
            <li class="second_tab">推荐品牌</li>
        </ul>
    </div>
    <div class="tab_con">
        abc
    </div>
</div>

.aside {
    width: 208px;
    /*不给高度*/
    height: 1000px;/*等下会删掉*/
    border: 1px solid #ccc;
}
.tab_list {
    height: 34px;/*量边框 边框等下给里面的li*/
    /*background-color: pink;*/
}
/*把背景色 底边框都给了li*/
.tab_list li {
    float: left;
    background-color: #f1f1f1;/*这是每个li默认的灰色 li只有在被点击之后才会变成白色。先不写白色*/
    border-bottom: 1px solid #ccc;
    height: 33px;
    text-align: center;
    line-height: 33px;
}
/*鼠标单击li变化样式： 背景变白色 去掉下边框 文字变颜色*/
.tab_list .current {
    background-color: #fff;
    border-bottom: 0;
    color: red;
}
.first_tab {
    width: 104px;
}
.second_tab {
    width: 103px;
    border-left: 1px solid #ccc;
}

step2: tab_con production

<div class="tab_con">
    <ul><!--一组ul和“相关分类相对应” 应该还有一组ul和“推荐品牌相对应”这里只写一组ul-->
        <li>
            <img src="upload/aside_img.jpg">
            <h5>总结得好好，还有配图更加清晰了总结得好好，还有配图更加清晰了</h5>
            <div class="aside_price">￥19</div>
            <a href="#" class="as_addcar">加入购物车</a>
        </li>
        <li>
            <img src="upload/aside_img.jpg">
            <h5>总结得好好，还有配图更加清晰了总结得好好，还有配图更加清晰了</h5>
            <div class="aside_price">￥19</div>
            <a href="#" class="as_addcar">加入购物车</a>
        </li>
        <li>
            <img src="upload/aside_img.jpg">
            <h5>总结得好好，还有配图更加清晰了总结得好好，还有配图更加清晰了</h5>
            <div class="aside_price">￥19</div>
            <a href="#" class="as_addcar">加入购物车</a>
        </li>
    </ul>
</div>

.tab_con {
    padding: 0 10px;
}
.tab_con li {
    border-bottom: 1px solid #ccc;
}
.tab_con li h5 {
    white-space: nowrap; /*1:强制文字一行内显示*/
    overflow: hidden;/*2: 溢出隐藏*/
    text-overflow: ellipsis;/*3：溢出的文字用省略号显示*/

    font-weight: normal;
}
.aside_price {
    font-weight: 700;
    margin: 10px 0;
}
.as_addcar {
    display: block;
    width: 88px;
    height: 26px;
    border: 1px solid #ccc;
    background-color: #f7f7f7;
    margin: 10px auto;/*块级元素居中对齐*/
    text-align: center;
    line-height: 26px;
}
/*此时可以把之前给aside的高度（1000px）删掉了*/

detail: detail right column layout (only one part)

No. 1 to the height of the box like named detail_tab_list
No. 2 box named detail_tab_con
Step1: Production detail_tab_list