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. 轻松解决 Eclipse Indigo 3.7 中文字体偏小，完美 Consolas 微软雅黑混合字体！（转）

    在 Windows 7 下初始后化,发现界面变化不大,但中文字体却面目全非,小得根本看不见,而且也看起来很不爽.其实这是 Eclipse 的默认字体换了,以前的一直是 Courier New ,这次e ...

  2. Asp.net防御XSS攻击组件库

    一.AntiXss 翻看mvc4高级编程,偶看到作者强烈推荐使用AntiXss防御XSS攻击,收集资料看下. 目前类库已融入到.netframework中,类库主页不再更新. 使用方法:使用Nuget ...

  3. SharePoint 2010 网络上的开发经验和资源

    sharepoint 集成 Exchange 基于OWA方式获取Exchange中未读邮件  http://www.cnblogs.com/jinho/archive/2011/09/17/21798 ...

  4. Tensorflow ValueError: Protocol message RewriterConfig has no "layout_optimizer" field

    I changed models/research/object_detection/exporter.py line 71/72 from: rewrite_options = rewriter_c ...

  5. Javascript作业—数组去重（要求：原型链上添加函数）

    数组去重(要求:原型链上添加函数) <script> //数组去重,要求:在原型链上添加函数 //存储不重复的--仅循环一次 if(!Array.prototype.unique1){ A ...

  6. C++学习之虚析构函数

    什么样的情况下才需要虚析构函数? 类需要控制自己的对象执行一系列操作时发生什么样的行为,这些操作包括:创建(对象).拷贝.移动.赋值和销毁.在继承体系中,如果一个类(基类或其派生的类)没有定义拷贝控制 ...

  7. Git学习环境搭建和git对用户的增删改查命令

    git安装 windows下安装git git下载进入网址: https://git-scm.com/downloads 点击下载,进行安装,安装成功,你会看到图标,点击进入到git bash 查看g ...

  8. Uva 11401 数三角形

    题目链接:https://uva.onlinejudge.org/external/114/11401.pdf 题意:1~n个数里面挑3个不同的数,组成一个三角形.求方案数. 分析: 令最长的边为X, ...

  9. linux客户端传输文件到Windows本地

    1.rz/sz安装及使用方法 和 FileZilla 功能类似用于上传文件,上传速度比较慢适用比较小的文件  yum安装: $ sudo yum install lrzsz   打开SecureCRT ...

  10. 5、Oracle备份(oracle备份脚本配置)

    1.1 Oracle数据库备份 1.1.1 链接Oracle介质管理库 请在数据库节点上操作. [oracle@db01/usr/openv/netbackup/bin]$ ./oracle_link ...