知更鸟顶部导航美化及侧边栏和两栏标题美化

2018年5月18日22:56:09 4 6,449
摘要

知更鸟顶部导航美化及侧边栏和两栏标题美化。上完一周的班后,也逛了逛小伙伴的网站,发现许多好玩的css,才想到我也好久没有折腾网站了,于是,回到家,在小伙伴的网站上扒了一些css过来,美化了下。

上完一周的班后,也逛了逛小伙伴的网站,发现许多好玩的css,才想到我也好久没有折腾网站了,于是,回到家,在小伙伴的网站上扒了一些css过来,美化了下。

一、知更鸟顶部导航美化

将顶部导航 top-header 位置css修改成以下两种中的其中一种。

1、顶部导航部添加彩色条

  1. #top-header?{
  2. ????background:?#e7e7e7?url(https://wx2.sinaimg.cn/large/006VCrUsgy1fjmflwl7rog30ag004dfs.gif?)?repeat-x?scroll?0?100%;
  3. }

知更鸟顶部导航美化及侧边栏和两栏标题美化

彩色条美化后图

2、顶部导航添加渐变色

  1. #top-header?{
  2. ????background:?linear-gradient(-30deg,rgba(255,213,60,.71)?10%,rgba(161,230,243,.78))?no-repeat;
  3. ????border-bottom:?1px?solid?#dedede;
  4. }

知更鸟顶部导航美化及侧边栏和两栏标题美化

渐变色美化后图

二、侧边栏和两栏标题美化

6-27注:begin最新版下面修改失效,更多请自行折腾。

将侧边栏标题 sidebar h3 ?位置css修改成以下。

  1. #sidebar?h3?{
  2. ????background:?#fff;
  3. ????height:?37.5px;
  4. ????line-height:?37.5px;
  5. ????border-bottom:?1px?solid?#e2e1e1;
  6. ????margin:?0?20px?0?20px;
  7. ????text-align:?center;
  8. ????font-size:?1.8rem;
  9. ????letter-spacing:?4px;
  10. ????color:?#606777;
  11. }

按照以上css修改后,标题栏位?#27809;?#22810;了一个 .title-i ?,后台找到 .title-i ?将其隐藏。

  1. .title-i?{
  2. ????float:?left;
  3. ????width:?16px;
  4. ????display:?none;
  5. }

将 ?.title-i ?隐藏后,如下效果图。

知更鸟顶部导航美化及侧边栏和两栏标题美化

侧边栏标题美化后

然后,如果使用杂志布局的会发现两栏位置前面的 标题ICO 也会不见了,下图红圈的位置。

知更鸟顶部导航美化及侧边栏和两栏标题美化

两栏标题美化前

然后,将 .cat-box .cat-title a ?位置css修改成以下即可。

  1. .cat-box?.cat-title?a?{
  2. ????float:?left;
  3. ????width:?95%;
  4. ????margin-left:?20px;
  5. ????color:?#606777;
  6. }

知更鸟顶部导航美化及侧边栏和两栏标题美化

两栏标题美化后


经过一番折腾,美化了一些,代码也是在小伙伴站扒的,还扒了一些其他的,不好全部写出来,需要的小伙伴自己扒吧。



版权声明:本文由江西SEO原创或整理发布,欢迎分享! 更多优化知识请查看 SEO教程

本文链接:http://www.741189.fun/5735.html

  • 博客之家
  • 博客之家,本站的资源收集于群里以便下载。当然,更多的是建站知识交流~
  • weinxin
  • SEO优化交流群
  • SEO优化交流群,交流seo优化技巧。860716446
  • weinxin

发表评论

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

目前评论:4   其中:访客  2   博主  2

    • 青山 青山 1

      侧边栏和两栏标题美化,在知更鸟更新之后,一样可以按照以上方法操作,我已验证

      • 690 690 0

        网站打开速度好快,有优化的教程吗

          • cook cook Admin

            @690 http://www.741189.fun/380.html
            http://www.741189.fun/899.html
            http://www.741189.fun/5517.html
            三篇文章中有讲到过 你可以看下