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

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

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

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

默认显示效果

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

 

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

  1. /** TAB **/
  2. .tab-site {
  3.     overflow: hidden;
  4.     margin: 0 0 10px 0;
  5.     border: 1px solid #ddd;
  6.     border-radius: 2px;
  7.     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
  8. }
  10. .dom-display .current {
  11.     display: block;
  12. }
  14. .tab-hd {
  15.     background: #f8f8f8;
  16. }
  18. .tab-hd-con {
  19.     width: 100px;
  20. }
  22. .tab-hd .current {
  23.     width: 100px;
  24. }
  26. .tab-hd {
  27.     overflow: hidden;
  28.     height: 40px;
  29.     line-height: 40px;
  30. }
  32. .tab-product .tab-hd .current, .tab-area .current {
  33.     position: relative;
  34.     z-index: 1;
  35.     height: 40px;
  36.     background: #fff;
  37. }
  39. .tab-hd-con {
  40.     float: left;
  41.     text-align: center;
  42.     cursor: pointer;
  43.     height: 39px;
  44.     border-right: 1px solid #ddd;
  45. }
  47. .tab-hd-con a {
  48.     display: inline-block;
  49. }
  51. .tab-bd-con {
  52.     display: none;
  53.     overflow: hidden;
  54. }
  56. .tab-bd {
  57.     background: #fff;
  58.     padding: 20px;
  59.     margin-top: -1px;
  60.     border-top: 1px solid #ddd;
  61. }
  63. .tab-bd li {
  64.     float: left;
  65.     width: 45%;
  66.     line-height: 210%;
  67.     margin: 0 20px 0 0;
  68.     whitewhite-space: nowrap;
  69.     word-wrap: normal;
  70.     text-overflow: ellipsis;
  71.     overflow: hidden;
  72. }
  74. @media screen and (max-width: 480px) {
  75.     .tab-bd li {
  76.         width: 95%;
  77.         margin: 0 0 0 0;

将其中的

  1. .tab-hd-con {
  2.     width: 100px;
  3. }
  5. .tab-hd .current {
  6.     width: 100px;

修改为

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

同时，将

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

中的

  1. border-right: 1px 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: