Semanti UI官方文档:https://semantic-ui.com/
导入依赖
- 导入JQuery和Semantic UI
1 | <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script> |
- 在head中导入CSS样式
1 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"> |
- 优化移动端
1 | <meta name="viewport" content="width=device-width ,initial-scale=1.0"> |
最后是这样
1 |
|
在body中设计页面
先写大体框架,然后填充每个部分
1 | <!--导航--> |
导航
效果:
1 | <!--segment 代表是一的长条块,默认占满宽度 --> |
导航布局可以通过在 secondary menu 中嵌套 header item 和 item 实现
尾部
效果图:
添加me.css自定义样式
1 | /*------opacity------*/ |
在head中引入
1 | <link rel="stylesheet" href="../static/css/me.css"> |
1 | <!--尾巴--> |
水平布局可以通过 divided grid ,将水平空间分割开来,竖直显示文字可以通过 list 内部嵌套item
博客主体
1 | <!--内容--> |
使用grid实现左右分栏的布局,左侧每一块都是一个segment,用attached连接
博客简介
1 | <!--博客内容--> |
先通过grid划分左右分栏比例11:5,左侧再分11:5
水平摆放可以使用horizontal list 内部嵌套item
右侧菜单:
1 | <!--内容--> |
同列左右布局可以采用:two column grid 内嵌column和right aligned column的方式
一个segments内可以嵌套多个segment