最近使用
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：去除图案之间的白色间隔线
代码如下
<div class="ui fixed fitted inverted borderless nine item menu">
<a href="#" class="item">
<div class="ui image">
</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">
</div>
</a>
<a href="#" class="item">
<div class="ui image">
</div>
</a>
</div>
iPhone7大图
使用ui image样式插入图片，其他注意点：
- basic：消除黑边
-
secondary：相当于下面的效果
但是在这里可以从视觉效果上去除图片下的底色，否则会是下面这样，要多难看有多难看...
代码如下
<div class="ui basic secondary vertical segment">
<div class="ui image">
</div>
</div>
四张小图
代码如下
<div class="ui basic secondary vertical segment">
<div class="ui fitted text menu">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
</div>
最后文字
使用嵌套制作网页ui segment -> ui container，注意事项：
- very padded：内距变大
- 一条分割线：通过
<div class="ui divider"></div>方式“画出”一条分割线 - grid：网格系统，使用
five column分成五列 - text menu：每段文字放在里面，且用
vertical垂直排列
代码如下
<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大图’、‘四张小图’与‘最后文字’四块部分拼接起来，就实现了苹果官网首页的效果，耶~
