当前位置:首页 >> 技术分享 >> 详情
sousuo
sousuo

19、上一篇下一篇设计和制作方案

上传时间:2020-08-13            浏览次数:78


一、现象

上一篇和下一篇按钮写样式时候,如果只考虑加a的情况,忽略不加a的样式,就会出现做出来之后,效果不好的情况。如上图:不可点按钮反而字更深了。

有时候还会出现不加a的时候折行、行高异常、颜色异常等等。

二、原因

只写a标签环绕文字标题的样式,没有写直接文字无链接的样式,就会造成这种情况。

三、解决办法

设计和前端架构是都要把:上一篇写没有了,不加a标签;下一篇写带a的标题 (如上图所示),然后注意,要让不可点的文字“没有了”颜色更浅(更不明显,让人看懂这个按钮不可用)。

代码如下:
<div class="prev_next">
    <div class="prev">上一篇:<span>没有了</span></div>
    <div class="prev">下一篇:<a href="#">abs塑料的主要特性</a></div>
</div>

通过定义.pre_next span{}来定义没有了三个字的样式。

(只是举例,实际应用中,可以根据情况进行架构)

永易搜建站用技术和实力说话
0371-56789390
公司地址

郑州市花园路东风路向西300路南弘熹台22层

联系我们