分隔线
实心分隔线
一般
双线
虚线
1 2 3 4 5 6 7 8 9 10 |
实心分隔线 [divider style="solid" top="10" bottom="10"] 虚线 [divider style="dashed" top="10" bottom="10"] 一般 [divider style="normal" top="10" bottom="10"] 双线 [divider style="double" top="10" bottom="10"] 虚线 [divider style="dotted" top="10" bottom="10"] |
Google地图
先在Google地图选取地点然后选分享,然后选取嵌入地图,然后将嵌入代码中的网址替换到下方网址
1 |
[googlemap src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3618.0665218669037!2d121.23597744296261!3d24.929803656182973!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xdbce7788a935438c!2z6b6N5bKh5aSn5pON5aC0!5e0!3m2!1szh-TW!2stw!4v1546149740958" width="" height="500" align="aligncenter"] |
flickr相簿
1 |
[flickr id="10539853@N02" number="6" orderby="latest"] |
获得 Flickr User’s ID
范例网址
ID
10539853@N02
嵌入影音
1 |
[embed width="" height="480"]https://www.youtube.com/watch?v=cfRT5bIfaPg[/embed] |
按钮
小型按钮 中型按钮 大型按钮
1 2 3 |
[button color="orange" size="small" link="https://fontawesome.com/icons?d=gallery&m=free" icon="fa-external-link" target="true"]小型按钮[/button] [button color="orange" size="medium" link="https://fontawesome.com/icons?d=gallery&m=free" icon="fa-external-link" target="true"]中型按钮[/button] [button color="orange" size="big" link="https://fontawesome.com/icons?d=gallery&m=free" icon="fa-external-link" target="true"]大型按钮[/button] |
小提示文字
文字
1 |
[tooltip text="文字" gravity="n"]小提示文字[/tooltip] |
页签
- 页签一的标题
- 页签二的标题
- 页签三的标题
1 2 3 4 5 6 7 8 9 10 |
[tabs type="horizontal"] [tabs_head] [tab_title]页签一的标题[/tab_title] [tab_title]页签二的标题 [/tab_title] [tab_title]页签三的标题[/tab_title] [/tabs_head] [tab]页签一的内容[/tab] [tab]页签二的内容[/tab] [tab]页签三的内容[/tab] [/tabs] |
H1 Heading
H2 Heading
H3 Heading
H4 Heading
H5 Heading
H6 Heading
1 2 3 4 5 6 |
<h1>H1 Heading</h1> <h2>H2 Heading</h2> <h3>H3 Heading</h3> <h4>H4 Heading</h4> <h5>H5 Heading</h5> <h6>H6 Heading</h6> |
The
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
and <code> tags</h2>/* Header */header {margin: 0 auto;position: relative;padding:20px 0;width:995px;}header:after{display: block;visibility: hidden;clear: both;height: 0;content: ".";}.logo {float: left;}.logo h1{font:bold 32pt arial;}#main-nav {width:995px;margin:0 auto 25px;background:#fbfbfb;height:50px;-moz-box-shadow: inset 0 0 2px #FFF, 0 0px 5px #cacaca;-webkit-box-shadow: inset 0 0 2px white, 0 0px 5px #CACACA;box-shadow: inset 0 0 2px white, 0 0px 5px #CACACA;border-bottom:5px solid #494949;}#main-nav .menu-alert{float:left;padding:18px 0 0 10px ;font-style:italic;}#top-menu-mob , #main-menu-mob{ display:none; }[divider]<h2>Unordered / Ordered Lists</h2><ul> <li>Ipsum tempus neque.</li> <li>Aenean maecenas sagittis.</li> <li>Ipsum libero vivamus.</li> <li>Pede sit vivamus.</li> <li>Aenean duis consequat.</li> <li>Ut pede accumsan.</li> <li>Accusamus enim mauris tellus vulputate senectus praesent.</li></ul><ol> <li>Integer sed dui.</li> <li>Amet scelerisque rhoncus.</li> <li>Parturient vel elit.</li> <li>Elit aliquet in in dolor enim.</li> <li>Nisl eros rhoncus.</li> <li>In donec wisi.</li> <li>Mi enim diam hendrerit adipiscing porta.</li> <li>Dui scelerisque molestie.</li></ol><pre class="lang:default decode:true " ><ul> <li>Ipsum tempus neque.</li> <li>Aenean maecenas sagittis.</li> <li>Ipsum libero vivamus.</li> <li>Pede sit vivamus.</li> <li>Aenean duis consequat.</li> <li>Ut pede accumsan.</li> <li>Accusamus enim mauris tellus vulputate senectus praesent.</li></ul><ol> <li>Integer sed dui.</li> <li>Amet scelerisque rhoncus.</li> <li>Parturient vel elit.</li> <li>Elit aliquet in in dolor enim.</li> <li>Nisl eros rhoncus.</li> <li>In donec wisi.</li> <li>Mi enim diam hendrerit adipiscing porta.</li> <li>Dui scelerisque molestie.</li></ol>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
and <code> tags</h2> /* Header */ header { margin: 0 auto; position: relative; padding:20px 0; width:995px; } header:after{ display: block; visibility: hidden; clear: both; height: 0; content: "."; } .logo {float: left;} .logo h1{font:bold 32pt arial;} #main-nav {width:995px;margin:0 auto 25px;background:#fbfbfb;height:50px;-moz-box-shadow: inset 0 0 2px #FFF, 0 0px 5px #cacaca;-webkit-box-shadow: inset 0 0 2px white, 0 0px 5px #CACACA;box-shadow: inset 0 0 2px white, 0 0px 5px #CACACA;border-bottom:5px solid #494949;} #main-nav .menu-alert{float:left;padding:18px 0 0 10px ;font-style:italic;} #top-menu-mob , #main-menu-mob{ display:none; } [divider] <h2>Unordered / Ordered Lists</h2> <ul> <li>Ipsum tempus neque.</li> <li>Aenean maecenas sagittis.</li> <li>Ipsum libero vivamus.</li> <li>Pede sit vivamus.</li> <li>Aenean duis consequat.</li> <li>Ut pede accumsan.</li> <li>Accusamus enim mauris tellus vulputate senectus praesent.</li> </ul> <ol> <li>Integer sed dui.</li> <li>Amet scelerisque rhoncus.</li> <li>Parturient vel elit.</li> <li>Elit aliquet in in dolor enim.</li> <li>Nisl eros rhoncus.</li> <li>In donec wisi.</li> <li>Mi enim diam hendrerit adipiscing porta.</li> <li>Dui scelerisque molestie.</li> </ol> <pre class="lang:default decode:true " ><ul> <li>Ipsum tempus neque.</li> <li>Aenean maecenas sagittis.</li> <li>Ipsum libero vivamus.</li> <li>Pede sit vivamus.</li> <li>Aenean duis consequat.</li> <li>Ut pede accumsan.</li> <li>Accusamus enim mauris tellus vulputate senectus praesent.</li> </ul> <ol> <li>Integer sed dui.</li> <li>Amet scelerisque rhoncus.</li> <li>Parturient vel elit.</li> <li>Elit aliquet in in dolor enim.</li> <li>Nisl eros rhoncus.</li> <li>In donec wisi.</li> <li>Mi enim diam hendrerit adipiscing porta.</li> <li>Dui scelerisque molestie.</li> </ol> |
Tables
First NameLast NameEmail AddressWebsite
John | Smith | johnsmith@example.com | http://www.example.com |
Peter | James | peterjames@example.com | http://www.example.com |
Ronald | Weeley | ronweeley@example.com | http://www.example.com |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
First NameLast NameEmail AddressWebsite <table> <thead></thead> <tbody> <tr> <td>John</td> <td>Smith</td> <td>johnsmith@example.com</td> <td>http://www.example.com</td> </tr> <tr> <td>Peter</td> <td>James</td> <td>peterjames@example.com</td> <td>http://www.example.com</td> </tr> <tr> <td>Ronald</td> <td>Weeley</td> <td>ronweeley@example.com</td> <td>http://www.example.com</td> </tr> </tbody> </table> |
Blockquotes
Suscipit sed at montes at tellus. Aliquam nisl penatibus commodo massa mi rutrum, ut massa mollis dolor dui at, tortor ullamcorper vel diam pretium sit leo, pellentesque in leo eu mauris mollis aliquam, ultricies adipiscing eu a dui sollicitudin posuere. Massa vivamus ac ipsum, pede enim quam sit, mus aliquam amet pede quis laboriosam.
Lorem ipsum dolor sit amet, nullam sapien erat tristique tempor nulla, blandit sit metus volutpat integer wisi. Sed elementum, nec nec inceptos vestibulum diam proin erat, sociosqu et sit provident pellentesque sed aenean. Faucibus per turpis est pellentesque potenti, tristique iaculis adipiscing mauris, ante velit et massa donec facilisis, sed felis sed est.
Molestias ultricies, ante quam urna ut volutpat, egestas dolor dui, nec hac ultrices nulla non netus. Placerat vehicula donec non suscipit egestas, augue vel suspendisse. Et felis venenatis blandit sed est ultrices, adipiscing urna, at aliquam nullam facilisis aliquet sapien, eget duis consectetuer tristique nunc vitae erat, mi purus nisl lorem. Ac magna lobortis non, vulputate vitae viverra.
1 2 3 |
<blockquote> Lorem ipsum dolor sit amet, nullam sapien erat tristique tempor nulla, blandit sit metus volutpat integer wisi. Sed elementum, nec nec inceptos vestibulum diam proin erat, sociosqu et sit provident pellentesque sed aenean. Faucibus per turpis est pellentesque potenti, tristique iaculis adipiscing mauris, ante velit et massa donec facilisis, sed felis sed est. </blockquote> |
Images
Molestias ultricies, ante quam urna ut volutpat, egestas dolor dui, nec hac ultrices nulla non netus. Placerat vehicula donec non suscipit egestas, augue vel suspendisse. Et felis venenatis blandit sed est ultrices, adipiscing urna, at aliquam nullam facilisis aliquet sapien, eget duis consectetuer tristique nunc vitae erat, mi purus nisl lorem. Ac magna lobortis non, vulputate vitae viverra. Placerat vehicula donec non suscipit egestas, augue vel suspendisse. Et felis venenatis blandit sed est ultrices, adipiscing urna.
Molestias ultricies, ante quam urna ut volutpat, egestas dolor dui, nec hac ultrices nulla non netus. Placerat vehicula donec non suscipit egestas, augue vel suspendisse. Et felis venenatis blandit sed est ultrices, adipiscing urna, at aliquam nullam facilisis aliquet sapien, eget duis consectetuer tristique nunc vitae erat, mi purus nisl lorem. Ac magna lobortis non, vulputate vitae viverra. Placerat vehicula donec non suscipit egestas, augue vel suspendisse. Et felis venenatis blandit sed est ultrices, adipiscing urna.
1 2 3 |
<a href="http://themes.tielabs.com/sahifa5/wp-content/uploads/sites/3/2015/01/7998125906_4489ed8a2f_b.jpg"><img class="aligncenter size-medium wp-image-125" src="http://themes.tielabs.com/sahifa5/wp-content/uploads/sites/3/2015/01/7998125906_4489ed8a2f_b-300x200.jpg" alt="7998125906_4489ed8a2f_b" width="300" height="200" /></a> <a href="http://themes.tielabs.com/sahifa5/wp-content/uploads/sites/3/2015/01/samsung-galaxy-note-edge-photo-story-blade-1.jpg"><img class="alignright size-medium wp-image-162" src="http://themes.tielabs.com/sahifa5/wp-content/uploads/sites/3/2015/01/samsung-galaxy-note-edge-photo-story-blade-1-300x169.jpg" alt="samsung-galaxy-note-edge-photo-story-blade-1" width="300" height="169" /></a>Molestias ultricies, ante quam urna ut volutpat, egestas dolor dui, nec hac ultrices nulla non netus. Placerat vehicula donec non suscipit egestas, augue vel suspendisse. Et felis venenatis blandit sed est ultrices, adipiscing urna, at aliquam nullam facilisis aliquet sapien, eget duis consectetuer tristique nunc vitae erat, mi purus nisl lorem. Ac magna lobortis non, vulputate vitae viverra. Placerat vehicula donec non suscipit egestas, augue vel suspendisse. Et felis venenatis blandit sed est ultrices, adipiscing urna. <a href="http://themes.tielabs.com/sahifa5/wp-content/uploads/sites/3/2015/01/unsplash_52d5bbef8a613_1.jpg"><img class="alignleft size-medium wp-image-115" src="http://themes.tielabs.com/sahifa5/wp-content/uploads/sites/3/2015/01/unsplash_52d5bbef8a613_1-300x200.jpg" alt="unsplash_52d5bbef8a613_1" width="300" height="200" /></a>Molestias ultricies, ante quam urna ut volutpat, egestas dolor dui, nec hac ultrices nulla non netus. Placerat vehicula donec non suscipit egestas, augue vel suspendisse. Et felis venenatis blandit sed est ultrices, adipiscing urna, at aliquam nullam facilisis aliquet sapien, eget duis consectetuer tristique nunc vitae erat, mi purus nisl lorem. Ac magna lobortis non, vulputate vitae viverra. Placerat vehicula donec non suscipit egestas, augue vel suspendisse. Et felis venenatis blandit sed est ultrices, adipiscing urna. |
Gallery
1 |
[gallery link="file" ids="8264,8265,8266,8261,8262,8263,8257,8258,8259,8260"] |