官方文档：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. MOF编译器无法连接VMI服务器。原因可能是语义错误的解决方案

    安装数据库时报错. 我这个是因为安装SQL SERVER时,没有卸载vs. 一般解决方法: WIN 7安装VS和SQL SERVER的顺序应该是先安装SQL SERVER 然后安装VS,当要重装SQL ...

  2. CSS自适应的占位符效果

    一种不错的自适应input效果,分享一下.html section : <div style="width:500px;height:500px;margin:300px auto;b ...

  3. 手机app微信支付后台处理流程

    第一步:客户在手机app确认订单,提交订单后,app将订单详情传给后台,后台将订单存入数据库,将存入数据库的id返回给app. 第二步:这时候手机端app会让客户选择哪种付款方式,我们做的是微信,所以 ...

  4. Java - 在WebService中使用Client调用三方的RestAPI

    背景 近期,由于项目的要求需要在自己的webservice中调用远程的WebAPI(Restful format).自己的webservice程序是用Java编码写的,所以需要在其中实现一个Clien ...

  5. 391.FANUC宏程序编程

    运算符 运算符由2个字母组成,用于两个值的比较,以决定它们是相等还是一个值小于或大于另一个值.注意,不能使用不等号 运算符 含义 EQ 等于(=) NE 不等于 GT 大于 GE 大于或等于 LT 小 ...

  6. Mysql连接出错问题

    1.java 提示:java.lang.ClassNotFoundException: com.mysql.jdbc.Driver 处理:导入mysql-connector-java-5.1.7-bi ...

  7. Oracle表生成JavaBean

    package com.batch.tabletojava import java.io.DataOutputStream; import java.io.File; import java.io.F ...

  8. Luogu 1006 传纸条 / NOIP 2008 传纸条（动态规划）

    Luogu 1006 传纸条 / NOIP 2008 传纸条(动态规划) Description 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个m ...

  9. 添加zabbix自动发现（监控多tomcat实例）

    说明 何为自动发现?首先我们监控多tomcat实例,如果一个个实例地添加或许可以完成当前需求.但是日后随着实例的增多,再手动一个个去添加就十分不方便了.这时候需要自动发现这个功能,来帮助我们自动添加监 ...

  10. 使用boost/property_tree进行XML操作

    之前一直用tinyxml来进行XML文件操作,刚刚接触的一个测试项目是使用boost操作的,虽然不清楚这两者的差异,但boost使用起来还挺方便的,所以简单整理一些关于boost解析和创建XML文件的 ...