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

  • A+
所属分类:建博笔记

先来看一下主题首页的 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;

即可。

修改后的效果:

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

修改后的效果

若文章图片、下载链接、网盘密码等信息出错,请留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: