根据参考图片弄出来的
实际效果不尽如意人意，可能是英文字体看起来会好，但是中文字体，看着整个画面相当拥挤，不太合适。
源码备份一下吧。
<?php
/**
* 这是为 Typecho 1.2.1 系统设计的一个主题。自带阅读数，点赞，推荐文章，首页顶部通知，广告等。
*
* @package Yunshn
* @author Gaobukai
* @version 1.0
* @link http://gaobukai.com
*/
if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<?php $this->need('header.php'); ?>
<?php $this->parameter->pageSize = 10; ?>
<div id="body" class="index">
<!--div style="background:url(<?php $this->options->themeUrl('img/pc.jpg'); ?>) 50% 100%;background-size:cover;padding-top:3rem;padding-bottom:3rem;">
<div class="container">
<h1 class="tit-content" style="max-width: 30rem;margin:4rem auto;"><img class="img-fluid" src="<?php echo $this->options->staticUrl.'/img/topbg.png'; ?>"></h1>
<?php $noticeclose = Typecho_Cookie::get('noticeclose'); (!($noticeclose) && $this->options->notice)? $this->options->notice() : ''; ?>
<ul class="list-unstyled row post-list post-list-4">
<li class="col-2 post-list-item px-10"></li>
<?php $this->widget('Digest_Post@digests', 'cid='.$this->options->digestid)->to($dpost); ?>
<?php while ($dpost->next()): ?>
<li class="col-4 post-list-item px-lg-20">
<div class="post-title extr">
<a href="<?php $dpost->permalink() ?>">
<span class="list-thumbnail">
<img class="thumbnail" src="<?php
if($dpost->fields->thumbnail){
$dpost->fields->thumbnail();
}else{
echo $this->options->staticUrl.'/img/post-default.jpg';
}
?>">
<img src="<?php echo $this->options->staticUrl.'/img/placeholder.png'; ?>">
</span>
</a>
</div>
</li>
<?php endwhile; ?>
<li class="col-2 post-list-item px-10"></li>
</ul>
</div>
</div-->
<div class="container">
<div class="row mt-3">
<div class="col-8" style="padding-left:8px;">
<div class="row " style="margin:-4px;" >
<div class="col-7" style="padding:4px;width:54%;">
<span class="list-thumbnail scale">
<div style="position:absolute;top:0;left:0;z-index:2;color:#fff;background:#f60;padding:.25rem .5rem;font-size:.875rem;">乾坤大挪移</div>
<img class="thumbnail" src="https://static.gaobukai.com/usr/uploads/2023/11/3976918394.png">
<img src="/usr/themes/yunshn/img/placeholder1-1.png">
<span style="display: flex;flex-direction: column;position:absolute;bottom:2rem;left:0;width:75%;padding:.75rem 1rem;background:rgba(0,0,0,.4);">
<h2 style="color:#fff;font-size:1.25rem;margin:0;line-height:1.5;">最近更乾坤大挪移乾坤大挪移</h2>
<span style="color:#ddd;font-size:.875rem;">2023-11-23</span>
</span>
</span>
</div>
<div class="col-5" style="width:46%;">
<div class="row mx-0">
<div class="col-12" style="padding:4px;">
<span class="list-thumbnail scale">
<div style="position:absolute;top:0;left:0;z-index:2;color:#fff;background:#60c;padding:.25rem .5rem;font-size:.75rem;">独孤九剑</div>
<img class="thumbnail" src="http://liuchou.com/usr/uploads/2023/11/3792865707.jpg">
<img src="/usr/themes/yunshn/img/placeholder3-2.png">
<span style="display: flex;flex-direction: column;position:absolute;bottom:0;left:0;right:0;padding:.5rem .75rem;background-image: linear-gradient(to top, rgba(0,0,0,.4), rgba(0,0,0,.2),rgba(0,0,0,.1), rgba(0,0,0,.01));">
<h2 style="color:#fff;font-size:1rem;margin:0;line-height:1.5;">最近更乾坤大挪移乾坤大挪移</h2>
<span style="color:#aaa;font-size:.75rem;">2023-11-23</span>
</span>
</span>
</div>
<div class="col-6" style="padding:4px;">
<span class="list-thumbnail scale">
<div style="position:absolute;top:0;left:0;z-index:2;color:#fff;background:#0c1;padding:.25rem .5rem;font-size:.75rem;">独孤九剑</div>
<img class="thumbnail" src="https://static.gaobukai.com/usr/uploads/2023/08/2793059818.jpg">
<img src="/usr/themes/yunshn/img/placeholder1-1.png">
<span style="display: flex;flex-direction: column;position:absolute;bottom:0;left:0;right:0;padding:1rem .5rem .5rem;background-image: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,.4),rgba(0,0,0,.2), rgba(0,0,0,.01));">
<h2 style="height:3rem;overflow:hidden;color:#fff;font-size:1rem;margin:0;line-height:1.5;">最近更坤大挪近更坤大挪近更坤大挪移</h2>
<span style="color:#aaa;font-size:.75rem;">2023-11-23</span>
</span>
</span>
</div>
<div class="col-6" style="padding:4px;">
<span class="list-thumbnail scale">
<div style="position:absolute;top:0;left:0;z-index:2;color:#fff;background:#09d;padding:.25rem .5rem;font-size:.75rem;">独孤九剑</div>
<img class="thumbnail" src="https://static.gaobukai.com/usr/uploads/2023/11/3976918394.png">
<img src="/usr/themes/yunshn/img/placeholder1-1.png">
<span style="display: flex;flex-direction: column;position:absolute;bottom:0;left:0;right:0;padding:1rem .5rem .5rem;background-image: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,.4),rgba(0,0,0,.2), rgba(0,0,0,.01));">
<h2 style="height:3rem;overflow:hidden;color:#fff;font-size:1rem;margin:0;line-height:1.5;">最近更近更坤大挪近更坤大挪乾坤大大挪移</h2>
<span style="color:#aaa;font-size:.75rem;">2023-11-23</span>
</span>
</span>
</div>
</div>
</div>
</div>
<h2 style="color:#333;font-size:1.125rem;font-weight:700;margin-top:1rem;">最近更新 Feed In Categories</h2>
<div style="margin-bottom:.5rem;font-weight:700;display:flex;justify-content:space-between;">
<button class="btn btn-primary" style="font-size:.875rem;background:#62f;color:#fff;font-weight:700;">光明顶<span style="margin-left:1rem;">22%</span></button><button
class="btn btn-primary" style="font-size:.875rem; background:#fff;color:#333;font-weight:700;">藏经阁<span style="margin-left:1rem;">785</span></button><button
class="btn btn-primary" style="font-size:.875rem;background:#fff;color:#333;font-weight:700;">乾坤大挪移<span style="margin-left:1rem;">22%</span></button><button
class="btn btn-primary" style="font-size:.875rem;background:#fff;color:#333;font-weight:700;">圣火令<span style="margin-left:1rem;">22%</span></button><button
class="btn btn-primary" style="font-size:.875rem;background:#fff;color:#333;font-weight:700;">独孤九剑<span style="margin-left:1rem;">22%</span></button><button
class="btn btn-primary" style="font-size:.875rem; background:#fff;color:#333;font-weight:700;">submit<span style="margin-left:1rem;">22%</span></button>
</div>
<div class="row " style="margin:-4px;" >
<div class="col-4" style="padding:4px;">
<span class="list-thumbnail scale">
<img class="thumbnail" src="https://static.gaobukai.com/usr/uploads/2023/11/3976918394.png">
<img src="/usr/themes/yunshn/img/placeholder2-1.png">
</span>
<div style="background:#fff;padding:.5rem 1rem;">
<h2 style="color:#333;font-size:1rem;font-weight:700;margin-bottom:0;">杂交水稻之父袁隆平去世</h2>
<div style="color:#ccc;font-size:.75rem;padding:.25rem 0;">
<span><svg class="icon" aria-hidden="true"><use xlink:href="#iconclock"></use></svg><time datetime="2023-11-23T00:06:48+08:00">11月23日</time></span>
<span><svg class="icon" aria-hidden="true"><use xlink:href="#iconeye"></use></svg>38</span>
<span><svg class="icon" aria-hidden="true"><use xlink:href="#iconlike"></use></svg>1</span>
</div>
<div style="color:#999;font-size:.75rem;">“共和国究中心主任、湖南省政协原副主席袁隆平，因多器官功</div>
</div>
</div>
<div class="col-4" style="padding:4px;">
<span class="list-thumbnail scale">
<img class="thumbnail" src="https://static.gaobukai.com/usr/uploads/2022/08/3534709912.jpg">
<img src="/usr/themes/yunshn/img/placeholder2-1.png">
</span>
<div style="background:#fff;padding:.5rem 1rem;">
<h2 style="color:#333;font-size:1rem;font-weight:700;margin-bottom:0;">杂交水稻之父袁隆平去世</h2>
<div style="color:#ccc;font-size:.75rem;padding:.25rem 0;">
<span><svg class="icon" aria-hidden="true"><use xlink:href="#iconclock"></use></svg><time datetime="2023-11-23T00:06:48+08:00">11月23日</time></span>
<span><svg class="icon" aria-hidden="true"><use xlink:href="#iconeye"></use></svg>38</span>
<span><svg class="icon" aria-hidden="true"><use xlink:href="#iconlike"></use></svg>1</span>
</div>
<div style="color:#999;font-size:.75rem;">“共和国究中心主任、湖南省政协原副主席袁隆平，因多器官功</div>
</div>
</div>
<div class="col-4" style="padding:4px;">
<span class="list-thumbnail scale">
<img class="thumbnail" src="https://static.gaobukai.com/usr/uploads/2021/05/463026887.jpg">
<img src="/usr/themes/yunshn/img/placeholder2-1.png">
</span>
<div style="background:#fff;padding:.5rem 1rem;">
<h2 style="color:#333;font-size:1rem;font-weight:700;margin-bottom:0;">杂交水稻之父袁隆平去世</h2>
<div style="color:#ccc;font-size:.75rem;padding:.25rem 0;">
<span><svg class="icon" aria-hidden="true"><use xlink:href="#iconclock"></use></svg><time datetime="2023-11-23T00:06:48+08:00">11月23日</time></span>
<span><svg class="icon" aria-hidden="true"><use xlink:href="#iconeye"></use></svg>38</span>
<span><svg class="icon" aria-hidden="true"><use xlink:href="#iconlike"></use></svg>1</span>
</div>
<div style="color:#999;font-size:.75rem;">“共和国究中心主任、湖南省政协原副主席袁隆平，因多器官功</div>
</div>
</div>
</div>
</div>
<div class="col-4" style="padding-left:16px;padding-right:8px;">
<div>
<span class="list-thumbnail scale">
<img class="thumbnail" src="https://static.gaobukai.com/usr/uploads/2023/11/3976918394.png">
<img src="/usr/themes/yunshn/img/placeholder16-9.png">
</span>
<div style="background:#fff;padding:.5rem 1rem;">
<h2 style="color:#333;font-size:1rem;font-weight:700;margin-bottom:.25rem;display:flex;justify-content:space-between;align-items:center;">杂交水稻之父袁隆平去世<span style="font-size:.75rem;color:#ccc;font-weight:400;">2020-11-23</span></h2>
<div style="color:#999;font-size:.75rem;">共和国究中心主任、湖南省政协原副主“共和国究中心主任、湖南省政协原副主“共和国究中心主任、湖南省政协原副主席袁隆平，因多器官功</div>
</div>
</div>
<h2 style="color:#333;font-size:1rem;font-weight:700;margin-bottom:0;padding:1rem 0 .5rem;">杂交水稻之父袁隆平去世</h2>
<div class="row mx-0" style="margin-bottom:.5rem;">
<div class="col-3">
<span class="list-thumbnail">
<img class="thumbnail" src="https://static.gaobukai.com/usr/uploads/2023/09/3078327081.png">
<img src="/usr/themes/yunshn/img/placeholder1-1.png">
</span>
</div>
<div class="col-9" style="background:#fff;padding:.25rem 1rem;">
<h2 style="color:#333;font-size:1rem;font-weight:700;margin-bottom:0;">杂交水稻之父袁隆平去世</h2>
<div style="color:#ccc;font-size:.75rem;padding:.25rem 0;">
<span><svg class="icon" aria-hidden="true"><use xlink:href="#iconclock"></use></svg><time datetime="2023-11-23T00:06:48+08:00">11月23日</time></span>
<span><svg class="icon" aria-hidden="true"><use xlink:href="#iconeye"></use></svg>38</span>
<span><svg class="icon" aria-hidden="true"><use xlink:href="#iconlike"></use></svg>1</span>
</div>
<div style="color:#999;font-size:.75rem;">“共和国究中心主任、湖南省政协原副主席袁隆平，因多器官功</div>
</div>
</div>
<div class="row mx-0" style="margin-bottom:.5rem;">
<div class="col-3">
<span class="list-thumbnail">
<img class="thumbnail" src="https://static.gaobukai.com/usr/uploads/2023/08/2793059818.jpg">
<img src="/usr/themes/yunshn/img/placeholder1-1.png">
</span>
</div>
<div class="col-9" style="background:#fff;padding:.25rem 1rem;">
<h2 style="color:#333;font-size:1rem;font-weight:700;margin-bottom:0;">杂交水稻之父袁隆平去世</h2>
<div style="color:#ccc;font-size:.75rem;padding:.25rem 0;">
<span><svg class="icon" aria-hidden="true"><use xlink:href="#iconclock"></use></svg><time datetime="2023-11-23T00:06:48+08:00">11月23日</time></span>
<span><svg class="icon" aria-hidden="true"><use xlink:href="#iconeye"></use></svg>38</span>
<span><svg class="icon" aria-hidden="true"><use xlink:href="#iconlike"></use></svg>1</span>
</div>
<div style="color:#999;font-size:.75rem;">“共和国究中心主任、湖南省政协原副主席袁隆平，因多器官功</div>
</div>
</div>
<div class="row mx-0" style="margin-bottom:.5rem;">
<div class="col-3">
<span class="list-thumbnail">
<img class="thumbnail" src="https://static.9nxy.com/usr/uploads/2021/05/701844924.jpg">
<img src="/usr/themes/yunshn/img/placeholder1-1.png">
</span>
</div>
<div class="col-9" style="background:#fff;padding:.25rem 1rem;">
<h2 style="color:#333;font-size:1rem;font-weight:700;margin-bottom:0;">杂交水稻之父袁隆平去世</h2>
<div style="color:#ccc;font-size:.75rem;padding:.25rem 0;">
<span><svg class="icon" aria-hidden="true"><use xlink:href="#iconclock"></use></svg><time datetime="2023-11-23T00:06:48+08:00">11月23日</time></span>
<span><svg class="icon" aria-hidden="true"><use xlink:href="#iconeye"></use></svg>38</span>
<span><svg class="icon" aria-hidden="true"><use xlink:href="#iconlike"></use></svg>1</span>
</div>
<div style="color:#999;font-size:.75rem;">“共和国究中心主任、湖南省政协原副主席袁隆平，因多器官功</div>
</div>
</div>
<div class="row mx-0" style="margin-bottom:.5rem;">
<div class="col-3">
<span class="list-thumbnail">
<img class="thumbnail" src="https://static.9nxy.com/usr/uploads/2021/05/701844924.jpg">
<img src="/usr/themes/yunshn/img/placeholder1-1.png">
</span>
</div>
<div class="col-9" style="background:#fff;padding:.25rem 1rem;">
<h2 style="color:#333;font-size:1rem;font-weight:700;margin-bottom:0;">杂交水稻之父袁隆平去世</h2>
<div style="color:#ccc;font-size:.75rem;padding:.25rem 0;">
<span><svg class="icon" aria-hidden="true"><use xlink:href="#iconclock"></use></svg><time datetime="2023-11-23T00:06:48+08:00">11月23日</time></span>
<span><svg class="icon" aria-hidden="true"><use xlink:href="#iconeye"></use></svg>38</span>
<span><svg class="icon" aria-hidden="true"><use xlink:href="#iconlike"></use></svg>1</span>
</div>
<div style="color:#999;font-size:.75rem;">“共和国究中心主任、湖南省政协原副主席袁隆平，因多器官功</div>
</div>
</div>
</div>
</div><!-- end .container -->
</div><!-- end #body -->
<?php $this->need('footer.php'); ?>
最后修订于 2023-12-18 15:13:50
- 上一篇 调用子分类及子分类的内容
- 下一篇 返回顶部及顶部导航jquery部分代码
