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

本文共计2467个字，预计阅读时长7分钟。

文章列表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;
}