Semantic UI上手

发表于 | 分类于 | | 阅读次数


最近使用Semantic UI这一CSS框架实现了上图的苹果静态官网首页，我只想说，要不要这么简单粗暴！它省去了你大量时间与经历，不必去重复造轮子。但如此的便利必然是付出了某种你还未发现的代价……

Semantic UI基础知识

我们要了解一些基本的样式与技巧，并能通过使用“形容词”来改变样式。

【基本样式】

首先，header中导入semantic样式，在body的div块中定义class=“ui segment”，基本效果如下

【使用“形容词”】

其次，在div class = "XXX"中加上你想实现的“形容词”

  • inverted + color
  • vertical
  • padded

inverted

颜色反转，若不加颜色，则直接变成黑色，官网给出下面多种颜色选择
img

vertical

消除两边的圆角、阴影，同一vertical作用下的多个segment之间缝隙消失，
Paste_Image.png

padded

改变内距

Apple静态官网首页实现

了解了必要的知识之后，赶紧来实践一番！

【导航菜单栏】


使用semantic自带的ui menu样式，第一个与最后两个使用图标插入，其余的直接输文字，这里有几个小点需要注意：

  • fixed：固定菜单栏，下拉拖动时表头不会消失，一直悬浮在最上面
  • fitted：大小宽度自适应
  • nine item：九个图标居中显示
  • borderless：去除图案之间的白色间隔线

代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="ui fixed fitted inverted borderless nine item menu">
	<a href="#" class="item">
		<div class="ui image">
			<img src="images\appleicon.png" alt="" />
		</div>
            </a>
	<a href="#" class="item">Mac</a>
	<a href="#" class="item">iPad</a>
	<a href="#" class="item">iPhone</a>
    <a href="#" class="item">Watch</a>
    <a href="#" class="item">Music</a>
    <a href="#" class="item">技术支持</a>
    <a href="#" class="item">
    <div class="ui image">
        <img src="images\searchicon.png" alt="" />
    </div>
    </a>
    <a href="#" class="item">
        <div class="ui image">
            <img src="images\buyicon.png" alt="" />
        </div>
    </a>
</div>

【iPhone7大图】

Paste_Image.png

使用ui image样式插入图片，其他注意点：

  • basic：消除黑边
  • secondary：相当于下面的效果
    Paste_Image.png
    但是在这里可以从视觉效果上去除图片下的底色，否则会是下面这样，要多难看有多难看…
    Paste_Image.png

代码如下

1
2
3
4
5
<div class="ui basic secondary vertical segment">
    <div class="ui image">
        <img src="images/banner.png" alt="" />
    </div>
</div>

【四张小图】

代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="ui basic secondary vertical segment">
    <div class="ui fitted text menu">
        <div class="item">
            <img class="ui image" src="images/img1.png" alt="" />
        </div>
        <div class="item">
            <img class="ui image" src="images/img2.png" alt="" />
        </div>
        <div class="item">
            <img class="ui image" src="images/img3.png" alt="" />
        </div>
        <div class="item">
            <img class="ui image" src="images/img4.png" alt="" />
        </div>
    </div>
</div>

【最后文字】

Paste_Image.png

使用嵌套制作网页ui segment -> ui container，注意事项：

  • very padded：内距变大
  • 一条分割线：通过<div class="ui divider"></div>方式“画出”一条分割线
  • grid：网格系统，使用five column分成五列
  • text menu：每段文字放在里面，且用vertical垂直排列

代码如下

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
<div class="ui vertical secondary very padded segment">
    <div class="ui container">
        <div class="sub header">
            双镜头摄像头仅于 iPhone 7 Plus 提供。亮黑色外观仅于 128GB 及以上存储容量的机型提供。
        </div>
        <div class="ui divider"></div>
        <div class="ui five column grid">
            <div class="column">
                <div class="ui vertical text menu">
                    <div class="item">
                        <h4>Apple Store 商店</h4>
                    </div>
                    <a class="item">查找零售店</a>
                    <a class="item">iPad</a>
                    <a class="item">iPhone</a>
                    <a class="item">Watch</a>
                    <a class="item">iPod</a>
                </div>
            </div>
            <!-- 段落重复4遍ing -->
        </div>
    </div>
