分享一下本站的卡片式友链页面模板

mengkun 11.6K 17

本博客的友情链接 页面采用了卡片式的设计，在鼠标滑过时，卡片会向上浮起(这一效果来自小米的官网)，同时页面整体是响应式的，在 >900px 的页面上一行显示三个卡片，在 600px~900px 大小的页面上一行显示两个卡片，在 <600px 的页面上则一行只显示一个。

如果卡片中的文字过长，还会自动进行“裁剪”，多出的文字会被“...”替代(只支持现代浏览器)。
分享一下本站的卡片式友链页面模板

最关键的是，它的浏览器兼容性非常好，就算是在低版本的 IE 上，页面也不会出现错乱。

(实现上面这些效果，历经了无数次的修改和完善)

今天将这一页面的源码分享出来，算是作为一个小小的元宵节礼物 [偷笑]

  1. <!--******************************
  2. * 卡片式友情链接页面
  3. * 孟坤博客 编写
  4. * 文章地址：http://mkblog.cn/666/  
  5. * 编写日期：2017-1-3
  6. *******************************-->
  8. <!doctype html>
  9. <html>
  10. <head>
  11.     <meta charset="utf-8">
  12.     <meta name="viewport" content="width=device-width, initial-scale=1">
  14.     <title>卡片式友情链接页面</title>
  16.     <style>
  17.     *{
  18.         padding: 0;margin: 0;
  19.         font-family: Microsoft Yahei, "微软雅黑", "Helvetica Neue", Helvetica, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
  20.     }
  22.     .container{
  23.         max-width: 1100px;
  24.         margin: 0 auto;
  25.     }
  27.     .more-title{
  28.         text-align: center;
  29.         font-weight: normal;
  30.         font-size: 25px;
  31.         margin: 20px 0 0 0;
  32.     }
  34.     /*放置链接框的区域*/
  35.     .link-box-area{
  36.         padding-top: 25px;
  37.         overflow: hidden;
  38.         zoom: 1;
  39.     }
  41.     /*链接框*/
  42.     .link-box{
  43.         width: 30%;
  44.         display: inline-block;
  45.         background: #EEE;
  46.         height: 150px;
  47.         margin-left: 2.5%;
  48.         margin-bottom: 25px;
  49.         float: left;
  50.         text-decoration: none!important;    /*这里这么处理是因为受下面的display: -webkit-box;影响，下划线又会回来*/
  51.         overflow: hidden;
  52.         -webkit-transition: all .2s linear; /*渐变效果*/
  53.             transition: all .2s linear;
  54.     }
  56.     /*链接区域鼠标滑动浮起效果*/
  57.     .link-box:hover{
  58.         z-index: 2; /*设置在顶层显示*/
  59.         -webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.1);    /*添加阴影*/
  60.         box-shadow: 0 15px 30px rgba(0,0,0,0.1);
  61.         -webkit-transform: translate3d(0, -2px, 0);     /*向上浮动*/
  62.         transform: translate3d(0, -2px, 0);
  63.     }
  65.     /*链接名字*/
  66.     .link-box .link-name{
  67.         font-size: 20px;
  68.         color: #15AAEA;
  69.         width: 100%;
  70.         display: inline-block;
  71.         text-align: center;
  72.         margin: 18px 0;
  73.         /*超过一行的内容被自动截断并加上省略号*/
  74.         text-overflow: -o-ellipsis-lastline;    /*最后一行加省略号*/
  75.         overflow: hidden;
  76.         text-overflow: ellipsis;    /*无法容纳的被加上省略号*/
  77.         display: -webkit-box;
  78.         -webkit-line-clamp: 1;  /*超出三行截断*/
  79.         -webkit-box-orient: vertical;
  80.     }
  82.     /*链接小图标*/
  83.     .link-box .link-name .link-favicon{
  84.         display: inline-block;
  85.         max-width: 30px;
  86.         height: 30px;
  87.         margin: -3px 2px 0 2px;
  88.         vertical-align: middle;
  89.         border: none;
  90.     }
  92.     /*链接描述*/
  93.     .link-box .link-direction{
  94.         display: inline-block;
  95.         padding: 0 14px;
  96.         font-size: 15px;
  97.         line-height: 25px;
  98.         color: #555;
  99.         /*超过三行的内容被自动截断并加上省略号*/
  100.         text-overflow: -o-ellipsis-lastline;    /*最后一行加省略号*/
  101.         overflow: hidden;
  102.         text-overflow: ellipsis;    /*无法容纳的被加上省略号*/
  103.         display: -webkit-box;
  104.         -webkit-line-clamp: 3;  /*超出三行截断*/
  105.         -webkit-box-orient: vertical;
  106.     }
  108.     /*网页宽度大于900px,每列显示3个*/
  109.     @media screen and (min-width:900px){
  110.         .link-box[data-role=.link-box-area]:nth-child(3n)
  111.         {
  112.             clear:both;
  113.         }
  114.     }
  116.     /*网页宽度在900px到600px之间,每列显示2个*/
  117.     @media screen and (max-width:900px) and (min-width:600px){
  118.         .link-box[data-role=.link-box-area]:nth-child(2n)
  119.         {
  120.             clear:both;
  121.         }
  122.         .link-box{
  123.             width: 40%;
  124.             height: 150px;
  125.             margin-left: 6.5%;
  126.         }
  127.     }
  129.     /*网页宽度小于600px,每列显示1个*/
  130.     @media screen and (max-width:600px){
  131.         .link-box{
  132.             width: 90%;
  133.             height: 150px;
  134.             margin-left: 5%;
  135.             clear:both;
  136.         }
  137.     }
  138.     </style>
  140. </head>
  141. <body>
  143. <div class="container">
  145. <h3 class="more-title">友情链接</h3>
  147. <div class="link-box-area">
  149. <a class="link-box" href="https://mkblog.cn/" target="_blank">
  150.     <span class="link-name">
  151.         <img class="link-favicon" src="https://api.byi.pw/favicon/?url=mkblog.cn"/>
  152.         孟坤博客
  153.     </span>
  154.     <span class="link-direction">
  155.         互联网+分享+科技+吐槽=孟坤博客
  156.     </span>
  157. </a>
  159. <a class="link-box" href="http://zb.mkblog.cn/" target="_blank">
  160.     <span class="link-name">
  161.         <img class="link-favicon" src="https://api.byi.pw/favicon/?url=zb.mkblog.cn"/>
  162.         斗图终结者
  163.     </span>
  164.     <span class="link-direction">
  165.         一个屌炸天的在线表情包制作网站，这里有各式各样的表情模板，还有大量的成品表情图，助您成为真正的斗图终结者！
  166.     </span>
  167. </a>
  169. <a class="link-box" href="http://tool.mkblog.cn/" target="_blank">
  170.     <span class="link-name">
  171.         <img class="link-favicon" src="https://api.byi.pw/favicon/?url=tool.mkblog.cn"/>
  172.         孟坤工具箱
  173.     </span>
  174.     <span class="link-direction">
  175.         孟坤博客开发的网页工具合集
  176.     </span>
  177. </a>
  179. <a class="link-box" href="http://s190793.blog.163.com/" target="_blank">
  180.     <span class="link-name">
  181.         <img class="link-favicon" src="https://api.byi.pw/favicon/?url=s190793.blog.163.com"/>
  182.         瀚宇软件工作室
  183.     </span>
  184.     <span class="link-direction">
  185.         专注于绿色优质软件的制作与分享！是孟坤软件的好伙伴
  186.     </span>
  187. </a>
  189. <a class="link-box" href="http://xbdcc.cn/" target="_blank">
  190.     <span class="link-name">
  191.         <img class="link-favicon" src="https://api.byi.pw/favicon/?url=xbdcc.cn"/>
  192.         行走的代码狗
  193.     </span>
  194.     <span class="link-direction">
  195.         没有什么到不了的地方，相信就有力量。做个流浪的码农，不骄不躁，不卑不亢，不屈不挠。
  196.     </span>
  197. </a>
  199. <a class="link-box" href="http://liubeijing.ren/" target="_blank">
  200.     <span class="link-name">
  201.         <img class="link-favicon" src="https://api.byi.pw/favicon/?url=liubeijing.ren"/>
  202.         刘北京的个人blog
  203.     </span>
  204.     <span class="link-direction">
  205.         前端开发者，本博主的“入坑导师”之一
  206.     </span>
  207. </a>
  209. <a class="link-box" href="http://zhuangxiabi.com/" target="_blank">
  210.     <span class="link-name">
  211.         <img class="link-favicon" src="https://api.byi.pw/favicon/?url=zhuangxiabi.com"/>
  212.         装下逼
  213.     </span>
  214.     <span class="link-direction">
  215.         装逼神器，无形装逼，最为致命；海量素材每天更新,让你永远站在潮流的风口浪尖
  216.     </span>
  217. </a>
  219. <a class="link-box" href="http://www.vpao.net/" target="_blank">
  220.     <span class="link-name">
  221.         <img class="link-favicon" src="https://api.byi.pw/favicon/?url=www.vpao.net"/>
  222.         V泡网
  223.     </span>
  224.     <span class="link-direction">
  225.         专注IT、科技、Wordpress、主机域名VPS分享的一个网站，在这里，可能有你想要的内容。
  226.     </span>
  227. </a>
  229. <a class="link-box" href="http://yigujin.cn/" target="_blank">
  230.     <span class="link-name">
  231.         <img class="link-favicon" src="https://api.byi.pw/favicon/?url=yigujin.cn"/>
  232.         懿古今
  233.     </span>
  234.     <span class="link-direction">
  235.         懿古今是一个普通人的生活纪实博客，记录和分享个人生活、工作、家庭、博客上的点点滴滴！
  236.     </span>
  237. </a>
  239. </div>  <!--class="link-box-area"-->
  241. <h3 class="more-title">博主的个人收藏夹</h3>
  243. <div class="link-box-area">
  245. <a class="link-box" href="http://ilxdh.com/" target="_blank">
  246.     <span class="link-name">
  247.         <img class="link-favicon" src="https://api.byi.pw/favicon/?url=ilxdh.com"/>
  248.         龙轩导航
  249.     </span>
  250.     <span class="link-direction">
  251.         做一个有用的网址导航
  252.     </span>
  253. </a>
  255. <a class="link-box" href="http://www.52pojie.cn/" target="_blank">
  256.     <span class="link-name">
  257.         <img class="link-favicon" src="https://api.byi.pw/favicon/?url=www.52pojie.cn"/>
  258.         吾爱破解论坛
  259.     </span>
  260.     <span class="link-direction">
  261.         吾爱破解论坛致力于软件安全与病毒分析的前沿，由无数热衷于软件加密解密及反病毒爱好者共同维护
  262.     </span>
  263. </a>
  265. <a class="link-box" href="http://www.kalcaddle.com/" target="_blank">
  266.     <span class="link-name">
  267.         <img class="link-favicon" src="https://api.byi.pw/favicon/?url=www.kalcaddle.com"/>
  268.         芒果云
  269.     </span>
  270.     <span class="link-direction">
  271.         芒果云 在线资源管理器 集文件管理、浏览、编辑于一体的工具。你可以像使用操作系统一样使用它！
  272.     </span>
  273. </a>
  275. <a class="link-box" href="http://www.smohan.net/" target="_blank">
  276.     <span class="link-name">
  277.         <img class="link-favicon" src="https://api.byi.pw/favicon/?url=www.smohan.net"/>
  278.         水墨寒的博客
  279.     </span>
  280.     <span class="link-direction">
  281.         水墨寒，90后双鱼座普通男青年！WEB前端工程师。喜欢敲代码的感觉，相信编程是一门艺术。
  282.     </span>
  283. </a>
  285. <a class="link-box" href="http://youquhome.com/" target="_blank">
  286.     <span class="link-name">
  287.         <img class="link-favicon" src="https://api.byi.pw/favicon/?url=youquhome.com"/>
  288.         有趣网址之家
  289.     </span>
  290.     <span class="link-direction">
  291.         分享有趣的国内外网站&amp;应用新奇的html5网站
  292.     </span>
  293. </a>
  295. <a class="link-box" href="http://kongzue.com/" target="_blank">
  296.     <span class="link-name">
  297.         <img class="link-favicon" src="https://api.byi.pw/favicon/?url=kongzue.com"/>
  298.         空祖·N碳社
  299.     </span>
  300.     <span class="link-direction">
  301.         立志于打造最好用、易用的软件
  302.     </span>
  303. </a>
  305. </div>  <!--class="link-box-area"-->
  307. </div>  <!--class="container"-->
  309. </body>

