实现原理
自适应正方型的原理是利用padding-bottom:100%来实现的，为什么padding-bottom:100%等于容器宽度而不是高度呢，因为padding和margin的百分比都是按照文档方向算的，正常的文档方式是左右，自然也就是宽度了。
垂直居中利用了flex的justify-content，具体可以搜索相关资料。
优点如下
1、随着页面宽度自适应，一直保持正方形。
2、头像和标题自动左右垂直居中。
实现方法
友情链接我以前写过好几篇文章了，原理大家都很熟悉了，直接给出CSS和PHP代码。
CSS代码
- .catalog-title{
- font-size:24px;
- color:#000;
- font-weight:700
- }
- .catalog-share{
- font-size:14px;
- color:rgba(0,0,0,.44);
- margin-bottom:20px
- }
- .userItems{
- display:-webkit-box;
- display:-webkit-flex;
- display:-ms-flexbox;
- display:flex;
- -webkit-flex-wrap:wrap;
- -ms-flex-wrap:wrap;
- flex-wrap:wrap;
- margin-bottom:50px
- }
- .userItem{
- width:25%;
- box-sizing:border-box;
- margin-bottom:20px;
- padding-left:10px;
- padding-right:10px
- }
- .userItem–inner{
- border:1pxsolidrgba(0,0,0,.05);
- box-shadow:01px4pxrgba(0,0,0,.04);
- border-radius:3px;
- position:relative;
- padding-bottom:100%;
- height:0
- }
- .userItem-content{
- display:-webkit-box;
- display:-webkit-flex;
- display:-ms-flexbox;
- display:flex;
- position:absolute;
- top:0;
- bottom:0;
- left:0;
- right:0;
- padding:10px;
- -webkit-box-align:center;
- -webkit-align-items:center;
- -ms-flex-align:center;
- align-items:center;
- -webkit-flex-flow:columnwrap;
- -ms-flex-flow:columnwrap;
- flex-flow:columnwrap;
- -webkit-box-pack:center;
- -webkit-justify-content:center;
- -ms-flex-pack:center;
- justify-content:center
- }
- .userItem-content.avatar{
- border-radius:100%
- }
- .userItem-name{
- margin-top:8px;
- text-align:center
- }
- @media(max-width:900px){
- .userItem{
- width:33.33333%
- }
- }
- @media(max-width:600px){
- .userItem{
- width:50%
- }
- }
PHP代码
- functionget_the_link_items($id=null){
- $bookmarks=get_bookmarks(‘orderby=date&category=’.$id);
- $output=”;
- if(!emptyempty($bookmarks)){
- $output.=‘<divclass=”catalog-share”>’.count($bookmarks).‘itemsincollection</div><divclass=”userItems”>’;
- foreach($bookmarksas$bookmark){
- $output.=‘<divclass=”userItem”><divclass=”userItem–inner”><divclass=”userItem-content”>’.get_avatar($bookmark->link_notes,64).‘
- <divclass=”userItem-name”><aclass=”linklink–primary”href=”‘.$bookmark->link_url.‘”target=”_blank”>’.$bookmark->link_name.‘</a></div></div></div></div>’;
- }
- $output.=‘</div>’;
- }
- return$output;
- }
- functionget_link_items(){
- $linkcats=get_terms(‘link_category’);
- if(!emptyempty($linkcats)){
- foreach($linkcatsas$linkcat){
- $result.=‘
- <h3class=”catalog-title”>’.$linkcat->name.‘</h3><divclass=”catalog-description”>’.$linkcat->description.‘</div>
- ‘;
- $result.=get_the_link_items($linkcat->term_id);
- }
- }else{
- $result=get_the_link_items();
- }
- return$result;
- }
本文由【好易之】整理自网络！
原创文章，作者:【好易之】如转载请注明出处：https://www.zhengjiaxi.com/zxwd/jswd/69793.html
如有侵权，请邮件联系 aoduoye@qq.com 删除。
本站发布的文章及附件仅限用于学习和研究目的;不得将上述内容用于商业或非法用途，否则后果请用户自负。
本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。
如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。如有侵权请邮件与我们联系处理。
原创文章，作者:【好易之】如转载请注明出处：https://www.zhengjiaxi.com/zxwd/jswd/69793.html
如有侵权，请邮件联系 aoduoye@qq.com 删除。
本站发布的文章及附件仅限用于学习和研究目的;不得将上述内容用于商业或非法用途，否则后果请用户自负。
本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。
如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。如有侵权请邮件与我们联系处理。
微信扫一扫 
