Semantic UI
地址 http://www.semantic-ui.cn/elements/button.html
常用
一.
Element->Segment->Inverted
<div class="ui inverted segment"><p>I'm here to tell you something, and you will probably read me first.</p>
</div>
一个简单示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>first web</title><link rel="stylesheet" href="css/semantic.css" media="screen" title="no title" charset ="utf-8">
</head>
<body>
<div class="ui inverted black segment">Lorem ipsum dolor sit amet, consectetur adipisicing elit.Animi corporis culpa cupiditate iusto nostrum suscipit?Debitis harum incidunt nihil? At dicta dolores earum eligendi id magnam nisi quam rem, vitae?
</div>
<div class="ui inverted blue segment">Lorem ipsum dolor sit amet, consectetur adipisicing elit.Animi corporis culpa cupiditate iusto nostrum suscipit?Debitis harum incidunt nihil? At dicta dolores earum eligendi id magnam nisi quam rem, vitae?
</div>
<div class="ui inverted red segment">Lorem ipsum dolor sit amet, consectetur adipisicing elit.Animi corporis culpa cupiditate iusto nostrum suscipit?Debitis harum incidunt nihil? At dicta dolores earum eligendi id magnam nisi quam rem, vitae?
</div>
<div class="ui segment">Lorem ipsum dolor sit amet, consectetur adipisicing elit.Animi corporis culpa cupiditate iusto nostrum suscipit?Debitis harum incidunt nihil? At dicta dolores earum eligendi id magnam nisi quam rem, vitae?
</div></body>
</html>
效果如下
二.
我们注意到此时有圆角,阴影,相互之间还有缝隙,接下来用一下Vertical
<div class="ui inverted black vertical segment">Lorem ipsum dolor sit amet, consectetur adipisicing elit.Animi corporis culpa cupiditate iusto nostrum suscipit?Debitis harum incidunt nihil? At dicta dolores earum eligendi id magnam nisi quam rem, vitae?
</div>
三.
paded 由于semantic非常语义化,可以加一个very
,即very padded
<div class="ui inverted red vertical very padded segment">Lorem ipsum dolor sit amet, consectetur adipisicing elit.Animi corporis culpa cupiditate iusto nostrum suscipit?Debitis harum incidunt nihil? At dicta dolores earum eligendi id magnam nisi quam rem, vitae?
</div>
四.
container
<div class="ui Vertical segment">
<div class="ui container segment">Lorem ipsum dolor sit amet, consectetur adipisicing elit.Animi corporis culpa cupiditate iusto nostrum suscipit?Debitis harum incidunt nihil? At dicta dolores earum eligendi id magnam nisi quam rem, vitae?
</div>
<div class="ui container segment">Lorem ipsum dolor sit amet, consectetur adipisicing elit.Animi corporis culpa cupiditate iusto nostrum suscipit?Debitis harum incidunt nihil? At dicta dolores earum eligendi id magnam nisi quam rem, vitae?
</div>
</div>
五.
button
<button type="button" name="button" class="ui inverted blue button">Read more</button>
上述样式完整代码
<div class="ui container segment"><h1 class="ui header">First web</h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Cupiditate inventore reprehenderit voluptatibus. Aliquid, architecto aut, ea eligendi error illo iusto, libero maxime obcaecati odio omnis possimus rem repudiandae tenetur voluptatibus.</p><button type="button"name="button" class="ui inverted blue button">Read more</button></div>
六.
image
<div class="ui inverted vertical segment"><div class="ui image">![](img/background.jpg)</div>
</div>
七.
导航栏
<div class="ui fixed inverted menu"><a href="#" class="item">Home</a><a href="#" class="item">About</a><a href="#" class="item">Other</a></div>
八.
网格
先引用官网的一个例子,里面的每一个column用于设置比例,下面的即各占四分之一
<div class="ui grid"><div class="four wide column"></div><div class="four wide column"></div><div class="four wide column"></div><div class="four wide column"></div>
</div>
看一个具体例子,实现左边图片,右边文字,左右比例6:4
<div class="ui segment"><div class="ui grid"><div class="ten wide column"><div class="ui image">![](img/0.jpg)</div></div><div class="six wide column"><h2 class="ui header"><i class="icon star"></i>This is a title</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium accusantium tempora architecto eligendi laboriosam pariatur in, minus autem veritatis, quis dolore necessitatibus dolorem. Quisquam, porro, suscipit mollitia deserunt nulla repudiandae!</p></div></div></div>
为了方便观察,我截了小图
去ui segment
t中的线
如果仔细观察上面的图片,会发现有一根白线,此时我们可以用basic去除
<div class="ui basic segment">
九.
图标icon
将下载好的Semantic-UI-CSS-master
文件夹下的themes
拷贝至css
目录中,便可以在代码中引用
(更多http://www.semantic-ui.cn/elements/icon.html)
<i class="icon star"></i>
代码如下
<h2 class="ui header"><i class="icon star"></i>This is a title</h2>
最后加上footer
<div class="ui inverted vertical very padded segment"><div class="ui grid"><div class=" four wide column"><div class="ui inverted vertical padded text menu"><div class="item">Adress:CN</div><div class="item">Tel:10000000</div><div class="item">E-mail:1231231</div></div> </div>
复制四个
效果如下
Semantic UI相关推荐
- 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 html5,Semantic UI :安装 Semantic UI
对 Semantic UI 有兴趣可以参考宁皓网的 Semantic UI 课程包,订阅宁皓网就可以学习全部课程了. Semantic UI 是一套开源的 CSS 与 JavaScript 框架,提供 ...
- Semantic UI入门
安装Semantic UI semantic UI可以有两种方式安装: 直接下载压缩包,解压后调用就可以使用了 用gulp进行安装 用gulp安装的优点是可以自己修改sementic ui中的样式,这 ...
- semantic.css,CSS框架:Semantic UI的优缺点
Semantic UI 作为一名全栈开发人员,Jack Lukic使用自然语言原理创建了Semantic UI框架.凭借着jQuery和LESS功能,Semantic UI提供了光滑.平整且精细的外观 ...
- semantic ui html5,css中什么是Semantic UI框架?
什么是Semantic UI框架? Semantic UI是一个用户友好度爆表的响应式前端框架,具备3000多个主题变量和50多个UI组件,可以快速搭建漂亮的网页.Semantic UI还集成了许多第 ...
- Semantic Ui 之 容器 container
第一步:创建项目 添加JQuery和Semantic UI包.创建container.html页面: 第二步:container.html页面 <!DOCTYPE html> <ht ...
- Semantic UI术语
Semantic UI 的特定术语 术语类型 一.组件类型 (Types of Components) 二.工程术语 (Project Terminology) 三.定义术语 (Definition ...
- Semantic UI入门示例
1.下载Semantic UI包引入相关文件遇到各种各样的问题,比如icon找不到.无动效等问题,所以通过链接的方式引入文件. 2.在页面引入文件(按照顺序) 引入文件内容如下: <li ...
- 【项目实战】个人博客(SpringBoot,SSM,thymeleaf,Semantic UI)——从设计思路到部署一站式教学
一.前言 1.项目背景 此项目并非原创,项目原型是李仁密老师的作品,具体的教学视频来自b站https://www.bilibili.com/video/BV1nE411r7TF,不过up主貌似也是搬运 ...
最新文章
- 什么是URL?协议头,路径和端口是什么意思?
- 当我们谈论知识管理时,我们在谈论什么?
- 小明分享|分享8ms平台sigmastar SSD201/SSD202 开源框架的github
- java freemarker 分页_10小时入门java开发04 springboot+freemarker+bootstrap快速实现分页功能...
- Android AsyncTask源代码浅析
- bluecam连接步骤说明_智能门锁安装步骤分享
- APP抓包,针对 SSLPinning反爬
- ie浏览器点击打印没反应_ie浏览器无响应怎么回事?ie浏览器点击没有反应解决方法分享...
- 5.10300 - Ecological Premium
- html5+css3.5手机站标准写法,移动端手机网站基本模板
- Mac OSX终极瘦身
- ESP32开发路程——环境搭建、引脚、烧录、UART、ADC、WS2812、RFID、DAC、FreeRTOS、CJSON
- amesim子模型_AMESim进行实际物理建模及建模的一般过程
- 【邢不行|量化小讲堂系列24-Python量化入门】股票自动程序化下单交易 | 视频教程
- 华为手机word插件加载失败_华为手机里用其他应用打开Word文档打不开怎么办?...
- Spine皮肤系统使用
- win7配置C语言VS2010,开发Windows7软件的绝配:Visual Studio 2010
- 瞎想-电信IPTV如何做到真高清真4K直播
- 液晶屏背光源该如何检测?
- efi linux win10,WIN10+UBUNTU15.04 kylin(EFI+GPT)