预览效果请戳我

附加福利

如果你使用的是 Nana 主题，只需下载以下这个页面模板文件：
百度网盘 蓝奏云 诚通网盘 永硕E盘

然后替换掉主题自带的 “template-links.php” 再新建一个页面，页面模板选择“友情链接”。

在页面的正文区按照如下格式添加友链即可。

  1. <!-- 注：请在 link-box-area 这个div中添加内容 -->
  2. <div class="link-box-area">
  4. <a class="link-box" href="友链网址" target="_blank">
  5.     <span class="link-name">
  6.         <img class="link-favicon" src="友链favicon图标"/>
  7.         友链名称
  8.     </span>
  9.     <span class="link-direction">
  10.         友链描述
  11.     </span>
  12. </a>
  14. <a class="link-box" href="友链网址" target="_blank">
  15.     <span class="link-name">
  16.         <img class="link-favicon" src="友链favicon图标"/>
  17.         友链名称
  18.     </span>
  19.     <span class="link-direction">
  20.         友链描述
  21.     </span>
  22. </a>
  24. ......
  26. </div>

本文作者为mengkun，转载请注明。

发表评论 取消回复
表情 图片 链接 代码

  1. 天空科技
    天空科技 Lv 1

    https://api.byi.pw/favicon/?url=
    这个可以[aru_1]

    #12 2020-08-14 19:23 回复
  2. 天空科技
    天空科技 Lv 1

    网站ico获取失效了！！

    #11 2020-08-14 18:17 回复
  3. Lin
    Lin Lv 1

    友联模板的确很不错，如果我用的其他模板应该怎么调用呢？

    #10 2017-05-24 22:38 回复
  4. 大东
    大东 Lv 1

    找个安卓QQ微信秒抢的挂，免root的，屌大的坤哥有看到帮忙留意一下

    #9 2017-03-25 11:11 回复
  5. QasimT瞎扯蛋
    QasimT瞎扯蛋 Lv 1

    谢谢 已收藏。很实用

    #8 2017-03-16 10:44 回复
  6. boke112导航
    boke112导航 Lv 1

    这个效果不错，看起来也挺好的，而且还可以做成读者墙之类的。

    #7 2017-03-10 23:52 回复
    • mengkun
      mengkun 站长

      @boke112导航哈哈，是挺百搭的。我在几处地方都用了这个做页面链接模板 #(笑眼)

      2017-03-11 00:07 回复
  7. V泡网
    V泡网 Lv 2

    我来了 [坏笑]

    #6 2017-02-25 21:14 回复
    • mengkun
      mengkun 站长

      @V泡网欢迎来访~ [得意]

      2017-02-25 21:20 回复
  8. 九州套图
    九州套图 Lv 1

    简约不简单，大气有内涵！

    #5 2017-02-18 17:00 回复
  9. 分钱榜
    分钱榜 Lv 2

    这个好

    #4 2017-02-18 11:26 回复
  10. suppore
    suppore Lv 1

    不错的、

    地板 2017-02-13 15:14 回复
    • mengkun
      mengkun 站长

      @suppore喜欢就好 [鼓掌]

      2017-02-13 18:09 回复
      • Mamba
        Mamba Lv 1

        @mengkun博主这个评论功能怎么做？

        2018-01-16 15:13 回复
  11. suppore
    suppore Lv 1

    不错的。

    板凳 2017-02-13 15:12 回复
  12. 瀚宇
    瀚宇 Lv 3

    给你点个赞 [强] ，鼓励一下 [得意]

    沙发 2017-02-12 18:20 回复
    • mengkun
      mengkun 站长

      @瀚宇点赞在文章左下角 [坏笑]

      2017-02-12 18:29 回复
分享