页面的head部分，需引入页面的样式文件，代码如下：
![[php框架] Smarty基础商品教程 Smarty入门教程 Smarty框架教程 共10课](https://jy.tp.yuanmeng.life/uploads/images/20210319/f47dc487eb949895833cd962fddc6a8b.jpg)
附件
<link type="text/css" rel="stylesheet" href="css/style.css">页面的body部分，在不同的div容器里放入不同的图片，代码如下：
<h1 class="heading">畅游世界</h1>
<div class="card-container">
<div class="card" style="--image: url('https://jy.tp.yuanmeng.life/jquery/31/3118/demo/images/berlin.jpg'); --angle: -5deg; --x: 5%; --y: 15%; --caption: '2009年，柏林'"></div>
<div class="card" style="--image: url('https://jy.tp.yuanmeng.life/jquery/31/3118/demo/images/london.jpg'); --angle: -1deg; --x: -10%; --y: -20%; --caption: '2001年，伦敦'"></div>
<div class="card" style="--image: url('https://jy.tp.yuanmeng.life/jquery/31/3118/demo/images/los-angeles.jpg'); --angle: -4deg; --x: -20%; --y: 5%; --caption: '2004年，洛杉矶'"></div>
<div class="card" style="--image: url('https://jy.tp.yuanmeng.life/jquery/31/3118/demo/images/italy.jpg'); --angle: 7deg; --x: 10%; --y: -7%; --caption: '1999年，威尼斯'"></div>
</div>*
回帖描述：*
链接类型：*
下载链接：
验证通过自动获取下载链接
*
描述：*
回帖描述：*
链接类型：*
阅读权限：*
下载链接：
微信客服
QQ客服
QQ群
