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

mengkun 4,734 15

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

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

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

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

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

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

预览效果请戳我

附加福利

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

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

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

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

打赏
发表评论
表情 图片 链接 代码

  1. Lin
    Lin Lv 1

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

  2. 大东
    大东 Lv 1

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

  3. QasimT瞎扯蛋

    谢谢 已收藏。很实用

  4. boke112导航

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

    • mengkun
      mengkun 站长

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

  5. V泡网
    V泡网 Lv 2

    我来了 [坏笑]

    • mengkun
      mengkun 站长

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

  6. 九州套图

    简约不简单,大气有内涵!

  7. 分钱榜
    分钱榜 Lv 2

    这个好

  8. suppore
    suppore Lv 1

    不错的、

  9. suppore
    suppore Lv 1

    不错的。

  10. 瀚宇
    瀚宇 Lv 3

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

    • mengkun
      mengkun 站长

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

分享
微信
微博
QQ