ui image # 插入图片
img
ui menu # 导航栏
fixed #一直停留在浏览器的正上方
ui grid # 网格系统
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>
网友评论