完整代碼
注意正確引入css文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/semantic.css">
</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 image">
</div>
<div class="ui basic segment">
<div class="ui grid">
<div class="ten wide column">
<div class="ui image">
</div>
</div>
<div class="six wide column">
<h2 class="ui header"><i class="icon star"></i>This is a title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium accusantium tempora architecto eligendi laboriosam pariatur in, minus autem veritatis, quis dolore necessitatibus dolorem. Quisquam, porro, suscipit mollitia deserunt nulla repudiandae!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium accusantium tempora architecto eligendi laboriosam pariatur in, minus autem veritatis, quis dolore necessitatibus dolorem. Quisquam, porro, suscipit mollitia deserunt nulla repudiandae!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium accusantium tempora architecto eligendi laboriosam pariatur in, minus autem veritatis, quis dolore necessitatibus dolorem. Quisquam, porro, suscipit mollitia deserunt nulla repudiandae!</p>
</div>
</div>
</div>
<div class="ui inverted vertical very padded segment">
<div class="ui grid">
<div class=" four wide column">
<div class="ui inverted vertical padded text menu">
<div class="item">Adress:CN</div>
<div class="item">Tel:10000000</div>
<div class="item">E-mail:1231231</div>
</div>
</div>
<div class=" four wide column">
<div class="ui inverted vertical padded text menu">
<div class="item">Adress:CN</div>
<div class="item">Tel:10000000</div>
<div class="item">E-mail:1231231</div>
</div>
</div>
<div class=" four wide column">
<div class="ui inverted vertical padded text menu">
<div class="item">Adress:CN</div>
<div class="item">Tel:10000000</div>
<div class="item">E-mail:1231231</div>
</div>
</div>
<div class=" four wide column">
<div class="ui inverted vertical padded text menu">
<div class="item">Adress:CN</div>
<div class="item">Tel:10000000</div>
<div class="item">E-mail:1231231</div>
</div>
</div>
</div>
</div>
</body>
</html>
效果
