semantic 学习

介绍

Semantic UI是一个在github上已经获得39264个star的漂亮的css框架，它具有语义化特点，也就是说语法特别容易上手。

安装与简单使用

安装教程在官网。

分为简单安装和完全安装。简单安装只要下载了对应的css和js文件即可，我们在写前端时，引用对应的文件即可。

完全安装较麻烦一些，但可以支持更换主题，定制各按钮，表格样式等操作。

注意，如果只是简单安装的话，官网上给出的include in your html需要注意更改文件目录

我们可以在官方文档中找到多个样式的代码，看哪个自己喜欢的就复制粘贴一下，如下面的代码自己就能在网页中显示图中的效果。

1 2 3 4 5 6 7

<link rel="stylesheet" type="text/css" href="/Users/yangyuanhao/semantic/dist/semantic.min.css"> <script 大专栏  semantic 学习 src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> <script src="semantic/dist/semantic.min.js"></script> <button class="ui button">Follow</button>

更换主题与样式修改

当我们使用Semantic UI来构建网页时，我们有时候会发现自己的网页打开的比较慢，这是由于国内的网络环境造成的。

网站的整体布局

inverted 反色处理

左右边距可以用container

segment左右无空，用于网页底部等

grid