最近使用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">
            ![](images\appleicon.png)
        </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">
        ![](images\searchicon.png)
    </div>
    </a>
    <a href="#" class="item">
        <div class="ui image">
            ![](images\buyicon.png)
        </div>
    </a>
</div>

iPhone7大图

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

• basic：消除黑边

• secondary：相当于下面的效果

  
  
  

  但是在这里可以从视觉效果上去除图片下的底色，否则会是下面这样，要多难看有多难看...

  
  

代码如下

<div class="ui basic secondary vertical segment">
    <div class="ui image">
        ![](images/banner.png)
    </div>
</div>

四张小图

代码如下

<div class="ui basic secondary vertical segment">
    <div class="ui fitted text menu">
        <div class="item">
            ![](images/img1.png)
        </div>
        <div class="item">
            ![](images/img2.png)
        </div>
        <div class="item">
            ![](images/img3.png)
        </div>
        <div class="item">
            ![](images/img4.png)
        </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大图’、‘四张小图’与‘最后文字’四块部分拼接起来，就实现了苹果官网首页的效果，耶~

【参考资料】

Semantic UI 官网
Semantic UI 中文文档