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. selnium截屏操作

    这个算是难找的.C# ITakeScreenShot 接口来实现截图.不是ScreenShot这个坑弄了很长时间啊. var folderLocation = Environment.CurrentD ...

  2. sharepoint2010列表的分页实现迅雷样式效果

    利用ListItemCollectionPosition和AspNetPage分页控件实现,效果图如下: 后台分页代码如下: #region 私有方法 /// <summary> /// ...

  3. DB2安装教程图解

    下载好之后,是exe文件,但是双击后基本上都是解压,但是使用自身的解压的话会有很多文件解压失败的情况,所以推荐使用自己电脑上自带的解压工具直接解压(如360解压,好压等). 解压之后直接运行setup ...

  4. IDEA中git的配置与使用

    IDEA中git的配置与使用 1.介绍 git是目前非常流行的版本管理管理软件,因其具有分布式特点,越来越受到企业的欢迎.IDEA作为一款优秀的开发软件,其内部也提供了对git的支持. 2.下载并安装 ...

  5. jquery对radio的操作汇总

    1.JQuery控制radio选中和不选中 通过name $("input:radio[name="analyfsftype"]").eq(0).attr(&q ...

  6. leetcode：查找

    1.  word ladder 题目: Given two words (start and end), and a dictionary, find the length of shortest t ...

  7. 正则表达式 /i /g /m /ig /gi

    正则表达式中/i,/g,/ig,/gi,/m的区别和含义   /i (忽略大小写) /g (全文查找出现的所有匹配字符) /m (多行查找) / /ig(全文查找.忽略大小写) 

  8. 【洛谷P1064】[NOIP2006] 金明的预算方案

    金明的预算方案 显然是个背包问题 把每个主件和它对应的附件放在一组,枚举每一组,有以下几种选法: 1.都不选 2.只选主件 3.一个主件+一个附件 4.一个主件+两个附件 于是就成了01背包.. #i ...

  9. [NVIDIA编程教程]OpenACC: Directives for GPUs

    NVIDIA已经在过去五年里大力发展CUDA技术,我们估计CUDA开发人员超过15万,很多重要的科学应用正在CUDA的帮助下完成.但是我们仍然有一个很长的路要走,以帮助每个人从GPU计算中享受到好处. ...

  10. JavaScript正则(一)

    1.字符组: ^  $ 说的是开始位置和结束位置,在JS中,既表示字符串的起始位置和结束位置,也表示行的起始位置和结束位置 console.log(/^\d$/.test('2')); // true ...