快生活 - 生活常识大全

站点顶部导航美化及侧边栏和两栏标题美化


  一、知更鸟顶部导航美化
  将顶部导航 top-header 位置css修改成以下两种中的其中一种。
  1、顶部导航部添加彩色条
  #top-header{
  background:#e7e7e7url(https://wx2.sinaimg.cn/large/006VCrUsgy1fjmflwl7rog30ag004dfs.gif)repeat-xscroll0100%;
  }
  彩色条美化后图
  2、顶部导航添加渐变色
  #top-header{
  background:linear-gradient(-30deg,rgba(255,213,60,.71)10%,rgba(161,230,243,.78))no-repeat;
  border-bottom:1pxsolid#dedede;
  }
  渐变色美化后图
  二、侧边栏和两栏标题美化
  将侧边栏标题 sidebar h3 位置css修改成以下。
  #sidebarh3{
  background:#fff;
  height:37.5px;
  line-height:37.5px;
  border-bottom:1pxsolid#e2e1e1;
  margin:020px020px;
  text-align:center;
  font-size:1.8rem;
  letter-spacing:4px;
  color:#606777;
  }
  按照以上css修改后,标题栏位置还多了一个 .title-i ,后台找到 .title-i 将其隐藏。
  .title-i{
  float:left;
  width:16px;
  display:none;
  }
  将 .title-i 隐藏后,如下效果图。
  侧边栏标题美化后
  然后,如果使用杂志布局的会发现两栏位置前面的 标题ICO 也会不见了,下图红圈的位置。
  两栏标题美化前
  然后,将 .cat-box .cat-title a 位置css修改成以下即可。
  .cat-box.cat-titlea{
  float:left;
  width:95%;
  margin-left:20px;
  color:#606777;
  }
  两栏标题美化后
  经过一番折腾,美化了一些,代码也是在小伙伴站扒的,还扒了一些其他的,不好全部写出来,需要的小伙伴自己扒吧。
网站目录投稿:凡白