Semantic UI

来源：互联网发布：出世之心入世之事知乎编辑：程序博客网时间：2024/05/17 18:18

地址 http://www.semantic-ui.cn/elements/button.html
常用

一.

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">         ![](img/background.jpg)    </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">                    ![](img/0.jpg)                </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 segment`t中的线

如果仔细观察上面的图片,会发现有一根白线,此时我们可以用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>

复制四个

就可以了
效果如下

阅读全文

0 0

Semantic UI

一.

二.

三.

四.

五.

六.

七.

八.

去ui segmentt中的线

九.

去`ui segment`t中的线