SemanticUI学习（7）列表
一、引入资源文件
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css"/>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
二、普通列表
<div class="ui list">
<div class="item">list</div>
<div class="item">list</div>
<div class="item">list</div>
<div class="item">list</div>
</div>
三、图标列表
<div class="ui list">
<div class="item">
<i class="users icon"></i>
SemanticUI
</div>
<div class="item">
<i class="marker icon"></i>
China
</div>
<div class="item">
<i class="mail icon"></i>
zhiyuandnc666@gmail.com
</div>
<div class="item">
<i class="linkify icon"></i>
www.semeantic.com
</div>
</div>
四、好友列表样式
<div class="ui relaxed divided list">
<div class="item">
<i class="big github middle aligned icon"></i>
<div class="content">
<a href="#" class="header">Semantic-UI</a>
<div class="description">Update 10 mins ago</div>
</div>
</div>
<div class="item">
<i class="big github middle aligned icon"></i>
<div class="content">
<a href="#" class="header">Bootstrap</a>
<div class="description">Update 22 days ago</div>
</div>
</div>
<div class="item">
<i class="big github middle aligned icon"></i>
<div class="content">
<a href="#" class="header">Element-UI</a>
<div class="description">Update 22 hours ago</div>
</div>
</div>
<div class="item">
<i class="big github middle aligned icon"></i>
<div class="content">
<a href="#" class="header">Vue</a>
<div class="description">Update 22 days ago</div>
</div>
</div>
<div class="item">
<i class="big github middle aligned icon"></i>
<div class="content">
<a href="#" class="header">NodeJS</a>
<div class="description">Update 22 days ago</div>
</div>
</div>
</div>
五、水平列表
<div class="ui horizontal list">
<div class="item">
<img src="./img/tx.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">ZhiYuanCaiJi</div>
</div>
</div>
<div class="item">
<img src="./img/tx.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">ZhiYuanCaiJi</div>
</div>
</div>
<div class="item">
<img src="./img/tx.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">ZhiYuanCaiJi</div>
</div>
</div>
<div class="item">
<img src="./img/tx.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">ZhiYuanCaiJi</div>
</div>
</div>
<div class="item">
<img src="./img/tx.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">ZhiYuanCaiJi</div>
</div>
</div>
</div>
六、垂直列表
<div class="ui vertical list">
<div class="item">
<img src="./img/tx.jpg" alt="" class="ui avatar image">
<div class="ui content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/tx.jpg" alt="" class="ui avatar image">
<div class="ui content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/tx.jpg" alt="" class="ui avatar image">
<div class="ui content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/tx.jpg" alt="" class="ui avatar image">
<div class="ui content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/tx.jpg" alt="" class="ui avatar image">
<div class="ui content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
</div>
七、动画效果列表
<div class="ui middle aligned animated list">
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
</div>
八、垂直松散列表
<div class="ui relaxed divided list">
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
</div>
九、水平松散列表
<div class="ui horizontal relaxed list">
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
</div>
十、垂直单元格形式列表
<div class="ui celled vertical list">
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
</div>
十一、水平单元格形式列表
<div class="ui horizontal celled list">
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
</div>
十二、不同尺寸的列表
<div class="ui horizontal mini list">
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
</div>
<div class="ui divider"></div>
<div class="ui horizontal tiny list">
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
</div>
<div class="ui divider"></div>
<div class="ui horizontal medium list">
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
</div>
<div class="ui divider"></div>
<div class="ui horizontal large list">
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
</div>
<div class="ui divider"></div>
<div class="ui horizontal big list">
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
</div>
<div class="ui divider"></div>
<div class="ui horizontal huge list">
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
</div>
<div class="ui divider"></div>
<div class="ui horizontal massive list">
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
<div class="item">
<img src="./img/daniel.jpg" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">zhiyuan</div>
</div>
</div>
</div>
十三、好友列表
<div class="ui vertical relaxed middle aligned divided list">
<div class="item">
<img src="https://v1.alapi.cn/api/avatar?email=zhiyuandnc666@gmail.com&size=100" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">无他，唯手熟尔</div>
</div>
<div class="right floated content">
<div class="ui orange basic button">
<i class="user plus icon"></i>添加好友
</div>
</div>
</div>
<div class="item">
<img src="https://v1.alapi.cn/api/avatar?email=zhiyuandnc666@gmail.com&size=100" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">无他，唯手熟尔</div>
</div>
<div class="right floated content">
<div class="ui orange basic button">
<i class="user plus icon"></i>添加好友
</div>
</div>
</div>
<div class="item">
<img src="https://v1.alapi.cn/api/avatar?email=zhiyuandnc666@gmail.com&size=100" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">无他，唯手熟尔</div>
</div>
<div class="right floated content">
<div class="ui orange basic button">
<i class="user plus icon"></i>添加好友
</div>
</div>
</div>
<div class="item">
<img src="https://v1.alapi.cn/api/avatar?email=zhiyuandnc666@gmail.com&size=100" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">无他，唯手熟尔</div>
</div>
<div class="right floated content">
<div class="ui orange basic button">
<i class="user plus icon"></i>添加好友
</div>
</div>
</div>
<div class="item">
<img src="https://v1.alapi.cn/api/avatar?email=zhiyuandnc666@gmail.com&size=100" alt="" class="ui avatar image">
<div class="content">
<div class="header">絷缘</div>
<div class="description">无他，唯手熟尔</div>
</div>
<div class="right floated content">
<div class="ui orange basic button">
<i class="user plus icon"></i>添加好友
</div>
</div>
</div>
</div>
十四、实际效果
原文作者：絷缘
作者邮箱：zhiyuanworkemail@163.com
原文地址：https://zhiyuandnc.github.io/eycw6BwYh/
版权声明：本文为博主原创文章，转载请注明原文链接作者信息