修改杂志布局下，首页“TAB”三栏显示效果

先来看一下主题首页的 TAB 三栏默认显示效果：

默认显示效果

感觉这样的效果并不好看，三个面板挤在一起，而右侧却留了好多空白。

修改方法

打开【style.css】文件，找到代码段

/** TAB **/
.tab-site {
    overflow: hidden;
    margin: 0 0 10px 0;
    border: 1px solid #ddd;
    border-radius: 2px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}

.dom-display .current {
    display: block;
}

.tab-hd {
    background: #f8f8f8;
}

.tab-hd-con {
    width: 100px;
}

.tab-hd .current {
    width: 100px;
}

.tab-hd {
    overflow: hidden;
    height: 40px;
    line-height: 40px;
}

.tab-product .tab-hd .current, .tab-area .current {
    position: relative;
    z-index: 1;
    height: 40px;
    background: #fff;
}

.tab-hd-con {
    float: left;
    text-align: center;
    cursor: pointer;
    height: 39px;
    border-right: 1px solid #ddd;
}

.tab-hd-con a {
    display: inline-block;
}

.tab-bd-con {
    display: none;
    overflow: hidden;
}

.tab-bd {
    background: #fff;
    padding: 20px;
    margin-top: -1px;
    border-top: 1px solid #ddd;
}

.tab-bd li {
    float: left;
    width: 45%;
    line-height: 210%;
    margin: 0 20px 0 0;
    whitewhite-space: nowrap;
    word-wrap: normal;
    text-overflow: ellipsis;
    overflow: hidden;
}

@media screen and (max-width: 480px) {
    .tab-bd li {
        width: 95%;
        margin: 0 0 0 0;
    }
}

将其中的

.tab-hd-con {
    width: 100px;
}

.tab-hd .current {
    width: 100px;
}

修改为

.tab-hd-con {
    width: 33.33333333333333333%;
}

.tab-hd .current {
    width: 33.33333333333333333%;
}

同时，将

.tab-hd-con {
    float: left;
    text-align: center;
    cursor: pointer;
    height: 39px;
    border-right: 1px solid #ddd;
}

中的

border-right: 1px solid #ddd;

修改为

border-right: 0;

即可。

修改后的效果：

修改后的效果