博华网络科技,点击查看详情

WORDPRESS教程:使用FLEX打造漂亮友情链接页面

实现原理

自适应正方型的原理是利用padding-bottom:100%来实现的,为什么padding-bottom:100%等于容器宽度而不是高度呢,因为padding和margin的百分比都是按照文档方向算的,正常的文档方式是左右,自然也就是宽度了。

垂直居中利用了flex的justify-content,具体可以搜索相关资料。

201604232300

优点如下

1、随着页面宽度自适应,一直保持正方形。

2、头像和标题自动左右垂直居中。

实现方法

友情链接我以前写过好几篇文章了,原理大家都很熟悉了,直接给出CSS和PHP代码。

CSS代码

  1. .catalog-title {
  2. font-size: 24px;
  3. color: #000;
  4. font-weight: 700
  5. }
  6. .catalog-share {
  7. font-size: 14px;
  8. color: rgba(0,0,0,.44);
  9. margin-bottom: 20px
  10. }
  11. .userItems {
  12. display: -webkit-box;
  13. display: -webkit-flex;
  14. display: -ms-flexbox;
  15. display: flex;
  16. -webkit-flex-wrap: wrap;
  17. -ms-flex-wrap: wrap;
  18. flex-wrap: wrap;
  19. margin-bottom: 50px
  20. }
  21. .userItem {
  22. width: 25%;
  23. box-sizing: border-box;
  24. margin-bottom: 20px;
  25. padding-left: 10px;
  26. padding-right: 10px
  27. }
  28. .userItem–inner {
  29. border: 1px solid rgba(0,0,0,.05);
  30. box-shadow: 0 1px 4px rgba(0,0,0,.04);
  31. border-radius: 3px;
  32. position: relative;
  33. padding-bottom: 100%;
  34. height: 0
  35. }
  36. .userItem-content {
  37. display: -webkit-box;
  38. display: -webkit-flex;
  39. display: -ms-flexbox;
  40. display: flex;
  41. position: absolute;
  42. top: 0;
  43. bottom: 0;
  44. left: 0;
  45. right: 0;
  46. padding: 10px;
  47. -webkit-box-align: center;
  48. -webkit-align-items: center;
  49. -ms-flex-align: center;
  50. align-items: center;
  51. -webkit-flex-flow: column wrap;
  52. -ms-flex-flow: column wrap;
  53. flex-flow: column wrap;
  54. -webkit-box-pack: center;
  55. -webkit-justify-content: center;
  56. -ms-flex-pack: center;
  57. justify-content: center
  58. }
  59. .userItem-content .avatar {
  60. border-radius: 100%
  61. }
  62. .userItem-name {
  63. margin-top: 8px;
  64. text-align: center
  65. }
  66. @media (max-width:900px) {
  67. .userItem {
  68. width: 33.33333%
  69. }
  70. }
  71. @media (max-width:600px) {
  72. .userItem {
  73. width: 50%
  74. }
  75. }

PHP代码

  1. function get_the_link_items($id = null){
  2. $bookmarks = get_bookmarks(‘orderby=date&category=’ . $id);
  3. $output = ”;
  4. if (!emptyempty($bookmarks)) {
  5. $output .= ‘<div class=”catalog-share”>’ . count($bookmarks) . ‘ items in collection</div><div class=”userItems”>’;
  6. foreach ($bookmarks as $bookmark) {
  7. $output .= ‘<div class=”userItem”><div class=”userItem–inner”><div class=”userItem-content”>’. get_avatar($bookmark->link_notes,64) . ‘
  8. <div class=”userItem-name”><a class=”link link–primary” href=”‘ . $bookmark->link_url . ‘” target=”_blank” >’ . $bookmark->link_name . ‘</a></div></div></div></div>’;
  9. }
  10. $output .= ‘</div>’;
  11. }
  12. return $output;
  13. }
  14. function get_link_items(){
  15. $linkcats = get_terms(‘link_category’);
  16. if (!emptyempty($linkcats)) {
  17. foreach ($linkcats as $linkcat) {
  18. $result .= ‘
  19. <h3 class=”catalog-title”>’ . $linkcat->name . ‘</h3><div class=”catalog-description”>’ . $linkcat->description . ‘</div>
  20. ‘;
  21. $result .= get_the_link_items($linkcat->term_id);
  22. }
  23. else {
  24. $result = get_the_link_items();
  25. }
  26. return $result;
  27. }

人已赞赏
wordpress教程

WordPress教程:更换安装目录

2020-5-26 12:41:05

wordpress教程

WordPress教程: 4.2 评论表情失效解决方法

2020-5-26 12:41:09

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索