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. python字符转码

    字符的编码与转码 demo UTF-8 转GBK python2.7 默认编码ASCII 没有转Unicode 直接转GBK 1 .系统的默认编码是ASCII , 程序的指定编码是UTF-8,在enc ...

  2. MyEclipse内存溢出问题

    今天碰到的问题,先记录下来 Console报错: Java.lang.OutOfMemoryError: PermGen space 跟着步骤: 在这里加入:-Xms800m -Xmx800m -XX ...

  3. CAD出现向程序发送命令时出现问题提示解决方法分享

    大家有没有遇到在使用cad打开图纸的时候提示向程序发送命令时出现错误的情况呢,如果你在使用cad的时候出现了这个提示,是由于软件的兼容性出现了问题,那么该怎么办呢,下面小编就给大家带来cad打开图纸提 ...

  4. Selenium入门18 断言

    自动化测试需对比实际结果与预期结果,给出测试结论. 1 条件判断 if ...else... 2 assert ... #coding:utf-8 #断言 from selenium import w ...

  5. RF脚本中的坑1： SyntaxError: invalid token

    话不多说,直接上调试脚本: 执行后${b}=8:没问题.然后${a}改成08继续: 执行后居然报错了: 经过多次尝试08或者09时,都会报SyntaxError错误:后来查阅语法,才恍然大悟:Pyth ...

  6. Raknet—视频会议系统最佳的数据传输引擎

    RakNet是一个跨平台的C++和C#的游戏引擎,它主要是为高效的数据传输而设计,使用者可以通过它进行游戏和其他的程序的开发.RakNet虽然是一个游戏引擎,但同样也是一个非常好的视频会议系统传输引擎 ...

  7. Android 中间白色渐变到看不见的线的Drawable

    用gradient <gradient android:startColor="#00ffffff" android:centerColor="#ffffff&qu ...

  8. 【洛谷5251】[LnOI2019] 第二代图灵机（线段树+ODT）

    点此看题面 大致题意: 有单点修改数字和区间着色两种修改操作,询问你某段区间内包含所有颜色且数字和最小的子区间的数字和,或某段区间内没有重复颜色且数字和最大的子区间的数字和.数据随机. \(ODT\) ...

  9. MyBatis的优缺点以及特点

    特点: mybatis是一种持久层框架,也属于ORM映射.前身是ibatis. 相比于hibernatehibernate为全自动化,配置文件书写之后不需要书写sql语句,但是欠缺灵活,很多时候需要优 ...

  10. C#面向对象的编程语言具三个特性

    C#面向对象的编程语言具三个特性:有封装性.继承性.多态性 .