文章目录
一、卡片式布局介绍
卡片布局,顾名思义就是利用一种类似于扑克牌的方式对网页进行设计,使得网页图文并茂。看起来更加直观。
优点:组件可以根据它们出现的屏幕大小响应性地调整其最大宽度,方便了响应式页面的开发
二、卡片组件的基本语法
基本引用如下:
<div class="ui card">
</div>
(1)确保引入了semantic-ui框架
(2)每一个组件的使用之前都要先声明框架
利用image,content,description组件对卡片进行填充
<div class="ui card">
<!--填充图片,可以是网上的,也可以是本地的-->
<div class="image">
<img src="static/images/2.jpeg">
</div>
<!--内容-->
<div class="content">
<a class="header">Kristy</a>
<div class="meta">
<span class="date">Joined in 2013</span>
</div>
<div class="description">
Kristy is an art director living in New York.
</div>
</div>
<!--额外内容-->
<div class="extra content">
<a>
<i class="user icon"></i><font _mstmutation="1">
22 Friends
</font></a>
</div>
</div>
这样,一个简单的卡片效果就有了
三、卡片组件的高阶用法
(1)可以动态变换的卡片
<div class="ui card">
<div class="ui slide masked reveal image">
<img src="static/images/5.jpeg" class="visible content">
<img src="static/images/4.jpeg" class="hidden content">
</div>
<div class="content">
<a class="header">Team Fu & Hess</a>
<div class="meta">
<span class="date">Created in Sep 2014</span>
</div>
</div>
<div class="extra content">
<a>
<i class="users icon"></i><font _mstmutation="1">
2 Members
</font></a>
</div>
</div>
(2)与jquery搭配使用形成渐变式效果
html部分:
<div class="ui special cards">
<div class="card">
<div class="blurring dimmable image">
<div class="ui dimmer">
<div class="content">
<div class="center">
<div class="ui inverted button">Add Friend</div>
</div>
</div>
</div>
<img src="/images/avatar/large/elliot.jpg">
</div>
<div class="content">
<a class="header">Team Fu</a>
<div class="meta">
<span class="date">Created in Sep 2014</span>
</div>
</div>
<div class="extra content">
<a>
<i class="users icon"></i>
2 Members
</a>
</div>
</div>
<div class="card">
<div class="blurring dimmable image">
<div class="ui inverted dimmer">
<div class="content">
<div class="center">
<div class="ui primary button">Add Friend</div>
</div>
</div>
</div>
<img src="/images/avatar/large/jenny.jpg">
</div>
<div class="content">
<a class="header">Team Hess</a>
<div class="meta">
<span class="date">Created in Aug 2014</span>
</div>
</div>
<div class="extra content">
<a>
<i class="users icon"></i>
2 Members
</a>
</div>
</div>
</div>
jquery部分:
$('.special.cards .image').dimmer({
on: 'hover'
});
(3)与button组件结合使用
<div class="ui cards">
<div class="card">
<div class="content">
<div class="header">Elliot Fu</div>
<div class="description">
Elliot Fu is a film-maker from New York.
</div>
</div>
<div class="ui bottom attached button">
<i class="add icon"></i>
Add Friend
</div>
</div>
<div class="card">
<div class="content">
<div class="header">Veronika Ossi</div>
<div class="description">
Veronika Ossi is a set designer living in New York who enjoys kittens, music, and partying.
</div>
</div>
<div class="ui bottom attached button">
<i class="add icon"></i>
Add Friend
</div>
</div>
<div class="card">
<div class="content">
<div class="header">Jenny Hess</div>
<div class="description">
Jenny is a student studying Media Management at the New School
</div>
</div>
<div class="ui bottom attached button">
<i class="add icon"></i>
Add Friend
</div>
</div>
</div>
(4)与堆叠布局形成响应式卡片
<div class="ui three stackable cards">
<div class="card">
<div class="image">
<img src="static/images/2.jpeg">
</div>
</div>
<div class="card">
<div class="image">
<img src="static/images/3.jpeg">
</div>
</div>
<div class="card">
<div class="image">
<img src="static/images/4.jpeg">
</div>
</div>
<div class="card">
<div class="image">
<img src="static/images/5.jpeg">
</div>
</div>
<div class="card">
<div class="image">
<img src="static/images/3.jpeg">
</div>
</div>
<div class="card">
<div class="image">
<img src="static/images/1.jpeg">
</div>
</div>
</div>
(5)双层型卡片布局
一组卡可以加倍其宽度移动
<div class="ui six doubling cards">
<div class="card">
<div class="image">
<img src="static/images/1.jpeg">
</div>
</div>
<div class="card">
<div class="image">
<img src="static/images/1.jpeg">
</div>
</div>
<div class="card">
<div class="image">
<img src="static/images/1.jpeg">
</div>
</div>
<div class="card">
<div class="image">
<img src="static/images/1.jpeg">
</div>
</div>
<div class="card">
<div class="image">
<img src="static/images/1.jpeg">
</div>
</div>
<div class="card">
<div class="image">
<img src="static/images/1.jpeg">
</div>
</div>
</div>
(6)文字样式卡片布局
<div class="ui raised card">
<div class="content">
<div class="header">Cute Dog</div>
<div class="meta">
<span class="category">Animals</span>
</div>
<div class="description">
<p>111111111111111111111111</p>
<p>111111111111111111111111</p>
</div>
</div>
<div class="extra content">
<div class="right floated author">
<img class="ui avatar image" src="static/images/1.jpeg"><font _mstmutation="1"> Matt
</font></div>
</div>
</div>
剩下的个人感觉不太常用,如果需要的话可以去官方文档查看
附传送门:https://semantic-ui.com/elements/input.html