官方文档：https://semantic-ui.com/introduction/getting-started.html
semantic  UI： SemanticUI是一款语义化设计的前端开源框架
   
<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>first web</title>

    <link rel="stylesheet" type="text/css" href="css\semantic.css">

    <link rel="stylesheet" href="mystyle.css" media="screen" charset="utf-8">

  </head>

  <body>

    <div class="ui inverted vertical container segment">

      <div class="ui image">

        <img src="data:image\banner.jpg" alt="first web" />

      </div>

    </div>

    <div class="ui vertical segment">

      <div class="ui container segment">

        <h1 class="ui header">first web</h1>

        <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>

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

      </div>

      <div class="ui container segment">

        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.

      </div>

      <div class="ui container segment">

        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.

      </div>

    </div>

    <div class="ui inverted vertical very padded container segment">

      <p>

        © 2015 - 2016

      </p>

    </div>

  </body>

</html>
 
 

web页面：

 
知识清单：
inverted:color  反转颜色
 

Inverted

按钮包括背景色可以被设置为暗色背景（幽灵按

Inverted

按钮可以被设置为暗色背景（幽灵按钮）

StandardRedOrange黄色OliveGreenTealBlue紫罗兰色紫色粉色褐色灰色

vertical

1.圆角消失

2.阴影消失

3.每个div间距消失

container(容器) 边距增加

padded--内距 和边距保持一定距离

标签：ui...segment, ui ... header, ui ... image  <button...type="button">read more</button>

<wiz_tmp_tag id="wiz-table-range-border" contenteditable="false" style="display: none;">

 
 
 
 

semantic UI first web的更多相关文章

  1. Semantic UI – 完全语义化的前端界面开发框架

    Semantic UI 是一个 UI 库,使前端开发更简单,更容易学习.Semantic UI 介绍了许多界面元素.在大多数情况下,只有你需要的元素建立一个自定义的构建可能是最好的. UI 组件分为四 ...

  2. 目前几款基于html5的前端框架：如Bootstrap、Foundation、Semantic UI 、Amaze UI

    Bootstrap是由Twitter在2011年8月推出的开源WEB前端框架,集合CSS 和HTML,使用了最新的浏览器技术,为快速WEB开发提供了一套前端工具包,包括布局.网格.表格.按钮.表单.导 ...

  3. webpack 解决 semantic ui 中 google fonts 引用的问题

    semantic ui css 的第一行引用了 google web font api,由于不可告人而又众所周知的原因,这条链接在国内无法访问: @import url('https://fonts. ...

  4. semantic ui框架学习笔记一

    面包屑导航 面包屑导航经常用于多个栏目下的内容管理,是web页面里比较常用的组合.例如: <div class="ui breadcrumb"> <a class ...

  5. Semantic UI 语义化设计的前端框架

    UI是Web的灵魂!Semantic UI是一款语义化设计的前端框架,为攻城师而制作的可复用的开源前端框架. 特性 弃用有歧义的表述 Semantic是围绕自然交流语言而架构的,这使得开发更加直观(易 ...

  6. Semantic UI 中文参考手册

    一个拥有友好词汇表的前端框架,完全语义化的前端界面开发框架,为一组开发人员之间共享UI元素配备了规格.使用的词汇(类和ID)相比其它替代品更加简洁,从而降低了学习曲线.有许多HTML元素,UI元素和场 ...

  7. 修改 Semantic UI 的默认字体

    Semantic UI 默认使用的是谷歌提供的字体,并且是直接使用了谷歌的官方链接.由于大家都知道的原因,谷歌网站在国内访问速度很差,甚至根本无法访问,还有就是可能会在离线环境下使用 Semantic ...

  8. 160908、前端开发框架Semantic UI

    简介 网页开发中,CSS控制网页样式.作为测试开发工程师,我个人不太擅长手写CSS.样式微调.兼容浏览器等工作,所以我选择使用成熟的前端框架,可以快速开发出样式美观的网站,也解决了大部分浏览器兼容问题 ...

  9. Semantic UI基础使用教程

    自己今后要使用Semantic UI进行项目开发了,一步步的记录下来,供大家参考,也让自己去简单的学习一下,有空了就会更新一点东西,大家有什么问题可以相互交流一下,文采不是很好,希望大家要多多见谅,这 ...

随机推荐

  1. 经验之谈——gulp使用教程

    gulp的最实用教程 使用gulp编译less.sass.压缩js等常用功能讲解 gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多 ...

  2. C#窗体多语言切换（简繁）

    多窗体最好继承一个父窗体,在父窗体Load事件中执行此方法 添加引用 using Microsoft.VisualBasic; #region 语言切换 /// <summary> /// ...

  3. Unity应用架构设计(12)——AOP思想的实践

    想象一下,当程序所有的业务逻辑都完成的时候,你可能还来不及喘口气,紧张的测试即将来临.你的Boss告诉你,虽然程序没问题,但某些方法为什么执行这么慢,性能堪忧.领会了Boss的意图之后,漫长的排查问题 ...

  4. JAVAEE——SSH项目实战01：SVN介绍、安装和使用方法

    1 学习目标 1.掌握svn服务端.svn客户端.svn eclipse插件安装方法 2.掌握svn的基本使用方法 2 svn介绍 2.1 项目管理中的版本控制问题 通常软件开发由多人协作开发,如果对 ...

  5. H3C交换机删除VLAN与其绑定端口配置

    在系统视图下,执行 undo int vlan 2 undo vlan 2 可以删除vlan2的配置信息. 执行 undo vlan all 可以删除所有的vlan信息. 在vlan2视图下,执行: ...

  6. Scratch2的离线下载与安装

    scratch是一种程序设计语言,可以用来设计 故事.动画.游戏.音乐和美术作品. Scratch主页:https://scratch.mit.edu/ Scratch的下载与安装: 首先下载并安装A ...

  7. 高级Java程序员的技术进阶之路

      据不完全统计,截至目前(2017.07)为止,中国Java程序员的数量已经超过了100万.而且,随着IT培训业的持续发展和大量的应届毕业生进入社会,Java程序员面临的竞争压力越来越大.那么,作为 ...

  8. echarts的部署和使用

    echarts是百度开发的一款商业级.开源免费的前端图表组件,具体可访问其主页:http://echarts.baidu.com/ echarts目前已经发布了2.0版本,使用起来非常的方便,并且效果 ...

  9. FileInputStreamTest

    package JBJADV003;import java.io.FileNotFoundException;import java.io.IOException;import java.io.Inp ...

  10. # nodejs模块学习： express 解析

    # nodejs模块学习: express 解析 nodejs 发展很快,从 npm 上面的包托管数量就可以看出来.不过从另一方面来看,也是反映了 nodejs 的基础不稳固,需要开发者创造大量的轮子 ...