9、Semantic-UI之标题
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之标题的更多相关文章
- Semantic UI 语义化设计的前端框架
UI是Web的灵魂!Semantic UI是一款语义化设计的前端框架,为攻城师而制作的可复用的开源前端框架. 特性 弃用有歧义的表述 Semantic是围绕自然交流语言而架构的,这使得开发更加直观(易 ...
- Semantic UI – 完全语义化的前端界面开发框架
Semantic UI 是一个 UI 库,使前端开发更简单,更容易学习.Semantic UI 介绍了许多界面元素.在大多数情况下,只有你需要的元素建立一个自定义的构建可能是最好的. UI 组件分为四 ...
- Semantic UI 中文参考手册
一个拥有友好词汇表的前端框架,完全语义化的前端界面开发框架,为一组开发人员之间共享UI元素配备了规格.使用的词汇(类和ID)相比其它替代品更加简洁,从而降低了学习曲线.有许多HTML元素,UI元素和场 ...
- 修改 Semantic UI 的默认字体
Semantic UI 默认使用的是谷歌提供的字体,并且是直接使用了谷歌的官方链接.由于大家都知道的原因,谷歌网站在国内访问速度很差,甚至根本无法访问,还有就是可能会在离线环境下使用 Semantic ...
- 160908、前端开发框架Semantic UI
简介 网页开发中,CSS控制网页样式.作为测试开发工程师,我个人不太擅长手写CSS.样式微调.兼容浏览器等工作,所以我选择使用成熟的前端框架,可以快速开发出样式美观的网站,也解决了大部分浏览器兼容问题 ...
- 目前几款基于html5的前端框架:如Bootstrap、Foundation、Semantic UI 、Amaze UI
Bootstrap是由Twitter在2011年8月推出的开源WEB前端框架,集合CSS 和HTML,使用了最新的浏览器技术,为快速WEB开发提供了一套前端工具包,包括布局.网格.表格.按钮.表单.导 ...
- Semantic UI基础使用教程
自己今后要使用Semantic UI进行项目开发了,一步步的记录下来,供大家参考,也让自己去简单的学习一下,有空了就会更新一点东西,大家有什么问题可以相互交流一下,文采不是很好,希望大家要多多见谅,这 ...
- Semantic UI中的验证控件的事件的使用
1.Semantic UI中的验证控件,功能挺不错的,中文官网的文档写的都比较详细了,我再这里就不再进行重复了,主要是想说一下它的事件的使用方法,这个可能有部分朋友刚开始接触的时候不太了解 注意看这几 ...
- semantic UI first web
官方文档:https://semantic-ui.com/introduction/getting-started.html semantic UI: SemanticUI是一款语义化设计的前端开源 ...
- webpack 解决 semantic ui 中 google fonts 引用的问题
semantic ui css 的第一行引用了 google web font api,由于不可告人而又众所周知的原因,这条链接在国内无法访问: @import url('https://fonts. ...
随机推荐
- REST理解
内容摘自:<Spring REST> REST是什么:REST是一种软件架构风格,它由建立规模可扩展的web服务的最佳实践和指南构成. 资源: 一切可被访问和操作的东西.资源标识:URI( ...
- 分类和逻辑回归(Classification and logistic regression)
分类问题和线性回归问题问题很像,只是在分类问题中,我们预测的y值包含在一个小的离散数据集里.首先,认识一下二元分类(binary classification),在二元分类中,y的取值只能是0和1.例 ...
- 在php中设置PHPSESSID的httponly属性
ThinkPHP3.0完全开发手册 19.1 Session: 支持默认情况下,初始化之后系统会自动启动session. 如果不希望系统自动启动session的话,可以设置SESSION_AUTO_S ...
- scrapy核心组件工作流程和post请求
一 . 五大核心组件的工作流程 引擎(Scrapy)用来处理整个系统的数据流处理, 触发事务(框架核心) 调度器(Scheduler)用来接受引擎发过来的请求, 压入队列中, 并在引擎再次请求的时候返 ...
- 在线浏览office 文件
http://blog.csdn.net/binyao02123202/article/details/20051683 [Asp.net]常见word,excel,ppt,pdf在线预览方案,有图有 ...
- application-defined exception
dataSnap服务器,客户端调用的时候写错了一句话, SQLConnection1->CloneConnection(); 改为 SQLConnection1->Close(); 就好了 ...
- 引用rtmp编译报错:rtmp.obj : error LNK2001: 无法解析的外部符号 __imp__timeGetTime@0
如题vs下引用librtmp的时候报错:rtmp.obj : error LNK2001: 无法解析的外部符号 __imp__timeGetTime@0 在link 里加入 winmm.lib 就可以 ...
- Unity游戏语音(富文本消息)解决方案GVoice
腾迅云-GVoice https://www.qcloud.com/document/product/556/7673 集成1-2天内可搞定,博主亲测 Unity5.4.4f1 今天又试了下语音转文字 ...
- 从顶端插入,滚动展示(Demo):
新闻滚动,从顶端插入: <!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11 ...
- ubuntu18桌面卡死解决方法
1 直接 alt+f2 会弹出个输入框 里边输入 小写 r 回车 这样会重启你的gnome-shell 桌面环境 2 ctrl+f3 进入终端 黑白屏环境 top 一下 你会发现 gnome-shel ...