semantic-ui 分段
分段:用于创建一组相关联的内容。
1、创建一个基础的分段
在class中加一个segment的class即可
<div class="ui segment">
<p>this is test in segment</p>
</div>

2、使分段突出
注意不要加active,应该加一个raised,和segment配合使用。
<div class="ui raised segment">
<p>this is test in segment</p>
</div>

3、堆叠样式的分段
只有一个分段,但是看起来分段下面还有很多分段。需要加上tall stacked,tall修饰数量多
<div class="ui tall stacked segment">
<p>this is test in segment</p>
</div>

4、段落格式化成一堆页面
基础样式上加piled即可。
<div class="ui tall piled segment">
<p>this is test in segment</p>
</div>

semantic-ui 分段的更多相关文章
- 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. ...
- semantic ui框架学习笔记一
面包屑导航 面包屑导航经常用于多个栏目下的内容管理,是web页面里比较常用的组合.例如: <div class="ui breadcrumb"> <a class ...
随机推荐
- Angular路由与多视图综合案例
Ajax请求存在的几个问题 (1)Ajax请求不会留下History 记录,会导致浏览器后退按钮失效 (2)用户无法直接通过URL进入应用中的指定页面(保存书签.链接分享给朋友) (3)Ajax对SE ...
- python while and for
一.while循环 1.格式: while 条件: while循环体 else: 循环正常跳出执行的语句 2.实例: index= : : break #直接跳出while ,不会执行else els ...
- 转 jQuery中的$.extend方法来扩展JSON对象
$.extend方法可以扩展JSON对象,用一个或多个其他对象来扩展一个对象,返回被扩展的对象. 例一 合并 settings 和 options,修改并返回 settings var setting ...
- linux学习笔记整理(二)
第三章 Linux基本命令操作本节所讲内容:3.1 Linux终端介绍 Shell提示符 Bash Shell基本语法3.2 基本命令的使用:ls.pwd.cd.history3.3 查看系统和BIO ...
- Unicode与UTF-8关系
Unicode字符集合 Unicode 也称为 UCS(Universal Coded Character Set:国际编码字符集合) 是一个字符集合. 对世界上大部分的文字系统进行了整理,编码,使电 ...
- HashMap 1.8
1.重要参数 和1.7中的相同,不在赘述.变化之处在于table不在是Entry类型而是Node类型,即1.8中拉链法中的节点类型变为Node.但其实结构并没有发生很大的变化,1.8中的HashMap ...
- PHP设计模式_工厂模式
个人理解工厂类相当于平时用的基类,只需要把类new一次然后付给一个变量,以后直接引入基类调用变量使用类里的方法即可 了解 工厂模式,工厂方法或者类生成对象,而不是在代码中直接new. 使用工厂模式,可 ...
- 004_后端js编写工具
一.框架同事用的后端调试用的工具 google=>"webpack dev server" https://webpack.github.io/docs/webpack-de ...
- 05 python 初学(列表)
列表,有点像c++里的数组 # _author: lily # _date: 2018/12/16 mylist = ["xiaohong", "xiaogang&quo ...
- rabbitmq官方的六种工作模式
1.RabbitMq1.1介绍RabbitMQ是一个消息代理:它接受并转发消息.你可以把它当成一个邮局:当你想邮寄信件的时候,你会把信件放在投递箱中,并确信邮递员最终会将信件送到收件人的手里.在这个例 ...