官方文档：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. 【LeetCode】60. Permutation Sequence

    题目: The set [1,2,3,…,n] contains a total of n! unique permutations. By listing and labeling all of t ...

  2. day4作业小代码练习

    登录模块: 我们无论上那个网站,经常遇到这样的情况,让我们登录这个网站,流程图如下: 思路: 1.当我们登录网站的时候,我们首先会输入用户名,这个时候,有些网站会提醒我们用户名是否存在,如果我们输入的 ...

  3. zookeeper初试

    实验环境: os-platform: windows7 x64 jdk: 1.7 参考文档: http://www.ibm.com/developerworks/cn/opensource/os-cn ...

  4. MyBatis源码解析【6】SqlSession运行

    前言 这个分类比较连续,如果这里看不懂,或者第一次看,请回顾之前的博客 http://www.cnblogs.com/linkstar/category/1027239.html 经过之前的学习我们知 ...

  5. MyBatis的关联关系 一对一 一对多 多对多

    一对一示例 一个妻子对应一个丈夫 数据库表设计时 在妻子表中添加一个丈夫主键的作为外键 1 对应的JavaBean代码虽然在数据库里只有一方配置的外键,但是这个一对一是双向的关系. Husband实体 ...

  6. 编写高质量代码改善C#程序的157个建议：第17个建议之多数情况下使用foreach进行循环遍历

    今天是我看<编写高质量代码:改善C#程序的157个建议>第二遍的时候了,看完这本书的确是受益匪浅,学到了很多东西,也明白了很多道理. 里面的代码我每个都调试了一遍,有时候是有些出入的,可能 ...

  7. 51nod_1417:天堂里的游戏

    题目链接: https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1417 假设 ans=n/m,C=(A+B)/2 若出正面 ...

  8. select可选择、同时可自行输入

    HTML部分: <li class="bl-form-group"> <label>诊断医生</label> <div class=&qu ...

  9. （转）Linux下查看文件和文件夹大小 删除日志

    场景:在sts中执行自动部署时候maven提示No space left on device错误,后来经检查发现是磁盘空间满了,用下面的方法分析发现tomcat下面的logs目录占用了很大的空间,删除 ...

  10. 【SignalR学习系列】6. SignalR Hubs Api 详解（C# Server 端）

    如何注册 SignalR 中间件 为了让客户端能够连接到 Hub ,当程序启动的时候你需要调用 MapSignalR 方法. 下面代码显示了如何在 OWIN startup 类里面定义 SignalR ...