【Semantic UI基礎知識】

我們要了解一些基本的樣式與技巧，并能通過使用“形容詞”來改變樣式。

基本樣式

首先，header中導入semantic樣式，在body的div塊中定義class=“ui segment”，基本效果如下

使用“形容詞”

其次，在div class = "XXX"中加上你想實現(xiàn)的“形容詞”

• inverted + color
• vertical
• padded

inverted
顏色反轉(zhuǎn)，若不加顏色，則直接變成黑色，官網(wǎng)給出下面多種顏色選擇

vertical
消除兩邊的圓角、陰影，同一vertical作用下的多個segment之間縫隙消失，

padded
改變內(nèi)距

【Apple靜態(tài)官網(wǎng)首頁實現(xiàn)】

了解了必要的知識之后，趕緊來實踐一番！

導航菜單欄

• 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>

最后文字

使用嵌套制作網(wǎng)頁ui segment -> ui container，注意事項：

• very padded：內(nèi)距變大
• 一條分割線：通過<div class="ui divider"></div>方式“畫出”一條分割線
• grid：網(wǎng)格系統(tǒng)，使用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大圖’、‘四張小圖’與‘最后文字’四塊部分拼接起來，就實現(xiàn)了蘋果官網(wǎng)首頁的效果，耶~

【參考資料】

Semantic UI 官網(wǎng)
Semantic UI 中文文檔