用户登录

Item 是 Semantic UI 里的项目视图 .. 一个项目视图有点像是一个大块内容的列表 .. 每个项目可以有图片,标题,描述的信息,内容的摘要等等 ..

项目视图需要一个大的容器 ... 用一个 div 标签,上面加上 ui .. 还有 items 这两个类,注意这是一个复数的形式 ..

在它的里面可以是不同的项目 .. 每个项目需要放在一个带 item 类的容器里 .. div.item .. 这个项目可以包含图片 ... 先给这个图片添加一个额外的包装.. 上面要加上 image 这个类 .. div.image .. 添加一张图片 .. (#保存)

项目的内容放在一个单独的容器里 .. 上面需要一个 content .. div.content .. 在这个容器里,你可以添加项目的标题,描述,摘要等等 .. 先添加一个标题 .. 用一个标题标签 .. 上面加上 header ..

再给这个项目添加点描述类型的信息 .. 用一个 div 标签,上面加上 meta 这个类 .. 比如添加一个日期 .. 先用一个 span 标签 .. 里面是日期或者时间内容 ... 1 小时之前 ..

项目的摘要内容可以放在一个带 description 类的容器里 .. 里面添加一个段落的文字 ...

这个项目还可以包含一些额外的内容,这些内容放在一个单独的容器里 .. 上面加上 extra .. div.extra ..

里面添加一个喜欢的小图标 .. 再复制一下这个项目 ... 选中它 .. command + shift + D ..

保存 ..

在浏览器上你看到的就是一个基本的项目视图 .. 这个项目视图是一个响应式的设计 .. 在小尺寸的设备上 .. 项目里的图片会跟项目内容堆叠在一起显示 ..

项目视图《 Semantic UI 视图 》

统计

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

社会化网络

关于

微信订阅号

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