Metro-UI 시스템-1-타일 라벨
- WBOY원래의
- 2016-10-23 23:59:591863검색
렌더링 1개
2 각 효과에 대한 자세한 설명
1. 심플한 타일
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile"</span><span style="color: #ff0000"> data-role</span><span style="color: #0000ff">="title"</span><span style="color: #0000ff">></span> <span style="color: #008000"><!--</span><span style="color: #008000">定义一个磁贴</span><span style="color: #008000">--></span>
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-content iconic"</span><span style="color: #0000ff">></span><span style="color: #008000"><!--</span><span style="color: #008000">设置磁贴的内容</span><span style="color: #008000">--></span>
<span style="color: #0000ff"><</span><span style="color: #800000">icon </span><span style="color: #0000ff">/></span>
<span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
2, 제목과 모서리가 있는 타일
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile"</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-content"</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">span </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-label"</span><span style="color: #0000ff">></span>Label<span style="color: #0000ff"></</span><span style="color: #800000">span</span><span style="color: #0000ff">></span> <span style="color: #008000"><!--</span><span style="color: #008000">设置磁贴的标题</span><span style="color: #008000">--></span>
<span style="color: #0000ff"><</span><span style="color: #800000">span </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-badge"</span><span style="color: #0000ff">></span>5<span style="color: #0000ff"></</span><span style="color: #800000">span</span><span style="color: #0000ff">></span> <span style="color: #008000"><!--</span><span style="color: #008000">设置磁贴下方的字数</span><span style="color: #008000">--></span>
<span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
3, 그림 타일 세트
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile"</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-content image-set"</span><span style="color: #0000ff">></span> <span style="color: #008000"><!--</span><span style="color: #008000">定义一组图片</span><span style="color: #008000">--></span>
<span style="color: #0000ff"><</span><span style="color: #800000">img </span><span style="color: #ff0000">src</span><span style="color: #0000ff">="images/1.jpg"</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">img </span><span style="color: #ff0000">src</span><span style="color: #0000ff">="images/1.jpg"</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">img </span><span style="color: #ff0000">src</span><span style="color: #0000ff">="images/1.jpg"</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">img </span><span style="color: #ff0000">src</span><span style="color: #0000ff">="images/1.jpg"</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">img </span><span style="color: #ff0000">src</span><span style="color: #0000ff">="images/1.jpg"</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
3, 그림타일
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile"</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-content"</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">img </span><span style="color: #ff0000">src</span><span style="color: #0000ff">="images/1.jpg"</span><span style="color: #ff0000"> data-role</span><span style="color: #0000ff">="fitImage"</span><span style="color: #ff0000"> data-format</span><span style="color: #0000ff">="square"</span><span style="color: #0000ff">></span> <span style="color: #008000"><!--</span><span style="color: #008000">正常图片大小，自动裁剪</span><span style="color: #008000">--></span>
<span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
4, 페이지 넘김 동적 효과를 적용한 타일
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile"</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-content"</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="carousel"</span><span style="color: #ff0000"> data-role</span><span style="color: #0000ff">="carousel"</span><span style="color: #0000ff">></span> <span style="color: #008000"><!--</span><span style="color: #008000">带有旋转的样式的磁贴</span><span style="color: #008000">--></span>
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="slide"</span><span style="color: #0000ff">><</span><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="http:www.baidu.com"</span><span style="color: #0000ff">><</span><span style="color: #800000">img </span><span style="color: #ff0000">src</span><span style="color: #0000ff">="images/1.jpg"</span><span style="color: #0000ff">></</span><span style="color: #800000">a</span><span style="color: #0000ff">></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="slide"</span><span style="color: #0000ff">><</span><span style="color: #800000">img </span><span style="color: #ff0000">src</span><span style="color: #0000ff">="images/1.jpg"</span><span style="color: #0000ff">></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
5. 타일 스타일을 선택하세요
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile element-selected"</span><span style="color: #0000ff">></span> <span style="color: #008000"><!--</span><span style="color: #008000">选中样式的磁贴</span><span style="color: #008000">--></span><span style="color: #000000">
12321321
</span><span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
6. 콘텐츠가 타일을 아래에서 위로 슬라이드합니다
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile"</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-content slide-up"</span><span style="color: #0000ff">></span> <span style="color: #008000"><!--</span><span style="color: #008000">定义内容是向上滑动的</span><span style="color: #008000">--></span>
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="slide"</span><span style="color: #0000ff">></span> <span style="color: #008000"><!--</span><span style="color: #008000">触发焦点时向上滑动</span><span style="color: #008000">--></span><span style="color: #000000">
... Main slide content ...
</span><span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="slide-over"</span><span style="color: #0000ff">></span> <span style="color: #008000"><!--</span><span style="color: #008000">触发焦点时由下向上滑动覆盖内容</span><span style="color: #008000">--></span><span style="color: #000000">
... Over slide content here ...
</span><span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
7, 콘텐츠가 위에서 아래로 슬라이드됩니다
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile"</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-content slide-down"</span><span style="color: #0000ff">></span> <span style="color: #008000"><!--</span><span style="color: #008000">定义内容是向下滑动的</span><span style="color: #008000">--></span>
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="slide"</span><span style="color: #0000ff">></span><span style="color: #008000"><!--</span><span style="color: #008000">触发焦点时向上滑动</span><span style="color: #008000">--></span><span style="color: #000000">
... Main slide content ...
</span><span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="slide-over"</span><span style="color: #0000ff">></span> <span style="color: #008000"><!--</span><span style="color: #008000">触发焦点时由上向下滑动覆盖内容</span><span style="color: #008000">--></span><span style="color: #000000">
... Over slide content here ...
</span><span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
8, 콘텐츠가 왼쪽에서 오른쪽으로 슬라이드됩니다
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile"</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-content slide-left"</span><span style="color: #0000ff">></span><span style="color: #008000"><!--</span><span style="color: #008000">定义内容是由左向右滑动的</span><span style="color: #008000">--></span>
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="slide"</span><span style="color: #0000ff">></span><span style="color: #000000">
... Main slide content ...
</span><span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="slide-over"</span><span style="color: #0000ff">></span><span style="color: #000000">
... Over slide content here ...
</span><span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
9, 정의 내용이 오른쪽에서 왼쪽으로 슬라이딩됩니다
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile"</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-content slide-right"</span><span style="color: #0000ff">></span> <span style="color: #008000"><!--</span><span style="color: #008000">定义内容是由右向左滑动的</span><span style="color: #008000">--></span>
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="slide"</span><span style="color: #0000ff">></span><span style="color: #000000">
... Main slide content ...
</span><span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="slide-over"</span><span style="color: #0000ff">></span><span style="color: #000000">
... Over slide content here ...
</span><span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
10, 확대효과
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile"</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-content zooming"</span><span style="color: #0000ff">></span> <span style="color: #008000"><!--</span><span style="color: #008000">定义内容放大的</span><span style="color: #008000">--></span>
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="slide"</span><span style="color: #0000ff">></span><span style="color: #000000">
... Slide content here ...
</span><span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
11, 감소효과
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile"</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-content zooming-out"</span><span style="color: #0000ff">></span> <span style="color: #008000"><!--</span><span style="color: #008000">定义内容缩小的</span><span style="color: #008000">--></span>
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="slide"</span><span style="color: #0000ff">></span><span style="color: #000000">
... Slide content here ...
</span><span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
12, 상하 슬라이딩 효과
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-wide"</span><span style="color: #ff0000"> data-role</span><span style="color: #0000ff">="tile"</span><span style="color: #ff0000"> data-effect</span><span style="color: #0000ff">="slideUpDown"</span><span style="color: #0000ff">></span> <span style="color: #008000"><!--</span><span style="color: #008000">定义内容是滑动的 上下滑动 类似滚动效果</span><span style="color: #008000">--></span>
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-content"</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="live-slide"</span><span style="color: #0000ff">></span>...slide content...<span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span><span style="color: #000000">
...
</span><span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="live-slide"</span><span style="color: #0000ff">></span>...slide content2...<span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
13, ICon을 활용한 효과
3개의 소스 코드 주소
https://git.oschina.net/yudaming/metro
개인 홈페이지 4개(다양한 기술 홈페이지 공유 제공)
http://dmsite.chinacloudsites.cn/
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：彻底理解nth-child和nth-of-type的区别。다음 기사：手风琴菜单