![](https://img-blog.csdnimg.cn/20190918140129601.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Semantic UI
文章平均质量分 75
Semantic UI
梁云亮
电 话:13264494458
微 信:13264494458
扣 扣:369950806
展开
-
Semantic UI 之 网络请求
页面框架代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>搜索</title> <link rel="stylesheet" href="semantic-ui/semantic/dist/semantic.min.css"> <script type=原创 2020-08-13 11:02:30 · 496 阅读 · 0 评论 -
Semantic UI 之 遮罩层
页面代码结构页面代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>遮罩层</title> <link rel="stylesheet" href="semantic-ui/semantic/dist/semantic.min.css"> <scrip原创 2020-08-12 15:33:41 · 636 阅读 · 0 评论 -
Semantic UI 之 手风琴 accordion
网页代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>手风琴</title> <link rel="stylesheet" href="semantic-ui/semantic/dist/semantic.min.css"> <script type="原创 2020-08-12 14:36:37 · 505 阅读 · 0 评论 -
Semantic UI 之 网格 grid
Semantic UI 在宽度上将网页分成16份准备工作本博客网页的代码框架为:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>信息</title> <link rel="stylesheet" href="semantic-ui/semantic.min.css">原创 2020-08-12 14:01:13 · 818 阅读 · 0 评论 -
Semantic UI 之 统计视图 statistic
网页代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>统计信息</title> <link rel="stylesheet" href="semantic-ui/semantic/dist/semantic.min.css"> <script type=原创 2020-08-12 10:49:25 · 415 阅读 · 0 评论 -
Semantic UI 之 条目 item
网页代码在网页中添加两个条目,结构如下所示:具体代码:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Item</title> <link rel="stylesheet" href="semantic-ui/semantic/dist/semantic.min.css">原创 2020-08-12 10:31:36 · 554 阅读 · 0 评论 -
Semantic UI 之 动态 feed
Feed:常用来描述用户一系列的动作。网页代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>feed</title> <link rel="stylesheet" href="semantic-ui/semantic/dist/semantic.min.css">原创 2020-08-12 00:28:41 · 332 阅读 · 0 评论 -
Semantic UI 之 评论 commnet
网页代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>评论</title> <link rel="stylesheet" href="semantic-ui/semantic/dist/semantic.min.css"> <script type="t原创 2020-08-12 00:07:12 · 367 阅读 · 0 评论 -
Semantic UI 之 卡片 card
网页代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>卡片</title> <link rel="stylesheet" href="semantic-ui/semantic/dist/semantic.min.css"> <script type="t原创 2020-08-11 23:14:14 · 496 阅读 · 0 评论 -
Semantic UI 之 加载器 loader
网页源代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>加载器</title> <link rel="stylesheet" href="semantic-ui/semantic/dist/semantic.min.css"> <script type=原创 2020-08-11 22:48:58 · 407 阅读 · 0 评论 -
Semantic UI 之 显示 reveal
页面代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>显示</title> <link rel="stylesheet" href="semantic-ui/semantic/dist/semantic.min.css"> <script type="t原创 2020-08-11 22:37:44 · 282 阅读 · 0 评论 -
Semantic UI 之 步骤 step
普通步骤<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>步骤</title> <link rel="stylesheet" href="semantic-ui/semantic/dist/semantic.min.css"> <script type="t原创 2020-08-11 22:25:49 · 463 阅读 · 0 评论 -
使用 BrowserSync 实现网页实时刷新
简介Browsersync 能让浏览器实时、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面。更重要的是Browsersync可以同时在PC、平板、手机等设备下进项调试。使用它将提高您30%的工作效率。browser-sync 控制台的入口:http://localhost:3001安装启动第一步:安装 Node.js第二步:安装 BrowserSync命令:npm install -g browser-sync检查是否安装成功:browser原创 2020-08-11 15:17:55 · 609 阅读 · 0 评论 -
Semantic UI入门
安装Semantic UIsemantic UI可以有两种方式安装一种是直接下载压缩包,解压后调用就可以使用了;另一种方式是用gulp进行安装。用gulp安装的优点是可以自己修改sementic ui中的样式,这样就更灵活一点,而最简化安装方式下不能修改,只能用默认样式。要先安装gulp,而安装gulp是NPM的一个模块,所以需要先安装NPM,而NPM又是node.js的一个模块,所以,就需要安装node.js, 所以:第一步:安装node.js,提示:官网有两个版本可以选择,最好是选LTS版本,原创 2020-08-11 14:46:58 · 3012 阅读 · 0 评论 -
Semantic UI 之 信息 message
网页代码框架<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>信息</title> <link rel="stylesheet" href="semantic-ui/semantic.min.css"> <script type="text/javascri原创 2020-08-11 12:48:20 · 563 阅读 · 0 评论 -
Semantic UI 之 表单信息提示
网页代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>表单的状态</title> <link rel="stylesheet" href="semantic-ui/semantic.min.css"> <script type="text/javascr原创 2020-08-11 12:04:53 · 634 阅读 · 0 评论 -
Semantic UI 之 表单 form
网页代码框架<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>表单</title> <link rel="stylesheet" href="semantic-ui/semantic.min.css"> <script type="text/javascri原创 2020-08-11 11:58:45 · 1017 阅读 · 0 评论 -
Semantic UI 之 菜单 menu
网页代码<!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原创 2020-08-11 11:18:00 · 1672 阅读 · 0 评论 -
Semantic UI 之 表格 table
简单的表格<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>图片</title> <link rel="stylesheet" href="semantic-ui/semantic.min.css"> <script type="text/javascrip原创 2020-08-10 21:21:23 · 978 阅读 · 0 评论 -
Semantic UI 之 选项卡 tab
网页代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>选项卡</title> <link rel="stylesheet" href="semantic-ui/semantic.min.css"> <script type="text/javascrip原创 2020-08-10 18:51:14 · 942 阅读 · 0 评论 -
Semantic UI 之 侧边栏 sidebar
页面代码<!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原创 2020-08-10 18:12:02 · 1497 阅读 · 0 评论 -
Semantic UI 之 评分组件 rating
页面代码<!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原创 2020-08-10 17:45:27 · 500 阅读 · 0 评论 -
Semantic UI 之 提示框 popup
网页代码:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>进度条</title> <link rel="stylesheet" href="semantic-ui/semantic.min.css"> <script type="text/javascri原创 2020-08-10 17:33:54 · 1332 阅读 · 0 评论 -
Semantic UI 之 对话框 modal
简单对话框<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>进度条</title> <link rel="stylesheet" href="semantic-ui/semantic.min.css"> <script type="text/javascri原创 2020-08-10 17:30:38 · 1340 阅读 · 0 评论 -
Semantic UI 之 立体转换 Shape
第一步:创建项目添加JQuery和Semantic UI包、创建shape.html页面:第二步:shape.html页面<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Shape</title> <link rel="stylesheet" href="semantic-ui原创 2020-08-10 16:11:24 · 309 阅读 · 0 评论 -
Semantic UI 之 进度条 progress
第一步:创建项目添加JQuery和Semantic UI包、创建progress.html页面:第二步:progress.html页面<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>进度条</title> <link rel="stylesheet" href="semanti原创 2020-08-10 15:18:30 · 492 阅读 · 0 评论 -
Semantic UI 之 下拉菜单 dropdown
第一步:创建项目添加JQuery和Semantic UI包、创建dropdown.html页面:第二步:dropdown.html页面<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>分段</title> <link rel="stylesheet" href="semantic原创 2020-08-10 14:41:29 · 2770 阅读 · 0 评论 -
Semantic UI 之 图标 icon
第一步:创建项目添加JQuery和Semantic UI包、创建icon.html页面:第二步:icon.html页面<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>标签</title> <link rel="stylesheet" href="semantic-ui/sema原创 2020-08-09 03:28:43 · 1935 阅读 · 0 评论 -
Semantic UI 之 列表 list
第一步:创建项目添加JQuery和Semantic UI包、创建list.html页面:第二步:list.html页面<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>分段</title> <link rel="stylesheet" href="semantic-ui/sema原创 2020-08-09 03:11:12 · 532 阅读 · 0 评论 -
Semantic UI 之 标签 label
第一步:创建项目添加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/se原创 2020-08-09 02:43:05 · 870 阅读 · 0 评论 -
Semantic UI 之 分段 segment
第一步:创建项目添加JQuery和Semantic UI包、创建segment.html页面:第二步:segment.html页面<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>分段</title> <link rel="stylesheet" href="semantic-u原创 2020-08-09 02:01:21 · 1623 阅读 · 0 评论 -
Semantic UI 之 标题 title
第一步:创建项目添加JQuery和Semantic UI包、创建title.html页面:第二步:title.html页面<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>标题</title> <link rel="stylesheet" href="semantic-ui/se原创 2020-08-09 01:29:52 · 315 阅读 · 0 评论 -
Semantic UI 之 图片 image
第一步:创建项目添加JQuery和Semantic UI包、创建image.html页面:第二步:image.html页面<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>按钮</title> <link rel="stylesheet" href="semantic-ui/se原创 2020-08-08 17:17:04 · 721 阅读 · 0 评论 -
Semantic UI 之 输入框 input
第一步:创建项目添加JQuery和Semantic UI包、创建input.html页面:第二步:container.html页面在container.html页面中引入样式文件和JS文件<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>按钮</title> <link rel原创 2020-08-08 16:50:26 · 935 阅读 · 0 评论 -
Semantic Ui 之 容器 container
第一步:创建项目添加JQuery和Semantic UI包、创建container.html页面:第二步:container.html页面<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>容器</title> <link rel="stylesheet" href="semant原创 2020-08-08 16:14:32 · 1067 阅读 · 0 评论 -
Semantic UI 之 按钮 button
第一步:创建项目添加JQuery和Semantic UI包、创建button.html页面:第二步:button.html页面在button.html页面中引入样式文件和JS文件<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>按钮</title> <link rel="sty原创 2020-08-08 15:56:45 · 1174 阅读 · 0 评论