第一步：创建项目

添加JQuery和Semantic UI包、创建label.html页面：

第二步：label.html页面

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>分段</title><link rel="stylesheet" href="semantic-ui/semantic.min.css"><script type="text/javascript" src="js/jquery3.3.1.js"></script><script type="text/javascript" src="semantic-ui/semantic.min.js"></script></head><body></body>
</html>

标签的样式

 <h2>标签的样式</h2><div class="ui label">标签</div><div class="ui red label">带颜色的标签</div><div class="ui basic label">基本的标签</div><div class="ui large label">巨大的标签</div><div class="ui tag label">带有标记的标签</div><div class="ui circular label">1</div><div class="ui empty circular label"></div><div class="ui pointing label">带向上指示箭头的标签</div><div class="ui left pointing label">带向左指示箭头的标签</div><div class="ui red empty circular label"></div><div class="ui teal circular label">31</div>

效果：

标签的组合

<h2>标签的组合</h2>
<div class="ui label"><i class="mail icon"></i>369950806@qq.com
</div>
<div class="ui image label"><img src="imgs/lyl.jpg" alt="">梁云亮
</div>
<div class="ui image label"><img src="imgs/lyl.jpg" alt="">梁云亮<div class="detail">好好学习，天天向上！</div>
</div>
<div class="ui image label"><img src="imgs/lyl.jpg" alt="">梁云亮<i class="delete icon"></i>
</div><div class="ui segment"><div class="ui top left attached label">梁云亮</div><img src="imgs/lyl.jpg" alt="" class="ui small image">
</div><!--将标签显示为提示的页脚信息-->
<div class="ui compact menu"><a href="#" class="item"><i class="mail icon"></i>梁云亮<div class="ui red floating label">30</div></a>
</div><div class="ui small image"><a href="#" class="ui right corner label"><i class="heart red icon"></i></a><img src="imgs/lyl.jpg" class="ui image">
</div><div class="ui container"><div class="ui segment"><a href="#" class="ui red ribbon label">优秀学员</a><span>梁云亮</span><p>梁云亮长期从事大数据、JavaSE、JavaEE、数据库和Android等方面的研发及教育工作,多年下来积累了丰富的开发经验和教学经验:先后编写了Java、数据库、Jsp、静态网页开发、...</p></div>
</div>

效果：

Semantic UI 之标签 label相关推荐

semantic ui html5,css中什么是Semantic UI框架？
什么是Semantic UI框架? Semantic UI是一个用户友好度爆表的响应式前端框架,具备3000多个主题变量和50多个UI组件,可以快速搭建漂亮的网页.Semantic UI还集成了许多第 ...
semantic ui框架学习笔记二
评论组件文档里的评论组件介绍的比较清晰.这里我就挑一个我喜欢的格式展示出来: <div class="ui comments"><h3 class=" ...
【项目实战】个人博客（SpringBoot，SSM，thymeleaf，Semantic UI）——从设计思路到部署一站式教学
一.前言 1.项目背景此项目并非原创,项目原型是李仁密老师的作品,具体的教学视频来自b站https://www.bilibili.com/video/BV1nE411r7TF,不过up主貌似也是搬运 ...
jsf tree组件_JSF UI组件标签属性示例教程
jsf tree组件 JSF provides a wide variety of ui component tags along with a long range of attributes. T ...
php ci框架后台管理,ci: 羽翼后台管理平台是一个简单的博客系统，后端基于CodeIgniter，前端基于Semantic UI 2.2.10...
羽翼后台管理平台(博客系统) 羽翼的由来羽翼的故事是9月20日的晚上,我突然就想到--造翼者小说.我通过自己构思不少的东西.羽毛代表着轻松.纯洁和神圣的:翼代表着升天和梦想,两者在一起的含义:带着一 ...
Semantic UI 之图标 icon
第一步:创建项目添加JQuery和Semantic UI包.创建icon.html页面: 第二步:icon.html页面 <!DOCTYPE html> <html lang=&q ...
Semantic UI入门
安装Semantic UI semantic UI可以有两种方式安装: 直接下载压缩包,解压后调用就可以使用了用gulp进行安装用gulp安装的优点是可以自己修改sementic ui中的样式,这 ...
Semantic UI 之网格 grid
Semantic UI 在宽度上将网页分成16份本博客对应的代码:Semantic UI示例代码准备工作本博客网页的代码框架为: <!DOCTYPE html> <html l ...
小tips：JS之按位取反，语法标签label，正则表达式中replace的0,1是什么？
JS按位取反 Javascript 按位取反运算符 (~) ,对一个表达式执行位非(求非)运算.如 ~1 = -2; ~2 = -3; 来看看~1的计算步骤: 将1(这里叫:原码)转二进制＝ 000 ...
semantic ui html5,Semantic UI ：安装 Semantic UI
对 Semantic UI 有兴趣可以参考宁皓网的 Semantic UI 课程包,订阅宁皓网就可以学习全部课程了. Semantic UI 是一套开源的 CSS 与 JavaScript 框架,提供 ...

Semantic UI 之标签 label

第一步：创建项目

第二步：label.html页面

标签的样式

标签的组合

Semantic UI 之标签 label相关推荐

最新文章

热门文章

Semantic UI 之 标签 label

第一步：创建项目

第二步：label.html页面

标签的样式

标签的组合

Semantic UI 之 标签 label相关推荐

最新文章

热门文章

Semantic UI 之标签 label

Semantic UI 之标签 label相关推荐