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

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

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

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

默认显示效果

感觉这样的效果并不好看,三个面板挤在一起,而右侧却留了好多空白,所以将其修改。

 

打开style.css文件,在大约第8467行的位置,找到代码段

  1. /** TAB **/
  2. .tab-site {
  3.     overflowhidden;
  4.     margin: 0 0 10px 0;
  5.     border1px solid #ddd;
  6.     border-radius: 2px;
  7.     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
  8. }
  9. .dom-display .current {
  10.     displayblock;
  11. }
  12. .tab-hd {
  13.     background#f8f8f8;
  14. }
  15. .tab-hd-con {
  16.     width100px;
  17. }
  18. .tab-hd .current {
  19.     width100px;
  20. }
  21. .tab-hd {
  22.     overflowhidden;
  23.     height40px;
  24.     line-height40px;
  25. }
  26. .tab-product .tab-hd .current, .tab-area .current {
  27.     positionrelative;
  28.     z-index: 1;
  29.     height40px;
  30.     background#fff;
  31. }
  32. .tab-hd-con {
  33.     floatleft;
  34.     text-aligncenter;
  35.     cursorpointer;
  36.     height39px;
  37.     border-right1px solid #ddd;
  38. }
  39. .tab-hd-con a {
  40.     displayinline-block;
  41. }
  42. .tab-bd-con {
  43.     displaynone;
  44.     overflowhidden;
  45. }
  46. .tab-bd {
  47.     background#fff;
  48.     padding20px;
  49.     margin-top: -1px;
  50.     border-top1px solid #ddd;
  51. }
  52. .tab-bd li {
  53.     floatleft;
  54.     width: 45%;
  55.     line-height: 210%;
  56.     margin: 0 20px 0 0;
  57.     whitewhite-spacenowrap;
  58.     word-wrap: normal;
  59.     text-overflow: ellipsis;
  60.     overflowhidden;
  61. }
  62. @media screen and (max-width480px) {
  63.     .tab-bd li {
  64.         width: 95%;
  65.         margin: 0 0 0 0;

将其中的

  1. .tab-hd-con {
  2.     width100px;
  3. }
  4. .tab-hd .current {
  5.     width100px;

修改

  1. .tab-hd-con {
  2.     width: 33.33333333333333333%;
  3. }
  4. .tab-hd .current {
  5.     width: 33.33333333333333333%;
  6. }

同时,将

  1. .tab-hd-con {
  2.     floatleft;
  3.     text-aligncenter;
  4.     cursorpointer;
  5.     height39px;
  6.     border-right1px solid #ddd;
  7. }

中的

  1. border-right1px solid #ddd;

修改

  1. border-right: 0;

 

修改后的效果:

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

修改后的效果

发表评论

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