Semantic UI 使用笔记一
2020-03-10 本文已影响0人
像苏
Semantic UI
试用法则--随用随查
如何导入本地Semantic UI
<link rel="stylesheet" href="css/semantic.css" media="screen" title="no title">
- 这里需要特别注意一点，themes文件夹需要跟semantic.css在一个文件夹里面，要不引入图标的时候回不成功
如何修改Semantic UI
- 在以上css下面再写一个link标签,像这样
<link rel="stylesheet" href="css/semantic.css" media="screen" title="no title">
<link rel="stylesheet" href="custom.css" media="screen" title="no title"> - 1.把需要修改的样式名称直接写入到新的样式表里面
<div class="ui header"></div>
新的样式表里面写法
.ui.header{这里写需要修改的内容}
**这里需要特别注意相同名称的样式可能会有很多，当你想改变其中一个的时候，可以在这个样式后面再添加一个名称 (这里的名称不要和Semantic UI 的名称相同)例如
<div class="ui header firsthead"></div>
新的样式表里面写法
.ui.header.firsthead{这里写需要修改的内容}
- 2.父级的样式名称后面加">"需要改动的样式名称（子孙选择器）
常用命令
ui header - 比较常用的是在<h1><h2>...里面用
sub header - ui header 下级一个不需要强调的元素
ui image - 插入图片
ui button - 插入按钮
ui menu - 插入菜单
ui segment - 段落
ui divider - 分割线
ui label - 标签
ui grid - 网格系统 默认16格，分为定栏和定宽，定栏提前写好几个栏 ui three column grid，定宽需要下层写入几个宽four wide column
一些形容词
circular - 使按钮变成圆角……
inverted - 反向
padded - 内边有一定距离
very padded - 内边距离很大
vertical - 直角，垂直，例如menu里面使用是垂直
container - 是内容收紧，不是紧贴边
basic - 去掉segment的边线
center aligned - 居中对齐
CSS
CSS优先级（从高到低）
- !important
- 内联样式 <p style="">
- 内部样式表 <head><style="">
- 外部样式表<head><link="">
- 后面的link覆盖前面的link；
- 后面的CSS覆盖前面的CSS
常用CSS
border：solid 1px red;-
background：url()；,这里的图片位置要写对，如果图片在于css同级的文件夹内需要../来获取图片位置
-background-size：(contain);contain在背景图片no-repeat情况下，图片比例不变，显示全部，cover是图片比例不变，显示最大，如果放不下会裁剪图片内容
具体可参考这篇文章，这里说的比较清楚点击查看-
background-size:150px,150px;他也可以这样用
-
-
background-repeat:no-repeat;是否平铺 -
background-attachment: fixed;固定背景不动
位置
position:relative;- position 位置
- relative 相对定位，相对的是之前的位置，元素的占位会保留
- absolute 绝对定位，以父级元素为参照，且父级元素为relative或absolute，如果父级元素不是这两种会往上选择直到选到为止元素被改为绝对定位后其之前的占位会消失
-
left：50px；这里直接写移动的方向和数量就可以了 -
top：50px；
body默认会有margin：8px
- 居中，需要居中的元素定位是absolute，left:50%,top:50%,可以实现居中，
-
transform:translate(-50%,-50%);改变要移动的元素的原点到他的中心
