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. ...
随机推荐
- C++函数及参数
传值->传递的是数据副本(结构.普通数据类型数据) 传地址->传递的是数据变量的地址(数组等) 传值的缺点是需要复制数据副本,数据量大可能增加内存需求,降低系统运行速度; 传地址也有传地址 ...
- Dijkstra算法的另一种证明
按:今天看Tanenbaum的计算机网络时讲到了Dijkstra算法.关于算法的正确性,<算法导论>给出了严格的证明.CLRS的证明基于一个通用的框架,非常清晰.今天只是随意想想是否有其他 ...
- Rhythmk 一步一步学 JAVA (18) Axis2 创建 WebService
一 > 环境配置 1.下载Axis2: 目前版本为 1.6.2 下载地址: http://axis.apache.org/axis2/java/core/ 下载 axis2-1.6.2-bin. ...
- 查看DNS服务器
电脑右键查看本地连接 查看状态 然后看DNS
- 【Django】uWSGI和Gunicorn【转】
因为nginx等优秀的开源项目,有不少本来不是做服务器的同学也可以写很多服务器端的程序了.但是在聊天中会发现,大家虽然写了不少代码,但是对wsgi是什么,gunicorn是什么,反向代理又是什么并不了 ...
- C++提高编译与链接速度的资料
1,https://blog.csdn.net/lihao21/article/details/47610309 2,https://www.zhihu.com/question/37330979 3 ...
- MySQL数据库篇之索引原理与慢查询优化之一
主要内容: 一.索引的介绍 二.索引的原理 三.索引的数据结构 四.聚集索引与辅助索引 五.MySQL索引管理 六.测试索引 七.正确使用索引 八.联合索引与覆盖索引 九.查询优化神器--explai ...
- Kafka Zookeeper 基本命令示例
Kafka 新建Topic bin/kafka-topics. --replication-factor --partitions --topic my-topic 查看已存在Topic列表 bin/ ...
- windows server R2 密钥
一.win2012r2激活码 永久激活 Volume版 Windows Server 2012 R2 Datacenter数据中心版: [Key]:TVNTG-VFJQ3-FQXFP-DVCP6-D3 ...
- 存储过程中使用事务和try catch
一.存储过程中使用事务的简单语法 在存储过程中使用事务时非常重要的,使用数据可以保持数据的关联完整性,在Sql server存储过程中使用事务也很简单,用一个例子来说明它的语法格式: 代码 : Cre ...