Semantic UI上手

最近使用 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：去除图案之间的白色间隔线

代码如下

    
        

            ![](images\appleicon.png)
        
            
    Mac
    iPad
    iPhone
    Watch
    Music
    技术支持
    
    

        ![](images\searchicon.png)
    
    
    
        

            ![](images\buyicon.png)
        
    

iPhone7大图

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

• basic：消除黑边

• secondary：相当于下面的效果

  
  
  
  
  

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

  
  
  

代码如下

    

        ![](images/banner.png)
    

四张小图

代码如下

    

        

            ![](images/img1.png)
        
        

            ![](images/img2.png)
        
        

            ![](images/img3.png)
        
        

            ![](images/img4.png)
        
    

最后文字

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

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

代码如下

    

        

            双镜头摄像头仅于 iPhone 7 Plus 提供。亮黑色外观仅于 128GB 及以上存储容量的机型提供。
        

        


        

            

                

                    

                        
Apple Store 商店
                    
                    查找零售店
                    iPad
                    iPhone
                    Watch
                    iPod
                
            
            
        
    

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

【参考资料】

Semantic UI 官网
Semantic UI 中文文档