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. REST理解

    内容摘自:<Spring REST> REST是什么:REST是一种软件架构风格,它由建立规模可扩展的web服务的最佳实践和指南构成. 资源: 一切可被访问和操作的东西.资源标识:URI( ...

  2. 分类和逻辑回归(Classification and logistic regression)

    分类问题和线性回归问题问题很像,只是在分类问题中,我们预测的y值包含在一个小的离散数据集里.首先,认识一下二元分类(binary classification),在二元分类中,y的取值只能是0和1.例 ...

  3. 在php中设置PHPSESSID的httponly属性

    ThinkPHP3.0完全开发手册 19.1 Session: 支持默认情况下,初始化之后系统会自动启动session. 如果不希望系统自动启动session的话,可以设置SESSION_AUTO_S ...

  4. scrapy核心组件工作流程和post请求

    一 . 五大核心组件的工作流程 引擎(Scrapy)用来处理整个系统的数据流处理, 触发事务(框架核心) 调度器(Scheduler)用来接受引擎发过来的请求, 压入队列中, 并在引擎再次请求的时候返 ...

  5. 在线浏览office 文件

    http://blog.csdn.net/binyao02123202/article/details/20051683 [Asp.net]常见word,excel,ppt,pdf在线预览方案,有图有 ...

  6. application-defined exception

    dataSnap服务器,客户端调用的时候写错了一句话, SQLConnection1->CloneConnection(); 改为 SQLConnection1->Close(); 就好了 ...

  7. 引用rtmp编译报错:rtmp.obj : error LNK2001: 无法解析的外部符号 __imp__timeGetTime@0

    如题vs下引用librtmp的时候报错:rtmp.obj : error LNK2001: 无法解析的外部符号 __imp__timeGetTime@0 在link 里加入 winmm.lib 就可以 ...

  8. Unity游戏语音(富文本消息)解决方案GVoice

    腾迅云-GVoice https://www.qcloud.com/document/product/556/7673 集成1-2天内可搞定,博主亲测 Unity5.4.4f1 今天又试了下语音转文字 ...

  9. 从顶端插入,滚动展示(Demo):

    新闻滚动,从顶端插入: <!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11 ...

  10. ubuntu18桌面卡死解决方法

    1 直接 alt+f2 会弹出个输入框 里边输入 小写 r 回车 这样会重启你的gnome-shell 桌面环境 2 ctrl+f3 进入终端 黑白屏环境 top 一下 你会发现 gnome-shel ...