文章归档之时光轴样式风格 – 爱CSS - 每多学一点知识就少写一行代码

关闭边栏(ESC)打开边栏(ESC)

已修正：居中、鼠标经过卡片时图像会变大、日期标改为长方形

如本站底部的时光轴，是一个归档的模板，修改为一直追求的时光轴风格，可显示文章卡片样式，自己也可以修改要显示什么样式，比如只显示图片呀等等。这个模板我是直接更改主题目录page>page-list.php。其实你完全可以新建一个模板来保存以下代码就行。然后在页面中引用这个模板就可以：

  <?php 
/**
 * Template Name: 时光轴
 */
get_header();?>
<style>
	/*	外框样式*/
	.archives {
		position:relative;
		padding: 60px 0;
		min-height: calc(100vh - 220px);
		width: 750px;
		left:calc(50% - 375px);
		text-align: center
	}
	.archives .diy-logo img{
		position: absolute;
		width: 64px;
		height: 64px;
		top:0px;
		left:343px;
	}
	.archives ul{margin: 0;padding: 0}
	.archives .diy-logo:hover {cursor: pointer}
	.archives>ul>li{
		list-style-type: none;
		position: relative;
		width: 100%;
	}
	.archives li a {
		padding: 8px 0;
		display: inline-block;
		color:#666;
	}
/*	标题前小圆点在鼠标经过时的样式*/
	.archives li a:hover .sp3{
		background: #ff5c43;
	}
/*	日期样式*/
	.archives li a .rq {
		position: absolute;
		left:275px;
		width: 100px;
		font-size: 14px;	
	}
/*	标题*/
	.archives li a .atitle {
		position: absolute;
		left:388px;
		text-align: left;
	}
	/*	标题前的外围小点*/
	.archives li a .sp4 {
		position: absolute;
		left: 367px;
		background: #ccc;
		height: 16px;
		width: 16px;
		border-radius: 50%;
		top: 10px;
		transition: all .3s
	}	
/*	标题前的小点内围*/
	.archives li a .sp3{
		position: absolute;
		left: 370px;
		background: #fff;
		height: 10px;
		width: 10px;
		border-radius: 50%;
		top: 13px;
		z-index: 1;
		transition: all .3s
	}
/*	时间中间线*/
	.archives:before {
		height: 100%;
		width: 4px;
		background: #ccc;
		position: absolute;
		left: 373px;
		content: "";
		top: 0
	}
/*	左边月份标题*/
	.m-title {
		position: relative;
		width:140px;
		top:10px;
		left:305px;
		cursor: pointer;
		color:#ccc;
		font-size: 18px;
		border: 4px solid #ccc;
		padding: 3px 0;
		background: #fff;
		border-radius: 20px;
		transition: all .5s
	}
