1.段落
#段落 <div class="ui segment"> </div> #翻转 <div class="ui inverted segment"> #垂直段落 <div class="ui vertical segment"> #内收 <div class="ui continer segment"> #去除多余的格式 <div class="ui basic segment"> #内距 <div class="ui padded segment"> <div class="ui very padded segment">
2.标题
#标题 <h3 class="ui header">Company</h3> #翻转 <h3 class="ui inverted header">Company</h3> #垂直段落 <h3 class="ui vertical header">Company</h3>
3.菜单menu
<div class="ui menu"> <a href="#" class="item">Home</a> <a href="#" class="item">About</a> <a href="#" class="item">Others</a> </div> #固定菜单 <div class="ui fixed inverted menu"> #垂直菜单 <div class="ui text menu"> <div class="item">Tel:010-666666</div> <div class="item">Adr:CN</div> <div class="item">Fax:010-6666</div> </div>
4.图片
<div class="ui image"> <img src="images/banner.jpg" alt="" /> </div>
5.图标
<i class="ui icon book"></i>
6.网格系统
<div class="ui grid"> <div class="ten wide column">我占10格</div> <div class="six wide column">我占6格</div> </div>
7.按钮
<button type="button" name="button" class="ui button">Read more </button> #翻转 <button type="button" name="button" class="ui inverted blue button">Read more</button>
自己练习
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基于SOA的工作流系统</title> <link rel="stylesheet" href="css/semantic.css" media="screen" title="no title" charset="utf-8"> </head> <body> <div class="ui fixed inverted menu"> <a href="#" class="item">Home</a> <a href="#" class="item">About</a> <a href="#" class="item">Others</a> </div> <div class="ui vertical inverted segment"> <div class="ui image"> <img src="images/banner.jpg" alt="" /> </div> </div> <div class="ui basic segment"> <div class="ui grid"> <div class="ten wide column"> <div class="ui image"> <img src="images/devices2.png" alt="" /> </div> </div> <div class="six wide column"> <h3 class="ui header"> <i class="ui icon book"></i> This title</h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> </div> </div> <div class="ui vertical very padded inverted segment"> <div class="ui grid"> <div class="four wide column"> <div class="ui vertical inverted text menu"> <div class="item"> <h3 class="ui inverted header">Company</h3> </div> <div class="item">Tel:010-666666</div> <div class="item">Adr:CN</div> <div class="item">Fax:010-6666</div> </div> </div> <div class="four wide column"> <div class="ui vertical inverted text menu"> <div class="item"> <h3 class="ui inverted header">Company</h3> </div> <div class="item">Tel:010-666666</div> <div class="item">Adr:CN</div> <div class="item">Fax:010-6666</div> </div> </div> <div class="four wide column"> <div class="ui vertical inverted text menu"> <div class="item"> <h3 class="ui inverted header">Company</h3> </div> <div class="item">Tel:010-666666</div> <div class="item">Adr:CN</div> <div class="item">Fax:010-6666</div> </div> </div> <div class="four wide column"> <div class="ui vertical inverted text menu"> <div class="item"> <h3 class="ui inverted header">Company</h3> </div> <div class="item">Tel:010-666666</div> <div class="item">Adr:CN</div> <div class="item">Fax:010-6666</div> </div> </div> </div> </div> </div> </body> </html>