</div>

好了，最后把‘导航菜单栏’、‘iPhone7大图’、‘四张小图’与‘最后文字’四块部分拼接起来，就实现了苹果官网首页的效果，耶~

源代码

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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Apple</title>
        <link rel="stylesheet" href="css/semantic.css" media="screen" title="no title" charset="utf-8">
    </head>
    <body>
        <!-- 导航栏 -->
        <div class="ui fixed fitted inverted borderless nine item menu">
            <a href="#" class="item">
                <div class="ui image">
                    <img src="images\appleicon.png" alt="" />
                </div>
            </a>
            <a href="#" class="item">Mac</a>
            <a href="#" class="item">iPad</a>
            <a href="#" class="item">iPhone</a>
            <a href="#" class="item">Watch</a>
            <a href="#" class="item">Music</a>
            <a href="#" class="item">技术支持</a>
            <a href="#" class="item">
                <div class="ui image">
                    <img src="images\searchicon.png" alt="" />
                </div>
            </a>
            <a href="#" class="item">
                <div class="ui image">
                    <img src="images\buyicon.png" alt="" />
                </div>
            </a>
        </div>
        <!-- 表头图片 -->
        <div class="ui basic secondary vertical segment">
            <div class="ui image">
                <img src="images/banner.png" alt="" />
            </div>
        </div>
        <!-- 四张图、 -->
        <div class="ui basic secondary vertical segment">
            <div class="ui fitted text menu">
                <div class="item">
                    <img class="ui image" src="images/img1.png" alt="" />
                </div>
                <div class="item">
                    <img class="ui image" src="images/img2.png" alt="" />
                </div>
                <div class="item">
                    <img class="ui image" src="images/img3.png" alt="" />
                </div>
                <div class="item">
                    <img class="ui image" src="images/img4.png" alt="" />
                </div>
            </div>
        </div>
        <!-- 最后文字 -->
        <div class="ui vertical secondary very padded segment">
            <div class="ui container">
                <div class="sub header">
                    双镜头摄像头仅于 iPhone 7 Plus 提供。亮黑色外观仅于 128GB 及以上存储容量的机型提供。
                </div>
                <!-- 文字重复中 -->
                <div class="ui divider"></div>
                <div class="ui five column grid">
                    <div class="column">
                        <div class="ui vertical text menu">
                            <div class="item">
                                <h4>Apple Store 商店</h4>
                            </div>
                            <a class="item">查找零售店</a>
                            <a class="item">iPad</a>
                            <a class="item">iPhone</a>
                            <a class="item">Watch</a>
                            <a class="item">iPod</a>
                        </div>
                    </div>
                    <div class="column">
                        <div class="ui vertical text menu">
                            <div class="item">
                                <h4>Apple Store 商店</h4>
                            </div>
                            <a class="item">查找零售店</a>
                            <a class="item">iPad</a>
                            <a class="item">iPhone</a>
                            <a class="item">Watch</a>
                            <a class="item">iPod</a>
                        </div>
                    </div>
                    <div class="column">
                        <div class="ui vertical text menu">
                            <div class="item">
                                <h4>Apple Store 商店</h4>
                            </div>
                            <a class="item">查找零售店</a>
                            <a class="item">iPad</a>
                            <a class="item">iPhone</a>
                            <a class="item">Watch</a>
                            <a class="item">iPod</a>
                        </div>
                    </div>
                    <div class="column">
                        <div class="ui vertical text menu">
                            <div class="item">
                                <h4>Apple Store 商店</h4>
                            </div>
                            <a class="item">查找零售店</a>
                            <a class="item">iPad</a>
                            <a class="item">iPhone</a>
                            <a class="item">Watch</a>
                            <a class="item">iPod</a>
                        </div>
                    </div>
                    <div class="column">
                        <div class="ui vertical text menu">
                            <div class="item">
                                <h4>Apple Store 商店</h4>
                            </div>
                            <a class="item">查找零售店</a>
                            <a class="item">iPad</a>
                            <a class="item">iPhone</a>
                            <a class="item">Watch</a>
                            <a class="item">iPod</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

参考资料

Semantic UI 官网
Semantic UI 中文文档