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. 异常处理 try...catch...finally 执行顺序， 以及对返回值得影响

    异常处理 try...catch...finally 执行顺序, 以及对返回值得影响 结论:1.不管有没有出现异常,finally块中代码都会执行:2.当try和catch中有return时,fina ...

  2. 2.eclipse安装

    1.进入官网https://www.eclipse.org/ 2.配置工作目录:存放 1.项目代码    2.IDE相关配置信息 3.没有配置tomcat,所以为空.

  3. ARM实验5 —— 按键中断实验

    key_int按键中断实验 实验内容: 通过开发板上的按键中断控制led灯进行跑马灯并打印信息. 通过简单事例说明猎户座4412处理器的GIC中断处理的应用,设置key2按键连接的引脚为中断模式,当识 ...

  4. Objectbox Box的getAll() 函数返回emptylist() 未判断导致崩溃

    最近使用了Objectbox作为新项目的数据库后台,Greendao开发团队新力作,但是Objectbox算是比较新的一个东西,现在资料也不多. 今天跟大家分享一个关于Box类的getAll()函数的 ...

  5. 如何迅速掌握并提高linux运维技能（收藏文）

    如何迅速掌握并提高linux运维技能   文章来源于南非蚂蚁   之前曾经写过一篇如何学习Linux的文章,得到了很多反馈,大家都在分享自己的学习经验和体会,并且也提出了不少意见和建议.学习这个事情其 ...

  6. c#转载的

    C#做项目时的一些经验分享 1.对于公用的类型定义,要单独抽取出来,放到单独的DLL中. 2.通过大量定义interface接口,来提高模块化程度,不同功能之间通过实现接口来面向接口编程. 3.如果项 ...

  7. ABP学习 解决：Update-Database : 无法将“Update-Database”项识别为 cmdlet、函数、脚本文件或可运行程序的名称的问题

    原因: 没有引用EntityFramework命令 解决: 在程序包管理器控制台执行如下命令:Import-Module 项目路径\packages\EntityFramework.6.1.3(EF版 ...

  8. 初尝微信小程序2-基本框架

    基本框架: .wxml :页面骨架 .wxss :页面样式 .js :页面逻辑    描述一些行为 .json :页面配置 创建一个小程序之后,app.js,app.json,app.wxss是必须的 ...

  9. 1、React-Native的基础入门

    React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物,目前支持iOS和安 ...

  10. jQuery、Angluar、Avalon对比

    最近在慕课网看一些关于avalon的视频,记录下一些笔记及代码实例以便日后自己复习可以用到,另外也可以给不想花时间看视频的小伙伴提供一丝丝帮助 这里主要是做一个简单的todolist 分别用三种不同的 ...