EmlogPro获取微语(笔记)
EmlogPro获取微语(笔记)
实现效果 完整代码 先在模板文件添加 <?php //获取微语 function twitter_all(){ $DB=MySql::getInstance(); $query=$DB->query("select * from ".DB_PREFIX."twitter order by id desc"); echo "<div class='twitter-box'>"; while($row = $DB->fetch_array($query)){ echo "<div class='twitter-item'> <div class='twitter-time'>".$row["content"]."</div> <div class='twitter-title'>-".date('y-n-j',$row["date"])."</div> </div>"; } echo "</div>"; } ?> 在你需要展示的地方调用 <?php twitter_all() ?> 样式 可忽略 .twitter-item { /* background: #E4EBF5; box-shadow: 1px 1px 2px #999da4, -1px -1px 2px #ffffff; */ padding: 5px; display: flex; justify-content: space-between; } .twitter-box { width: 70%; } .twitter-title { font-weight: 300; font-size: 13px; } .twitter-item .twitter-time::before { padding: 3px 6px; color: #fff; border-radius: 5px; margin: 0px 5px; font-size: 10px; } .twitter-item:nth-child(1) .twitter-time::before { background-color: #4cb4e7; content: "1"; } .twitter-item:nth-child(2) .twitter-time::before { background-color: #9bc272; content: "2"; } .twitter-item:nth-child(3) .twitter-time::before { background-color: #f6d6ff; content: "3"; } .twitter-item:nth-child(4) .twitter-time::before { background-color: #ffebcc; content: "4"; } .twitter-item:nth-child(5) .twitter-time::before { background-color: #aed3f4; content: "5"; } .twitter-item:nth-child(6) .twitter-time::before { background-color: #c0c0c0; content: "6"; } .twitter-time { font-weight: 300; word-break: break-all; font-size: 14px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; transition: 2s; width: 80%; margin: 0px 5px; border-bottom: 1px #d0cbcb dashed; } .twitter-timee { font-weight: 300; word-break: break-all; font-size: 14px; text-indent: 2em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 20; -webkit-box-orient: vertical; transition: 2s; min-height: 42px; } .jindu { height: 100px; width: 15px; background: #E4EBF5; border-radius: 5px; padding: 5px; margin: 10px; box-shadow: inset 1px 1px 2px #999da4, inset -1px -1px 2px #ffffff; display: flex; align-items: flex-end; } .jindu-box, .jindu-title-box { display: flex; justify-content: space-around; } .jindu-item { width: 10px } .jindu-color { background-color: red; opacity: 0.5; } .jindu:nth-child(2) .jindu-color { background-color: green; opacity: 0.5; } .jindu:nth-child(3) .jindu-color { background-color: blue; opacity: 0.5; } .jindu:nth-child(4) .jindu-color { background-color: orange; opacity: 0.5; } .jindu-title { font-size: 14px; font-weight: 300; } .sj-tj { display: flex; width: 30%; flex-direction: column; border-left: 0.1px #c7c7c7 solid; justify-content: center; } .all-box { display: flex; } .bj-box { margin: 10px 0px; } @media (max-width:576px) { .bj-box { margin: 10px 10px; } .twitter-box { width: 100%; } .sj-tj { display: none; } } @media (max-width:768px) { .bj-box { margin: 10px 10px; } .twitter-box { width: 100%; } .sj-tj { display: none; } }
 2022-5-27
     跳转到第 页,共 1 页

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

登录