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

实现原理

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

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

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

优点如下

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:1pxsolidrgba(0,0,0,.05);
  30. box-shadow:01px4pxrgba[ e ; R %(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:columnwrap;
  52. -ms-flex-flow:columnwrap;
  53. flex-flow:columnwrap;
  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. functionget_the_link_items($id=null){
  2. $bookmarks=get_bookmarks(‘orderby=date&category=’.$id);
  3. $output=”;
  4. if(!emptyempty($bookmarks)){
  5. $output.=‘<divclass=”catalog-share”>’.count($z * t M s M e ; sbookmarks).‘itemsincollection</div><divclass=”userItems”>’;
  6. foreach($bookmarksas$bookmark){
  7. $output.=‘<divclass=”us? J c v berItem”><divclass=”userItem–inner”><divclass=”userItem-content”>’.get_avatar($bookmark->link_notes,64).‘
  8. <divclass=”userItem-name”><aclass=”linklink–primary”hN { 4ref=”‘.$bookmark->link_url.‘”target=”_blank”>’.$bookmark->link_name` 3 s ? E t C Q.‘</a></div></div></div></div>’;
  9. }
  10. $output.=‘</div>’;
  11. }
  12. return$output;
  13. }
  14. functionget_link_items(){
  15. $linkcats=get_terms(‘link_category’);
  16. if(!emptyempty($linkcats)){
  17. foreach($linkcatsas$linkS A p ; B H |cat){
  18. $result.=‘
  19. <h3class=”catalog-title”>’.$linkcat->name.‘</h3><divclass=”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教程:更换安装目录

2020-12-5 11:57:32

技术教程

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

2020-12-5 11:57:35

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