系统分析大作业系列博客一

  1. 1. 系分项目博客一：semantic-ui的学习
    1. 1.1. semantic-ui导入
    2. 1.2. semantic-ui的简要使用
    3. 1.3. 实际案例

系统分析大作业系列博客一：semantic-ui

系分项目博客一：semantic-ui的学习

这次我们系分项目的前端ui框架采用的是semantic-ui，这是一个完全语义化的前端框架，这里对semantic-ui的学习进行必要的总结。

由于在前端页面绘制阶段全程使用的均为静态文件，绘制阶段并没有使用node, vue这类工具，文件地址见https://github.com/sysu620/static

semantic-ui导入

从semantic-ui官网https://semantic-ui.com/下载对应压缩包，解压缩后。放置于文件夹内，并从jquery官网下载jquery文件放置于其中，在根目录下建立名为static的文件夹，用于存放对应的静态html文件。

html页面若要引用semantic-ui的js与css文件，则在html的head部分引入如下内容：

1
2
3
<link rel="stylesheet" type="text/css" href="../Semantic-UI/dist/semantic.min.css">
   <script src="../Semantic-UI/dist/jquery-3.3.1.min.js"></script>
   <script src="../Semantic-UI/dist/semantic.min.js"></script>

以上完成后即可使用相应semantic-ui框架的组件了。

semantic-ui的简要使用

semantic-ui为完全语义化的前端框架，前端组件渲染方式由该元素的class属性所决定，例如假如需要渲染一组不同颜色的按钮，则只需要写如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
<button class="ui red button">Red</button>
<button class="ui orange button">Orange</button>
<button class="ui yellow button">Yellow</button>
<button class="ui olive button">Olive</button>
<button class="ui green button">Green</button>
<button class="ui teal button">Teal</button>
<button class="ui blue button">Blue</button>
<button class="ui violet button">Violet</button>
<button class="ui purple button">Purple</button>
<button class="ui pink button">Pink</button>
<button class="ui brown button">Brown</button>
<button class="ui grey button">Grey</button>
<button class="ui black button">Black</button>

若前述步骤均完成，则渲染出的效果如下：

ZC3vTO.png

类似的，假如需要渲染出不同大小的一组按钮，则可使用以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<button class="mini ui button">
  Mini
</button>
<button class="tiny ui button">
  Tiny
</button>
<button class="small ui button">
  Small
</button>
<button class="medium ui button">
  Medium
</button>
<button class="large ui button">
  Large
</button>
<button class="big ui button">
  Big
</button>
<button class="huge ui button">
  Huge
</button>
<button class="massive ui button">
  Massive
</button>

渲染出的效果如下：

除此之外，另一个需要学习的是semantic-ui的布局方式。

这里我们使用网格布局方式，默认网格十六列。然后假如我们需要一组变长的列，去放对应的组件，则我们可以指定列宽，若需要变长的行，则可以使用嵌套网格。例如下面的这一份组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="ui two column grid">
  <div class="column">
    <div class="ui three column grid">
      <div class="column"></div>
      <div class="column"></div>
      <div class="column"></div>
    </div>
  </div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column">
    <div class="ui grid">
      <div class="ten wide column"></div>
      <div class="six wide column"></div>
    </div>
  </div>
</div>

该代码使用了嵌套网格，并使用了变长列宽。最终渲染出的效果如图：

基本熟悉上述语义化的组件和网格系统后，基本就可以开始着手相应前端页面的绘制工作了。需要实现的效果，semantic-ui大部分都已经实现，例如颜色，尺寸，组合，动画效果，图标等。

实际案例

如我们提现页面，效果如图：

绘制阶段代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<html>

<head>
    <link rel="stylesheet" type="text/css" href="../Semantic-UI/dist/semantic.min.css">
    <script src="../Semantic-UI/dist/jquery-3.3.1.min.js"></script>
    <script src="../Semantic-UI/dist/semantic.min.js"></script>
    <style>
        body{
            background-color:#F2F6FC;
        }
        .ton{
            background-color: white;
        }
        .f{
            font-family: Arial, Helvetica, sans-serif;
            color: rgba(102, 102, 255, 0.349019607843137);
            font-size: 19px;
        }
    </style>
</head>

<body>
    <div class="ui blue secondary  inverted menu">       
        <div class="right menu">
          <a class="ui item">
                <i class="large bell icon"></i>
          </a>
          <a class="ui item">
            <i class="large sign out alternate icon"></i>
          </a>
        </div>
    </div>
    <div class = "ui padded grid">
        <div class = "three wide column"></div>
        <div class = "ten wide column ton">
                <div class="ui center aligned container">
                        <i class="circular centered huge teal dollar icon"></i>
                </div>
                <div class = "ui left aligned container">
                        <div class="ui bulleted list f">
                            <div class="item f">目前可提现30元</div>
                            <div class="item f">请输入提现金额     <div class="ui mini input">
                                    <input type="text" placeholder="">
                                  </div>
                                元
                            </div>
                            <div class="item f">您绑定的支付宝账号为：12345678901</div>
                            <div class="item f">点击[提现] ，提现到支付宝</div>
                            <div class="item f">每日可提现1次</div>
                        </div> 
                </div>
                <div class = "ui right aligned container">
                        <div class="ui animated button" tabindex="0">
                                <div class="visible content">提现</div>
                                <div class="hidden content">
                                  <i class="right arrow icon"></i>
                                </div>
                         </div>
                </div>
        </div>
        <div class = "three wide column"></div>

    </div>
    
</body>

</html>

Comment