文章列表样式一(更新中…)

文章列表html(post_1)

模型文件路径Modules>Templates>Modules>post.php

第27行开始

首先给各项加上title,浮动提示,不管对seo有没有好处,反正大厂都乐意这么干,我们有样学样就得了。

查找:

//文章列表
$html .= '<li class="post-list-item item-'.$post_style.'" id="item-'.$v['id'].'">
    <div class="item-in box b2-radius">
        <div class="post-module-thumb" style="padding-top:'.$size['ratio'].'%">
            <a '.$open.' href="'.$v['link'].'" rel="nofollow"
                class="thumb-link">'.b2_get_img(array('src'=>$thumb,'class'=>array('post-thumb'),'alt'=>$v['title'])).self::get_post_icon($v['id']).'</a>
            '.($v['status'] === 'pending' ? '<span class="post-status">'.__('审核中...','b2').'</span>' : ($v['status']
            === 'draft' ? '<span class="post-status">'.__('草稿','b2').'</span>' : '')).'
        </div>
        <div class="post-info">
            <h2><a '.$open.' href="'.$v['link'].'">'.$v['title'].'</a></h2>
            '.(in_array('des',$post_meta) ?
            '<div class="post-excerpt">
                '.$v['des'].'
            </div>' :
            '').'
            '.$meta_html.'
            '.$list_footer.'
        </div>
    </div>
</li>';

修改:

//文章列表
$html .= '<li class="post-list-item item-'.$post_style.'" id="item-'.$v['id'].'">
    <div class="item-in box b2-radius">
        <div class="post-module-thumb" style="padding-top:'.$size['ratio'].'%">
            <a '.$open.' href="'.$v['link'].'" rel="nofollow" class="thumb-link"
                title="'.$v['title'].'">'.b2_get_img(array('src'=>$thumb,'class'=>array('post-thumb'),'alt'=>$v['title'])).self::get_post_icon($v['id']).'</a>
            '.($v['status'] === 'pending' ? '<span class="post-status">'.__('审核中...','b2').'</span>' : ($v['status']
            === 'draft' ? '<span class="post-status">'.__('草稿','b2').'</span>' : '')).'
        </div>
        <div class="post-info">
            <h2><a '.$open.' href="'.$v['link'].'" title="'.$v['title'].'">'.$v['title'].'</a></h2>
            '.(in_array('des',$post_meta) ?
            '<div class="post-excerpt">
                '.$v['des'].'
            </div>' :
            '').'
            '.$meta_html.'
            '.$list_footer.'
        </div>
    </div>
</li>';

 

目标:模块标题只显示一行

修改思路:7b2原css设置的多行溢出第二行省略号,且设置了2行的高度,改为第一行省略号,首先修改溢出省略号要显示的行,再调整高度。顺便修改一下字号,感觉16px有点大,改为14px好了

样式文件路径Assets>fontend>style.css

查找:

.post-info h2{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    height: 44px;
    margin: 16px 16px 10px;
    font-size: 16px;
}

修改:

.post-info h2{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    margin: 16px 16px 10px;
    font-size: 14px;
}
修改后效果

修改解读:

-webkit-line-clamp多行溢出:…

注意:-webkit-line-clamp是webkit的私有属性,是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。

 -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:

display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。

-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。

 

延伸:单行文本溢出显示省略号…代码

.css{
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap
}

好像看上去太呆板了,那么我们加一点小玩意(鼠标触发效果啦hover)

查找.post-info h2下面添加:

.post-info h2 a:hover{
    color: #d36f16;
}

图片也来一下吧,移动改变透明度opacity

查找:.post-module-thumb下面添加

.post-module-thumb:hover{
    opacity: .85;
}
文章最后更新于 2021-02-27

为TA充电
b2美化

2.7.0更新记录

2021-2-23 20:21:34

b2美化

网站头部设计登录优化

2021-2-23 21:17:40

0 条回复 A文章作者
    暂无讨论,说说你的看法吧

解锁会员资源

开通会员

解锁海量优质VIP资源

立即开通

个人中心
购物车
优惠劵
有新私信 私信列表
搜索