/*	鼠标经过大圆点样式*/
	.m-title:hover{
		background: #ff5c43!important;
	}
	.diy-card{
		width:320px;
		position: relative;
		left:402px;
		top:16px;
		text-align: left;
		box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
		transition: all .3s;
		z-index: 99
		}
	.diy-card:hover .post-img img{transform: scale(2);}
	.diy-card .post .post-title {display: none;margin:-4px 0 -12px;}
	.diy-card .post-style-card .post-top-meta {display: none;margin-bottom: 10px;}
	.diy-card .post-style-card .post-time {margin-top:10px}
	.diy-card .post-style-card .post-img{margin:-10px -10px 0;overflow: hidden;padding: 0}
	.diy-card .post-style-card .post-img img{transition: all .5s ease-out}
	.diy-card .post-style-card .post-bottom {padding-top:0}
	.diy-card .post-style-card .post-meta-author {margin-bottom: 0}
	.diy-card .post-style-card .post-meta-author a span {width: auto}
	body {background: linear-gradient(90deg,rgba(255,165,150,0.3) 10%,rgba(0,228,255,0.35)) no-repeat}
	.bg{position:fixed;top:0;left:0;right:0;bottom:0;z-index:-2}
	@media(max-width:768px){.diy-card{display: none}body{background: #fff}}
	@media(min-width:769px){
	.archives li:nth-child(2n) .diy-card{left:28px;}
	.archives li:nth-child(2n) .rq{left:376px;}
	.archives li:nth-child(2n) .atitle{
		left:28px;
		text-align: right;
		width: 335px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		padding: 0;
		}
	}
</style>
	<div class="container">
	<div class="bg">
	<div id="birds-canvas-holder"></div>
	</div>
	<div class="archives">
	<div class="diy-logo"><img src="<?php echo cs_get_option('i_favicon_url');?>" alt="点击可展开或收缩"></div>
		<?php
		$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 '</ul>';
			endif;
			echo '<h4 class="m-title">';
			echo the_time( 'Y-m' );
			echo '</h4>';
			echo '<ul class="archives-monthlisting">';
			$ul_open = true;
			endif;
			$previous_year = $year;
			$previous_month = $month;
		?>
		<li style="min-height: 40px;">
			<a href="<?php the_permalink(); ?>"><span class="rq"><?php the_time('Y-m-j'); ?></span>
    			<div class="atitle"><?php the_title(); ?></div><span class="sp3"></span><span class="sp4"></span></a>
    			<div class="diy-card">
                        <?php get_template_part('template-parts/post/content-card'); ?>
                </div>
		</li>
		<?php endforeach; ?>
		</ul>
	</div>
</div>
    <?php get_sidebar(); ?>
    <?php get_footer(); ?>
<script src="https://icss.me/myweb/index/three.min.js"></script> 
<script src="https://icss.me/myweb/index/CanvasRenderer.js"></script>
<script src="https://icss.me/myweb/index/Projector.js"></script> 
<script src="https://icss.me/myweb/index/TweenMax.min.js"></script> 
<script src="https://icss.me/myweb/index/main-0a79fb13e7.min.js"></script>
<script>
	$('.archives ul.archives-monthlisting' ).hide();
	$('.archives ul.archives-monthlisting:first' ).show();
	$('.archives .m-title:first').css('background','#ff5c43');
	$('.archives .m-title' ).click( function () {
		$('.archives .m-title' ).css('background','#fff');
		$(this).next().slideToggle( 'fast' );
		$(this).css('background','#ff5c43');
		return false;
	} );

	$( '.archives .diy-logo' ) . on( 'click', function ( e ) {
			e . preventDefault();
			if ( $( this ) . data( 's' ) ) {
				$( this ) . data( 's', '' );
				$('.archives ul.archives-monthlisting').show();
			} else {
				$( this ) . data( 's', 1 );
				$('.archives ul.archives-monthlisting').hide();
			}
		} );
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

<?php

/**

* Template Name: 时光轴

get_header();?>

<style>

/* 外框样式*/

.archives {

position:relative;

padding: 60px 0;

min-height: calc(100vh - 220px);

width: 750px;

left:calc(50% - 375px);

text-align: center

}

.archives .diy-logo img{

position: absolute;

width: 64px;

height: 64px;

top:0px;

left:343px;

}

.archives ul{margin: 0;padding: 0}

.archives .diy-logo:hover {cursor: pointer}

.archives>ul>li{

list-style-type: none;

position: relative;

width: 100%;

}

.archives li a {

padding: 8px 0;

display: inline-block;

color:#666;

}

/* 标题前小圆点在鼠标经过时的样式*/

.archives li a:hover .sp3{

background: #ff5c43;

}

/* 日期样式*/

.archives li a .rq {

position: absolute;

left:275px;

width: 100px;

font-size: 14px;

}

/* 标题*/

.archives li a .atitle {

position: absolute;

left:388px;

text-align: left;

}

/* 标题前的外围小点*/

.archives li a .sp4 {

position: absolute;

left: 367px;

background: #ccc;

height: 16px;

width: 16px;

border-radius: 50%;

top: 10px;

transition: all .3s

}

/* 标题前的小点内围*/

.archives li a .sp3{

position: absolute;

left: 370px;

background: #fff;

height: 10px;

width: 10px;

border-radius: 50%;

top: 13px;

z-index: 1;

transition: all .3s

}

/* 时间中间线*/

.archives:before {

height: 100%;

width: 4px;

background: #ccc;

position: absolute;

left: 373px;

content: "";

top: 0

}

/* 左边月份标题*/

.m-title {

position: relative;

width:140px;

top:10px;

left:305px;

cursor: pointer;

color:#ccc;

font-size: 18px;

border: 4px solid #ccc;

padding: 3px 0;

background: #fff;

border-radius: 20px;

transition: all .5s

}

/* 鼠标经过大圆点样式*/

.m-title:hover{

background: #ff5c43!important;

}

.diy-card{

width:320px;

position: relative;

left:402px;

top:16px;

text-align: left;

box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.3);

transition: all .3s;

z-index: 99

}

.diy-card:hover .post-img img{transform: scale(2);}

.diy-card .post .post-title {display: none;margin:-4px 0 -12px;}

.diy-card .post-style-card .post-top-meta {display: none;margin-bottom: 10px;}

.diy-card .post-style-card .post-time {margin-top:10px}

.diy-card .post-style-card .post-img{margin:-10px -10px 0;overflow: hidden;padding: 0}

.diy-card .post-style-card .post-img img{transition: all .5s ease-out}

.diy-card .post-style-card .post-bottom {padding-top:0}

.diy-card .post-style-card .post-meta-author {margin-bottom: 0}

.diy-card .post-style-card .post-meta-author a span {width: auto}

body {background: linear-gradient(90deg,rgba(255,165,150,0.3) 10%,rgba(0,228,255,0.35)) no-repeat}

.bg{position:fixed;top:0;left:0;right:0;bottom:0;z-index:-2}

@media(max-width:768px){.diy-card{display: none}body{background: #fff}}

@media(min-width:769px){

.archives li:nth-child(2n) .diy-card{left:28px;}

.archives li:nth-child(2n) .rq{left:376px;}

.archives li:nth-child(2n) .atitle{

left:28px;

text-align: right;

width: 335px;

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

padding: 0;

}

</style>

</div>

<div class="diy-logo"><img src="<?php echo cs_get_option('i_favicon_url');?>" alt="点击可展开或收缩"></div>

<?php

$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 '</ul>';

endif;

echo '<h4 class="m-title">';

echo the_time( 'Y-m' );

echo '</h4>';

echo '<ul class="archives-monthlisting">';

$ul_open = true;

endif;

$previous_year = $year;

$previous_month = $month;

<?php get_template_part('template-parts/post/content-card'); ?>

</div>

</li>

<?php endforeach; ?>

</ul>

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

$('.archives ul.archives-monthlisting' ).hide();

$('.archives ul.archives-monthlisting:first' ).show();

$('.archives .m-title:first').css('background','#ff5c43');

$('.archives .m-title' ).click( function () {

$('.archives .m-title' ).css('background','#fff');

$(this).next().slideToggle( 'fast' );

$(this).css('background','#ff5c43');

return false;

} );

$( '.archives .diy-logo' ) . on( 'click', function ( e ) {

e . preventDefault();

if ( $( this ) . data( 's' ) ) {

$( this ) . data( 's', '' );

$('.archives ul.archives-monthlisting').show();

} else {

$( this ) . data( 's', 1 );

$('.archives ul.archives-monthlisting').hide();

}

} );

</script>

注：样式与动作都在面里了，可根据自己的需求作相应的更改。这个例子中的背景本人是用了一个JS的效果，飞鸟

评论：7条

评论加载中...

xmin
博主。为什么启用以后查询不到文章呢

柬埔寨 2018-03-21 04:43 回复
- icss
  回复xmin的评论
  
  代码里有一处用引用一个模板，你的主题有这个模板吗：
  
  < ?php get_template_part('template-parts/post/content-card'); ?>
  
  没的话要自己建一个来显示内容呀
  
  广东省佛山市山紫市场3楼网业网吧 2018-03-21 09:40 回复
阿乞
这个功能如今作了优化，使得在小屏中能有好的视觉，可以参考时光轴页面

广东省佛山市山紫市场3楼网业网吧 2017-02-06 06:37 回复
Robin
您好，看到您做的这个时光轴归档页面很喜欢。但是因为是代码小白，按照你说的方法尝试做了几次也没做成功。您能讲下具体步骤吗？

广东省深圳市联通 2017-01-19 05:50 回复
- 阿乞
  回复Robin的评论
  
  你把代码复制到那所说的文件里，再新建一个页面，选择这个模板就行
  
  广东省佛山市电信 2017-01-19 12:04 回复
阿乞
时光轴效果还可以，暂时还没加入AJAX，有升级的可以分享出来

广东省佛山市山紫市场3楼网业网吧 2017-01-17 03:57 回复
- 阿乞
  回复阿乞的评论
  
  今晚更改了评论样式
  
  广东省佛山市电信 2017-01-17 15:22 回复

目录

已修正：居中、鼠标经过卡片时图像会变大、日期标改为长方形

注：样式与动作都在面里了，可根据自己的需求作相应的更改。这个例子中的背景本人是用了一个JS的效果，飞鸟

CSS动画中的线条过渡动画

文章按日期归档有伸缩效果

总结近来在DIY过程中的一些小小法子

自适应网页设计

弹出式近期评论框

css扩大点击的有效范围

white-space word-break word-wrap的区别

三列并排自适应的设计与元素错位的处理

发表评论取消回复

SQL Server 常用近百条SQL语句（收藏版）

SQL高效查询两个表不同的数据

五岁生日 | 这一年跟表姐一块庆祝生日，可心的一天了

跨域 | 百度联想词二种方式来实现

$.ajax({})方法success，error，complete，beforeSend

【童心致敬•礼赞祖国】红红中国心浓浓爱国情

目 录

已修正：居中、鼠标经过卡片时图像会变大、日期标改为长方形

注：样式与动作都在面里了，可根据自己的需求作相应的更改。这个例子中的背景本人是用了一个JS的效果，飞鸟

CSS动画中的线条过渡动画

文章按日期归档 有伸缩效果

发表评论 取消回复

目录

文章按日期归档有伸缩效果

发表评论取消回复