iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 29
2
自我挑戰組

蛻變事實-UI設計師勇闖前端城系列 第 29

[蛻變事實/D29] 設計師勇闖前端城-(死背處理CSS 那些鎖事-P2)

YA~ 魚的記憶又回來了...
繼續上一篇寫一半得了失憶症的CSS小筆記
/images/emoticon/emoticon01.gif/images/emoticon/emoticon01.gif/images/emoticon/emoticon01.gif/images/emoticon/emoticon01.gif


~~~ 以下編碼接續上集P1 ~~~

3. 快速置中垂直對齊三箭客

[ height + width + line-height ]

 //瞎忙中最快速設定法,將三箭客大小設定一樣!就可以得後到以下示範圖的效果
 height: 60px;
 width: 60px;
 line-height: 60px;

示範圖:

注意!
*內容文字若是會有所變動,可能會超過可容納的寬度~
用這設定就會壞給你看
所以這用法需要注意內容的擴充性喔!


4. 可視範圍寬的設定

[width + max-width]

.wrap {
width: 100%; //支援在1440範圍內都可縮放
max-width: 1440px; //支援到最大1440px, 超過就置中

//如果要置中,記得再加
margin: 0 auto;
}

保持設計視覺上的美感及使用者體驗
設定"最寬"設定,就可以運用在有些使用者螢幕是超大(如1980以上)
還可以維持在適當的視覺大小中!

示範圖:

此DEMO連結

今天又繼續整理了二筆
終於默默撐到了.....今天啊~~~~~
也難得這二天還用codepen寫完還做圖示
雖然資訊不多,也算是有心吧 /images/emoticon/emoticon34.gif/images/emoticon/emoticon34.gif
/images/emoticon/emoticon34.gif
/images/emoticon/emoticon34.gif

自已好敢說 XD


上一篇
[蛻變事實/D28] 設計師勇闖前端城-(死背處理CSS 那些鎖事-P1)
下一篇
[蛻變事實/D30] 設計師勇闖前端城-(練功總心得)
系列文
蛻變事實-UI設計師勇闖前端城35

尚未有邦友留言

立即登入留言