最近使用
Semantic UI這一CSS框架實(shí)現(xiàn)了上圖的蘋果靜態(tài)官網(wǎng)首頁艘款，我只想說，要不要這么簡(jiǎn)單粗暴履婉！它省去了你大量時(shí)間與經(jīng)歷魂毁，不必去重復(fù)造輪子。但如此的便利必然是付出了某種你還未發(fā)現(xiàn)的代價(jià)......
【Semantic UI基礎(chǔ)知識(shí)】
我們要了解一些基本的樣式與技巧荷科，并能通過使用“形容詞”來改變樣式。
基本樣式
首先纱注，header中導(dǎo)入semantic樣式畏浆，在body的div塊中定義class=“ui segment”，基本效果如下
使用“形容詞”
其次狞贱，在div class = "XXX"中加上你想實(shí)現(xiàn)的“形容詞”
- inverted + color
- vertical
- padded
inverted
顏色反轉(zhuǎn)刻获，若不加顏色，則直接變成黑色瞎嬉，官網(wǎng)給出下面多種顏色選擇
vertical
消除兩邊的圓角蝎毡、陰影，同一vertical作用下的多個(gè)segment之間縫隙消失氧枣，
padded
改變內(nèi)距
【Apple靜態(tài)官網(wǎng)首頁實(shí)現(xiàn)】
了解了必要的知識(shí)之后沐兵，趕緊來實(shí)踐一番！
導(dǎo)航菜單欄
使用
semantic自帶的ui menu樣式便监，第一個(gè)與最后兩個(gè)使用圖標(biāo)插入扎谎，其余的直接輸文字碳想，這里有幾個(gè)小點(diǎn)需要注意：
- fixed：固定菜單欄，下拉拖動(dòng)時(shí)表頭不會(huì)消失毁靶，一直懸浮在最上面
- fitted：大小寬度自適應(yīng)
- nine item：九個(gè)圖標(biāo)居中顯示
- 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">技術(shù)支持</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樣式插入圖片胧奔，其他注意點(diǎn)：
- basic：消除黑邊
-
secondary：相當(dāng)于下面的效果
但是在這里可以從視覺效果上去除圖片下的底色，否則會(huì)是下面這樣预吆，要多難看有多難看...
代碼如下
<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>
最后文字
使用嵌套制作網(wǎng)頁ui segment -> ui container龙填，注意事項(xiàng)：
- 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 及以上存儲(chǔ)容量的機(jī)型提供。
</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>
<!-- 段落重復(fù)4遍ing -->
</div>
</div>
</div>
好了巷嚣，最后把‘導(dǎo)航菜單欄’喘先、‘iPhone7大圖’、‘四張小圖’與‘最后文字’四塊部分拼接起來廷粒，就實(shí)現(xiàn)了蘋果官網(wǎng)首頁的效果窘拯，耶~
