Semantic UI 之 条目 item
程序员文章站
2022-07-06 13:39:02
网页代码在网页中添加两个条目，结构如下所示：具体代码： Item ...
网页代码
在网页中添加两个条目，结构如下所示：
具体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Item</title>
<link rel="stylesheet" href="semantic-ui/semantic/dist/semantic.min.css">
<script type="text/javascript" src="js/jquery3.3.1.js"></script>
<script type="text/javascript" src="semantic-ui/semantic/dist/semantic.min.js"></script>
</head>
<body>
<div class="ui container">
<div class="ui items">
<div class="item">
<div class="ui small image">
<img src="imgs/android.png" alt="">
</div>
<div class="content">
<h2 class="header">安卓</h2>
<div class="meta">
<span>1 小时之前</span>
</div>
<div class="description">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aspernatur earum ipsum iure, magnam, natus necessitatibus quia quod sequi soluta tempora velit voluptatum. Blanditiis debitis earum itaque modi officia officiis.</p>
</div>
<div class="extra">
<i class="like icon "></i>喜欢
</div>
</div>
</div>
</div>
<div class="ui items">
<div class="item">
<div class="ui small image">
<img src="imgs/android.png" alt="">
</div>
<div class="content">
<h2 class="header">安卓</h2>
<div class="meta">
<span>1 小时之前</span>
</div>
<div class="description">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aspernatur earum ipsum iure, magnam, natus necessitatibus quia quod sequi soluta tempora velit voluptatum. Blanditiis debitis earum itaque modi officia officiis.</p>
</div>
<div class="extra">
<i class="like icon "></i>喜欢
</div>
</div>
</div>
</div>
</div>
</body>
</html>
面面效果
当屏幕变窄时：
本文地址：https://blog.csdn.net/lianghecai52171314/article/details/107951764