官方文档：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. Jquery(一) 初识Jquery，简单使用Jquery。

    距离上一篇博文好像隔了很久的时间了额.好像是堕落了一阵子,前些时间去杭州找工作,被租房的事情给搞懵逼了,然后就回来了,回来在修炼一个月在出去奋斗把!加油,这两天把jquery,easyui和boots ...

  2. 1.Smarty的下载安装

    下载地址:https://github.com/smarty-php/smarty/tree/v3.1.29 官网:smarty.net 下载解压后的目录:

  3. 信息安全的核心：CIA三元组 | 安全千字文系列1

    我们总是在说信息安全管理,那么信息安全管理到底是在管什么?我们要如何定义信息安全? 这里就要引出信息安全最基本的概念:CIA三元组. 这里的 C,指的是Confidentiality机密性 这里的 I ...

  4. PGI Compiler for OpenACC Output Syntax Highlighting

    PGI Compiler for OpenACC Output Syntax Highlighting When use the PGI compiler to compile codes with ...

  5. 使用base64提升视觉效果体验

    最近在做一个微信端的小项目,前端代码写完后,就放在手机端测试,没什么问题,但是页面在加载和渲染时的效果却让人有些不爽,虽然是个小项目,我大可不必做这些,但是看着页面的闪动,就忍不住想做些什么. 先说说 ...

  6. H3CNE实验：配置VLAN和VLAN端口

    配置准备数据: | 设备名称 | IP地址 | VLAN网关 | 接口 | VLAN | |---------------|--------------|----------------|------ ...

  7. iOS 微信消息拦截插件系列教程－附录（服务端成果展示）

    微信iOS消息拦截插件教程 标签: 越狱开发 背景介绍 本教程所有内容免费 本教程来源于一次知识分享,如果有需要了解更多的 请联系QQ:480071411 iOS逆向高级开发群:375024882 服 ...

  8. Watson Explorer Analytical Components 1

    Introduction: IBM Watson Explorer Analytical Components(AC) which is part of the IBM Watson Explorer ...

  9. vue2.0设置proxyTable使用axios进行跨域请求

    这里请求的是知乎日报的api,由@izzyleung这位大神提供的,这是github地址. 在vue-cli构建的项目中先安装axios npm install axios -S 这里暂不考虑用vue ...

  10. 微信公众平台——token验证php版

    这几天开始接触微信公众号的开发,注册这些就不说了,我是先弄了个测试号用着.进入正题 所谓token验证,其实就是微信服务器向自己要用到的服务器url发送一段数据,其中有一个参数$_GET['echho ...