带时间轴的文章归档的html页面,WordPress纯CSS打造时间轴归档页面

新建一个page-archive.php模板，框架写好后添加下面的主要循环输出。

DIV

$previous_year = $year = 0;

$previous_month = $month = 0;

$ul_open = false;

$myposts = get_posts('numberposts=-1&orderby=post_date&order=DESC');

foreach($myposts as $post) :

setup_postdata($post);

$year = mysql2date('Y', $post->post_date);

$month = mysql2date('n', $post->post_date);

$day = mysql2date('j', $post->post_date);

if($year != $previous_year || $month != $previous_month) :

if($ul_open == true) :

echo '';

endif;

echo '

'; echo the_time('Y-m'); echo '

echo '

$ul_open = true;

endif;

$previous_year = $year; $previous_month = $month;

<?php the_time('Y-m-j'); ?>

CSS

.archive-title{border-bottom:1px #eee solid;position:relative;padding-bottom:4px;margin-bottom:10px}

.archives li a{padding:8px 0;display:block}

.archives li a:hover .atitle:after{background:#428bca}

.archives li a span{display:inline-block;width:100px;font-size:12px;text-indent:20px}

.archives li a .atitle{display:inline-block;padding:0 15px;position:relative}

.archives li a .atitle:after{position:absolute;left:-6px;background:#ccc;height:8px;width:8px;border-radius:6px;top:6px;content:""}

.archives li a .atitle:before{position:absolute;left:-4px;background:#fff;height:12px;width:12px;border-radius:6px;top:6px;content:""}

.archives{position:relative;padding:10px 0}

.archives:before{height:95%;width:4px;background:#e6e6e6;position:absolute;left:100px;content:"";top:30px}

.m-title{position:relative;margin:10px 0;cursor:pointer}

.m-title:hover:after{background:#ff5c43}

.m-title:before{position:absolute;left:94px;background:#fff;height:16px;width:16px;border-radius:8px;top:8px;content:""}

.m-title:after{position:absolute;left:96px;background:#ccc;height:12px;width:12px;border-radius:6px;top:10px;content:""}

带时间轴的文章归档的html页面,WordPress纯CSS打造时间轴归档页面相关推荐

Css打造伸缩时间轴样式的WordPress归档页面archive.php
archive.php文件又称文章归档页面.在WordPress中,文章归档页面是一个非常重要的页面,特别是当你的wordpress网站文章很多的时候,它将文章以年月日的分类方式对文章进行归类,可以 ...
纯CSS时间轴实现的办法，超简单的！
转自:http://oss.so/blog/21.html 在以往,如果要在网页上,实现时间轴效果,我们需要使用jQuery来实现.虽然jQuery十分的漂亮美观,但使用方法来说,太麻烦了.而我们现在 ...
html仿今日头条下拉刷新,小程序仿今日头条带滑动切换的文章列表
小程序仿今日头条带滑动切换的文章列表发布时间:2018-07-19 09:41, 浏览次数:353 拿别人仿今日头条的代码做的改版, 首先感谢前辈.其次,这个代码虽然能用,但是js里还是存在一些 ...
html css 水平时间轴,纯css+js水平时间轴
自定义,并自动加载时间节点当前时间节点居中,突出显示时间动态无痕添加效果图: 初始状态时间左走到一定2016.1月后 html: + - 对应 JS 设置处理: var left = docu ...
百度时间显示_文章的发布时间对百度优化网站重要吗
文章的发布时间对百度优化网站重要吗?这个问题,相信很多初做网站优化的萌新朋友都会问到,以小匠个人的经历来分享这个问题的经验,小匠认为,文章的发布时间对优化网站是非常重要的,下面小匠将从实际经历来给大家 ...
服务器自带的校时ip是多少钱,国内大概可用的NTP时间校准服务器IP地址
一直以来同步系统时间都是一个比较烦人的问题,管理过局域网的网管应该知道,每隔一段时间你就会发现下面很多电脑的系统时间都不一样了,特别近段时间很多网吧都中了一种能自动修改系统时间的病毒,因为现在绝大部分 ...
仅用css实现时间轴（动画版）
前言提到时间轴,相信大家都知道时间轴可以系统.完整的记录某一领域的发展足迹和详细事迹,依据时间顺序,把一方面或多方面的事件串联起来,形成相对完整的记录体系,再运用图文的形式呈现给用户.恰好最近刚做完 ...
百度搜索引擎的工作原理鏀惰棌鍒帮細时间：2015-07-10 文章来源：马海祥博客访问次数：4330 关于百度以及其它搜索引擎的工作原理，其实大家已经讨论过很多，但随着科技的进步、互联网
关于百度以及其它搜索引擎的工作原理,其实大家已经讨论过很多,但随着科技的进步.互联网业的发展,各家搜索引擎都发生着巨大的变化,并且这些变化都是飞快的,本文的目的,除了从百度官方的角度发出一些声音.纠正 ...
五轴数控转台_【科普】你真的足够了解五轴加工吗？看完豁然开朗！
近年来五轴联动数控加工中心在各领域得到了越来越广泛的应用.在实际应用中,每当人们碰见异形复杂零件高效.高质量加工难题时,五轴联动技术无疑是解决这类问题的重要手段.越来越多的厂家倾向于寻找五轴设备来满足 ...

带时间轴的文章归档的html页面,WordPress纯CSS打造时间轴归档页面

'; echo the_time('Y-m'); echo '

带时间轴的文章归档的html页面,WordPress纯CSS打造时间轴归档页面相关推荐

最新文章

热门文章