1.段落

 #段落

<div class="ui segment">    </div>

#翻转

 <div class="ui inverted segment">

#垂直段落

<div class="ui vertical  segment">

#内收

<div class="ui continer segment">

#去除多余的格式

<div class="ui basic segment">

#内距

            <div class="ui padded segment">

　　　　<div class="ui very padded segment">

2.标题

#标题

<h3 class="ui  header">Company</h3>

#翻转

<h3 class="ui inverted header">Company</h3>

#垂直段落

<h3 class="ui vertical header">Company</h3>

3.菜单menu

<div class="ui  menu">

    <a href="#" class="item">Home</a>

    <a href="#" class="item">About</a>

    <a href="#" class="item">Others</a>

</div>

#固定菜单

 <div class="ui fixed inverted menu">

#垂直菜单

<div class="ui  text menu">

    <div class="item">Tel:010-666666</div>

    <div class="item">Adr:CN</div>

    <div class="item">Fax:010-6666</div>

</div>

4.图片

<div class="ui image">

　　<img src="data:images/banner.jpg" alt="" />

</div>

5.图标

<i class="ui icon book"></i>

6.网格系统

      <div class="ui grid">

        <div class="ten wide column">我占10格</div>

        <div class="six wide column">我占6格</div>

      </div>

7.按钮

<button type="button" name="button" class="ui button">Read more </button>

#翻转

<button type="button" name="button" class="ui inverted blue button">Read more</button>

自己练习

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>基于SOA的工作流系统</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">Others</a>

    </div>

    <div class="ui vertical inverted segment">

      <div class="ui image">

        <img src="data:images/banner.jpg" alt="" />

      </div>

    </div>

    <div class="ui basic segment">

      <div class="ui grid">

        <div class="ten wide column">

          <div class="ui image">

            <img src="data:images/devices2.png" alt="" />

          </div>

        </div>

        <div class="six wide column">

          <h3 class="ui header">

            <i class="ui icon book"></i>

            This title</h3>

          <p>

            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

          </p>

        </div>

      </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">Tel:010-666666</div>

            <div class="item">Adr:CN</div>

            <div class="item">Fax:010-6666</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">Tel:010-666666</div>

            <div class="item">Adr:CN</div>

            <div class="item">Fax:010-6666</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">Tel:010-666666</div>

            <div class="item">Adr:CN</div>

            <div class="item">Fax:010-6666</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">Tel:010-666666</div>

            <div class="item">Adr:CN</div>

            <div class="item">Fax:010-6666</div>

          </div>

        </div>

        </div>

      </div>

    </div>

  </body>

</html>

随机推荐

  1. Static 用法

    1.Static关键字含意:static译文是静态的,静止的,因此使用 static 修饰符声明属于类型本身而不是属于特定对象(new创建的对象)的静态成员. 2.修饰使用范围 static 修饰符可 ...

  2. ui.datepicker的回显问题

    应用场景: 页面上有一些现有的输入框,需要调用日期插件,同时还要clone一份,动态添加到页面中,动态生成的输入框在调用datepicker的时候,click事件有效,但是选择的时间无法回显到对应的输 ...

  3. Docker cgroup.procs no space left on device

    环境:centos6 运行docker 时 错误提示: System error: write /sys/fs/cgroup/docker/01f5670fbee1f6687f58f3a943b1e1 ...

  4. 智能开关:orange pi one(arm linux)控制继电器

    大家都知道,继电器是用小电流去控制大电流运作的一种“自动开关”,在我们生活.工作中随处可见.现在的“智能家居”概念,有很多功能模块其实就是“智能开关”,远程开关.定时开关.条件触发开关等等. 下面介绍 ...

  5. Excel公式巧用-将新值替换旧值，新值为空保留原值

    使用excel时候遇到 将新值替换旧值,新值为空保留原值的问题,简单使用Excel的函数即可以实现.

  6. Android（java）学习笔记63：Clock App 编写报错01

    1. 首先我们二话不说直接先看报错内容如下: 07-12 08:25:03.572: E/dalvikvm(3602): native fork pid:0 done. 07-12 08:25:03. ...

  7. How To Secure Nginx with Let's Encrypt on Ubuntu 14.04

    https://www.digitalocean.com/community/tutorials/how-to-secure-nginx-with-let-s-encrypt-on-ubuntu-14 ...

  8. nginx缓存批量清除

    研究了一段时间的缓存清除,说说了解的三种方式吧.        1. 原始的只增加缓存模块的,根据访问的路径一条条清除. 根据此方式要进行批量清除的话,必须在设定的缓存目录下通过自己写的程序来读取ng ...

  9. matlab中padarray函数在numpy、python中的实现

    a = np.arange(6) a = a.reshape((2, 3)) print np.lib.pad(a, 1, 'symmetric') 运行结果: [[ ] [ ] [ ] [ ]]

  10. Linux开发常见问题：GCC：链接器输入文件未使用，因为链接尚未完成

    问:我在Linux中运行一个make文件去编译C语言代码,然后得到了如下的错误信息: gcc  -Wall  -fPIC  -DSOLARIS  -DXP_UNIX  -DMCC_HTTPD  -D_ ...