• 开启全站HTTPS。2017-04-29
  • 本站为非盈利性站点,所得收入全部用于网站服务器及其他费用。2015-10-15
  •    3年前 (2016-04-30)  WordPress教程 |   抢沙发  73 
    文章评分 0 次,平均分 0.0

    实现原理

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

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

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

    优点如下

    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: 1px solid rgba(0,0,0,.05);
    box-shadow: 0 1px 4px rgba(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: column wrap;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    -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代码

    function get_the_link_items($id = null){
    $bookmarks = get_bookmarks(‘orderby=date&category=’ . $id);
    $output = ”;
    if (!empty($bookmarks)) {
    $output .= ‘<div class=”catalog-share”>’ . count($bookmarks) . ‘ items in collection</div><div class=”userItems”>’;
    foreach ($bookmarks as $bookmark) {
    $output .= ‘<div class=”userItem”><div class=”userItem–inner”><div class=”userItem-content”>’. get_avatar($bookmark->link_notes,64) . ‘
    <div class=”userItem-name”><a class=”link link–primary” href=”‘ . $bookmark->link_url . ‘” target=”_blank” >’ . $bookmark->link_name . ‘</a></div></div></div></div>’;
    }
    $output .= ‘</div>’;
    }
    return $output;
    }

    function get_link_items(){
    $linkcats = get_terms(‘link_category’);
    if (!empty($linkcats)) {
    foreach ($linkcats as $linkcat) {
    $result .= ‘
    <h3 class=”catalog-title”>’ . $linkcat->name . ‘</h3><div class=”catalog-description”>’ . $linkcat->description . ‘</div>
    ‘;
    $result .= get_the_link_items($linkcat->term_id);
    }
    } else {
    $result = get_the_link_items();
    }
    return $result;
    }

     

     

    除特别注明外,本站所有文章均为小浩博客原创,转载请注明出处来自https://www.xhsay.com/create-a-beautiful-friendship-link-page.html

    关于
    小浩博客(www.xhsay.com)是由Tovey建立的个人站点,主要致力于整合并分享各种互联网及网站建设的资源。

    发表评论

    表情 格式

    暂无评论

    切换注册

    登录

    忘记密码 ?

    您也可以使用第三方帐号快捷登录

    切换登录

    注册