分割线即原生html中的<hr>标签。不过semantic-ui中将<hr>美化了一下下。

1、基础分割线

  需要注意的是分割线只能使用div标签和p标签,不能使用span标签。

<div class="ui divider"></div>
<p class="ui divider"></p>

  

2、定义水平线

  经常看到水平线的中间有文字,其实可以使用下面代码实现,但是要注意class中加horizontal,并且要在水平线中间显示的文字写在中间即可。

<div class="ui horizontal divider">or</div>
<p class="ui horizontal divider">center</p>
<div class="ui horizontal divider">end</div>

3、定义竖线

<div class="ui vertical divider">or</div>

  

semantic-ui 分割线的更多相关文章

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

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

  2. Semantic UI 中文参考手册

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

  3. 修改 Semantic UI 的默认字体

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

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

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

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

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

  6. Semantic UI基础使用教程

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

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

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

  8. semantic UI first web

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

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

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

  10. semantic ui框架学习笔记一

    面包屑导航 面包屑导航经常用于多个栏目下的内容管理,是web页面里比较常用的组合.例如: <div class="ui breadcrumb"> <a class ...

随机推荐

  1. February 28th, 2018 Week 9th Wednesday

    Knowledge makes humble, ignorance makes proud. 博学使人谦逊,无知使人骄傲. Humility is not equal with being passi ...

  2. Linux 基本操作 (day2)

    一.用户的基本操作 1.添加和删除用户(管理员): useradd  用户名: useradd taibai passwd  用户名: passwd taibai [root@localhost ~] ...

  3. JSONCkecker(C语言版本)

    /* JSON_checker.h */ typedef struct JSON_checker_struct { int valid; int state; int depth; int top; ...

  4. Matplotlib 绘图 用法

    Matplotlib基础知识 一.Matplotlib基础知识 Matplotlib中的基本图表包括的元素 x轴和y轴 axis 水平和垂直的轴线 x轴和y轴刻度 tick 刻度标示坐标轴的分隔,包括 ...

  5. 机器学习算法总结(四)——GBDT与XGBOOST

    Boosting方法实际上是采用加法模型与前向分布算法.在上一篇提到的Adaboost算法也可以用加法模型和前向分布算法来表示.以决策树为基学习器的提升方法称为提升树(Boosting Tree).对 ...

  6. Leetcode:263

    编写一个程序判断给定的数是否为丑数.丑数就是只包含质因数 2, 3, 5 的正整数.示例 1:输入: 6输出: true解释: 6 = 2 × 3示例 2:输入: 8输出: true解释: 8 = 2 ...

  7. 【转】wamp 3.0.6(apache 2.4.23) 403 forbidden 解决办法

    最近为了使用laraval框架,将wamp 升级到了比较高的版本,相应的apache也升级到了 2.4.23. larval是使用的挺好的,原来的apache倒是出现了问题:同一个局域网内,别人机器不 ...

  8. ssh原理图解

    SSH(Secure Shell)是一种能够以安全的方式提供远程登录的协议,也是目前远程管理Linux系统的首选方式.在此之前,远程登录一般常用FTP和Telnet,但是它们以明文的形式在网络中传输账 ...

  9. Keepalive工作原理

    Keepalive工作原理 1.1软件介绍 Keepalived软件起初是专为LVS负载均衡软件设计的,用来管理并监控LVS集群系统中各个服务节点的状态,后来又加入了可以实现高可用的VRRP功能.因此 ...

  10. Spring Security(二十五):7. Sample Applications

    There are several sample web applications that are available with the project. To avoid an overly la ...