最近使用
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大圖’、‘四張小圖’與‘最后文字’四塊部分拼接起來，就實現了蘋果官網首頁的效果，耶~
