ui image # 插入圖片
img
ui menu # 導航欄
fixed #一直停留在瀏覽器的正上方
ui grid # 網(wǎng)格系統(tǒng)
column
icon # 添加圖標
basic # 去邊框線
vertical text menu # 一列一列的菜單欄
html代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>First landing page</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">Other</a>
</div>
<div class="ui vertical basic segment">
<div class="ui image">
<img src="images/banner.jpg" alt="" />
</div>
</div>
<div class="ui vertical 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">
<h2 class="ui header">
<i class="icon book"></i>
This is a title
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</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">
address: ON
</div>
<div class="item">
Tel: 15997340559
</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">
address: ON
</div>
<div class="item">
Tel: 15997340559
</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">
address: ON
</div>
<div class="item">
Tel: 15997340559
</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">
address: ON
</div>
<div class="item">
Tel: 15997340559
</div>
</div>
</div>
</div>
</div>
</body>
</html>
