Semantic UI
2017-10-17 本文已影响0人
Co_zy
官方地址
http://www.semantic-ui.cn/elements/button.html
CDN加速
1.http://www.bootcdn.cn/semantic-ui/
2.https://cdnjs.com/libraries/semantic-ui/
可以在<link>按照如下引用
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.css">
常用组件
一.
Element->Segment->Inverted
<div class="ui inverted segment">
<p>I'm here to tell you something, and you will probably read me first.</p>
</div>
一个简单示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>first web</title>
<link rel="stylesheet" href="css/semantic.css" media="screen" title="no title" charset ="utf-8">
</head>
<body>
<div class="ui inverted black segment">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Animi corporis culpa cupiditate iusto nostrum suscipit?
Debitis harum incidunt nihil? At dicta dolores earum eligendi id magnam nisi quam rem, vitae?
</div>
<div class="ui inverted blue segment">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Animi corporis culpa cupiditate iusto nostrum suscipit?
Debitis harum incidunt nihil? At dicta dolores earum eligendi id magnam nisi quam rem, vitae?
</div>
<div class="ui inverted red segment">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Animi corporis culpa cupiditate iusto nostrum suscipit?
Debitis harum incidunt nihil? At dicta dolores earum eligendi id magnam nisi quam rem, vitae?
</div>
<div class="ui segment">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Animi corporis culpa cupiditate iusto nostrum suscipit?
Debitis harum incidunt nihil? At dicta dolores earum eligendi id magnam nisi quam rem, vitae?
</div>
</body>
</html>
效果如下
二.
我们注意到此时有圆角,阴影,相互之间还有缝隙,接下来用一下Vertical
<div class="ui inverted black vertical segment">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Animi corporis culpa cupiditate iusto nostrum suscipit?
Debitis harum incidunt nihil? At dicta dolores earum eligendi id magnam nisi quam rem, vitae?
</div>
三.
paded 由于semantic非常语义化,可以加一个very,即very padded
<div class="ui inverted red vertical very padded segment">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Animi corporis culpa cupiditate iusto nostrum suscipit?
Debitis harum incidunt nihil? At dicta dolores earum eligendi id magnam nisi quam rem, vitae?
</div>
四.
container
<div class="ui Vertical segment">
<div class="ui container segment">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Animi corporis culpa cupiditate iusto nostrum suscipit?
Debitis harum incidunt nihil? At dicta dolores earum eligendi id magnam nisi quam rem, vitae?
</div>
<div class="ui container segment">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Animi corporis culpa cupiditate iusto nostrum suscipit?
Debitis harum incidunt nihil? At dicta dolores earum eligendi id magnam nisi quam rem, vitae?
</div>
</div>
五.
button
<button type="button" name="button" class="ui inverted blue button">Read more</button>
上述样式完整代码
<div class="ui container segment">
<h1 class="ui header">First web</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Cupiditate inventore reprehenderit voluptatibus. Aliquid, architecto aut, ea eligendi error illo iusto, libero maxime obcaecati odio omnis possimus rem repudiandae tenetur voluptatibus.
</p>
<button type="button"
name="button" class="ui inverted blue button">Read more</button>
</div>
六.
image
<div class="ui inverted vertical segment">
<div class="ui image">
</div>
</div>
七.
导航栏
<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>
八.
网格
先引用官网的一个例子,里面的每一个column用于设置比例,下面的即各占四分之一
<div class="ui grid">
<div class="four wide column"></div>
<div class="four wide column"></div>
<div class="four wide column"></div>
<div class="four wide column"></div>
</div>
看一个具体例子,实现左边图片,右边文字,左右比例6:4
<div class="ui 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>
</div>
</div>
</div>
为了方便观察,我截了小图
去ui segmentt中的线
如果仔细观察上面的图片,会发现有一根白线,此时我们可以用basic去除
<div class="ui basic segment">
九.
图标icon
将下载好的Semantic-UI-CSS-master文件夹下的themes拷贝至css目录中,便可以在代码中引用
(更多http://www.semantic-ui.cn/elements/icon.html)
<i class="icon star"></i>
代码如下
<h2 class="ui header"><i class="icon star"></i>This is a title</h2>
最后加上footer
<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">就可以了
效果如下
