hexo设置右上角 fork me on github

右上角点击到github

打开链接https://github.blog/2008-12-19-github-ribbons/ 挑选自己喜欢的样式

打开theme\next\layout\_layout.swig,添加html代码。


<div class="{{ container_class }} {% block page_class %}{% endblock %}">
    <div class="headband"></div>
<!--上面是原有的,找到上面的代码,下面是自己编写的,拷贝上面链接中的代码即可。-->
<a href="https://github.com/baiyazi">
      <img width="100" height="100" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_darkblue_121621.png?resize=149%2C149" style="position:absolute;top:0;right:0;border:0;" alt="Fork me on GitHub" data-recalc-dims="1">
</a>

小屏幕不显示fork me on github

为它添加CSS样式, 在上面的a标签中添加类样式就可以了。

.forkme{
     display: none;
 }
  @media (min-width: 768px) {
     .forkme{
         display: inline;
     }
  }

解释一下:

Media Queries工作方式:

● screen 是媒体类型里的一种,CSS2.1定义了10种媒体类型
● and 被称为关键字,其他关键字还包括 not(排除某种设备),only(限定某种设备)
● (min-width: 400px) 就是媒体特性,其被放置在一对圆括号中。

第一种方式:

可以直接在link中判断设备的尺寸,然后引用不同的css文件:

<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">

意思是当屏幕的宽度大于等于400px的时候,应用styleA.css

<link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 600px) and (max-width: 800px)">

意思是当屏幕的宽度大于600小于800时,应用styleB.css

第二种方式

另一种方式,即是直接写在 style 标签里:
例如:(根据窗口大小不同使用不同大小的字体)

//窗口宽度大于900px
@media screen and(min-width:900px)
{
  body{
       font-size:25px;
      }
}
//窗口宽度大于500px小于900px
@media screen and(min-width:500px)and(max-width:900px)
{
  body{
       font-size:20px;
      }
}
//窗口宽度小于500px
@media screen and(max-width:500px)
{
  body{
       font-size:15px;
      }
}

前端响应式布局最出名的框架莫过于 Bootstrap


   Reprint policy


《hexo设置右上角 fork me on github》 by weizu is licensed under a Creative Commons Attribution 4.0 International License
 Previous
CSS媒体查询  |  利用@media screen实现网页布局的自适应 CSS媒体查询 | 利用@media screen实现网页布局的自适应
利用@media screen实现网页布局的自适应准备工作1:设置Meta标签首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果: <meta name="viewport" content="width=
2019-05-06
Next 
hexo在线聊天功能 | DaoVoice hexo在线聊天功能 | DaoVoice
注册首先需要注册一个 DaoVoice,点击注册 注册成功后,进入后台控制台,进入到(左边导航栏) 应用设置-->(次左边导航栏)安装到网站页面,可以看见:您想和谁沟通出现下面的代码:1.将下面代码粘贴在页面的 之前 <scr
2019-05-05
  TOC