最近使用Semantic UI
这一CSS框架实现了上图的苹果静态官网首页,我只想说,要不要这么简单粗暴!它省去了你大量时间与经历,不必去重复造轮子。但如此的便利必然是付出了某种你还未发现的代价……
Semantic UI基础知识
我们要了解一些基本的样式与技巧,并能通过使用“形容词”来改变样式。
【基本样式】
首先,header
中导入semantic
样式,在body
的div
块中定义class=“ui segment”
,基本效果如下
【使用“形容词”】
其次,在div class = "XXX"
中加上你想实现的“形容词”
- inverted + color
- vertical
- padded
inverted
颜色反转,若不加颜色,则直接变成黑色,官网给出下面多种颜色选择
vertical
消除两边的圆角、阴影,同一vertical
作用下的多个segment
之间缝隙消失,
padded
改变内距
Apple静态官网首页实现
了解了必要的知识之后,赶紧来实践一番!
【导航菜单栏】
使用semantic
自带的ui menu
样式,第一个与最后两个使用图标插入,其余的直接输文字,这里有几个小点需要注意:
- fixed:固定菜单栏,下拉拖动时表头不会消失,一直悬浮在最上面
- fitted:大小宽度自适应
- nine item:九个图标居中显示
- borderless:去除图案之间的白色间隔线
代码如下
【iPhone7大图】
使用ui image
样式插入图片,其他注意点:
- basic:消除黑边
- secondary:相当于下面的效果
但是在这里可以从视觉效果上去除图片下的底色,否则会是下面这样,要多难看有多难看…
代码如下
【四张小图】
代码如下
【最后文字】
使用嵌套制作网页ui segment -> ui container
,注意事项:
- very padded:内距变大
- 一条分割线:通过
<div class="ui divider"></div>
方式“画出”一条分割线 - grid:网格系统,使用
five column
分成五列 - text menu:每段文字放在里面,且用
vertical
垂直排列
代码如下
好了,最后把‘导航菜单栏’、‘iPhone7大图’、‘四张小图’与‘最后文字’四块部分拼接起来,就实现了苹果官网首页的效果,耶~
源代码
|
|