卡片视图

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

Card,是 Semantic UI 里的图片视图 .. 就是一种用类似卡片的形式展示应用的内容 ..

一个卡片,可以先用一个 div 标签,再加上 ui 还有 card 这两个类 .. 在这个卡片里可以包含不同的内容 .. 比如这里我们先给它添加一张图片 .. 用一个 div 标签,加上 image 这个类 .. 再插入一张图片 .. (#保存)

卡片的具体内容放在一个带 content 类的容器里 .. div.content .. 再这个内容区块里,先添加一个标题 .. 再上面加上 header 这个类 .. 卡片内容的元数据,需要用一个 带 meta 类的容器 .. div.meta ... 在这个容器里可以添加一些描述类型的内容 ... 每个内容的周围可以使用一组 span 标签 .. (#保存)

在卡片的描述的容器上,需要一个 description 类 .. 添加一行文字 .. 这个卡片可以再包含一些额外的内容,一般这些内容会显示在卡片的底部 .. 在这个 content 容器的外面,再添加一个容器 .. 上面要加上 extra ... 还有 content ..

在这个额外信息的容器里,我们添加两个小图标 .. 一个让它浮动到左边显示 .. 另一个让它浮动到右边 ... 先用一个 span 标签 .. 上面加上 left floated .. 表示让它浮动到左边 ... 里面用一个喜欢的小图标 ..

再添加一个 span 标签 .. 让它浮动到右边 .. 所以需要一个 right.floated .. 再添加一个小图标 ..

现在这里显示的就是一个基本的卡片视图的样式 ..

卡片视图《 Semantic UI 视图 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点