归档样式2

来自于主题Xone

CSS样式

/*归档timeline*/
.timeline-page{position: relative; padding: 4% 10%;}
.timeline{position: relative; padding-left:112px; padding-bottom: 8px;}
.timeline:before{display: block; content: ""; position: absolute; left: -13px; height: 140%; width: 4px; background: #f4f6f7;}
.timeline:last-child:before{height: 100%;}
.timeline .year{display:block; font-size: 28px; position: relative; left: -169px; width: 86px; line-height: 78px; margin-top:20px; z-index: 120; text-align: center; color:#fff; background: #345; border-radius: 50%; border:4px solid #345;}
.timeline .event{display: block; list-style: none; position: relative; padding: 10px 32px; margin-bottom: 3em; background: #fff; border: 3px solid #edf1f3; border-radius: 6px;}
.timeline .event:before{right: 100%; top: 50%; border: solid transparent; content:""; height: 0; position: absolute; pointer-events: none;}
.timeline .event:before{border-right-color: #edf1f3; border-width: 15px; margin-top: -15px;}
.timeline .event .month{position: absolute; top: 45%; margin-top: -24px; left: -160px; width: 68px; line-height: 58px; text-align: center; background-color: #fff; display: block; z-index: 120; color: #b7c6c9; border-radius: 50%; border: 5px solid #f4f6f7; font-weight: 500; font-size: 14px; letter-spacing: 1px;}
.timeline li{margin: 14px 0; width: 100%; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;}
.timeline li span{display: inline-block; height: 20px; width: 40px; line-height: 20px; text-align: center; color: #fff; background: #7e7f80; border-radius: 5px; margin-right: 8px;}

<div class="timeline-page">
<!-- 修改以后的命令 -->
    <?php $this->widget('Widget_Contents_Post_Recent', 'pageSize=10000')->to($archives);
        $year=0; $mon=0; $i=0; $j=0;
        // $output = '<div id="archives">';
        while($archives->next()):
            $year_tmp = date('Y',$archives->created);
            $mon_tmp = date('m',$archives->created);
            $y=$year; $m=$mon;
            if ($mon != $mon_tmp && $mon > 0) $output .= '</ul>';
            if ($year != $year_tmp && $year > 0) $output .= '</div>';
            if ($year != $year_tmp) {
                $year = $year_tmp;
                $output .= '<div class="timeline"><span class="year">'. $year .'</span>'; //输出年份
            }
            if ($mon != $mon_tmp) {
                $mon = $mon_tmp;
                $output .= '<ul class="event"><span class="month">'. $mon .'月</span>'; //输出月份
            }
            $output .= '<li><span class="date">'.date('d日 ',$archives->created).'</span><a href="'.$archives->permalink .'">'. $archives->title .'</a></li>'; //输出文章日期和标题   
        endwhile;
        //$output .= '</ul></li></ul>';
        echo $output;
    ?>
<!-- 修改以后的命令 -->
</div>