9.1 定义基础的标题样式

  在Semantic-UI中定义了5种标题样式,h1~h5。

示例:基础样式定义

<h1 class="ui header">一级标题</h1>
<h2 class="ui header">二级标题</h2>
<h3 class="ui header">三级标题</h3>
<h4 class="ui header">四级标题</h4>
<h5 class="ui header">五级标题</h5>

示例:定义不同大小的标题

<h3 class="ui tiny header">文本大小对比</h3>
<h3 class="ui small header">文本大小对比</h3>
<h3 class="ui large header">文本大小对比</h3>
<h3 class="ui huge header">文本大小对比</h3>

  通过代码可以发现,此时的操作会根据字体大小设置的不同来决定标题文字的大小。

9.2 图标与标题样式

  咋看Semantic-UI中可以将图标与标题结合使用。

示例:定义图标与标题结合

<div class="ui icon header">
<i class="icon setting"></i>
<div class="content">内容设置<div class="sub header">关于内容设置的描述信息</div></div>
</div>

示例:定义图片与标题结合

<div class="ui header">
<img class="ui image" src="../images/pic.png" alt="">
<div class="content">学校简介</div>
</div>

9、Semantic-UI之标题的更多相关文章

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

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

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

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

  3. Semantic UI 中文参考手册

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

  4. 修改 Semantic UI 的默认字体

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

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

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

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

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

  7. Semantic UI基础使用教程

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

  8. Semantic UI中的验证控件的事件的使用

    1.Semantic UI中的验证控件,功能挺不错的,中文官网的文档写的都比较详细了,我再这里就不再进行重复了,主要是想说一下它的事件的使用方法,这个可能有部分朋友刚开始接触的时候不太了解 注意看这几 ...

  9. semantic UI first web

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

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

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

随机推荐

  1. C++函数及参数

    传值->传递的是数据副本(结构.普通数据类型数据) 传地址->传递的是数据变量的地址(数组等) 传值的缺点是需要复制数据副本,数据量大可能增加内存需求,降低系统运行速度; 传地址也有传地址 ...

  2. Dijkstra算法的另一种证明

    按:今天看Tanenbaum的计算机网络时讲到了Dijkstra算法.关于算法的正确性,<算法导论>给出了严格的证明.CLRS的证明基于一个通用的框架,非常清晰.今天只是随意想想是否有其他 ...

  3. Rhythmk 一步一步学 JAVA (18) Axis2 创建 WebService

    一 > 环境配置 1.下载Axis2: 目前版本为 1.6.2 下载地址: http://axis.apache.org/axis2/java/core/ 下载 axis2-1.6.2-bin. ...

  4. 查看DNS服务器

    电脑右键查看本地连接 查看状态 然后看DNS

  5. 【Django】uWSGI和Gunicorn【转】

    因为nginx等优秀的开源项目,有不少本来不是做服务器的同学也可以写很多服务器端的程序了.但是在聊天中会发现,大家虽然写了不少代码,但是对wsgi是什么,gunicorn是什么,反向代理又是什么并不了 ...

  6. C++提高编译与链接速度的资料

    1,https://blog.csdn.net/lihao21/article/details/47610309 2,https://www.zhihu.com/question/37330979 3 ...

  7. MySQL数据库篇之索引原理与慢查询优化之一

    主要内容: 一.索引的介绍 二.索引的原理 三.索引的数据结构 四.聚集索引与辅助索引 五.MySQL索引管理 六.测试索引 七.正确使用索引 八.联合索引与覆盖索引 九.查询优化神器--explai ...

  8. Kafka Zookeeper 基本命令示例

    Kafka 新建Topic bin/kafka-topics. --replication-factor --partitions --topic my-topic 查看已存在Topic列表 bin/ ...

  9. windows server R2 密钥

    一.win2012r2激活码 永久激活 Volume版 Windows Server 2012 R2 Datacenter数据中心版: [Key]:TVNTG-VFJQ3-FQXFP-DVCP6-D3 ...

  10. 存储过程中使用事务和try catch

    一.存储过程中使用事务的简单语法 在存储过程中使用事务时非常重要的,使用数据可以保持数据的关联完整性,在Sql server存储过程中使用事务也很简单,用一个例子来说明它的语法格式: 代码 : Cre ...