search

softnshare / htmlcss

HTML/HTML5/CSS 知識管理共筆, 要加入Slack, 請參考右邊的網站內容說明
https://softnshare.wordpress.com/slack/htmlcss/
3 stars 1 forks source link

CSS ProTips #5

Open maoyang opened 8 years ago

maoyang commented 8 years ago

裡面收集19個CSS ProTips , 為何會使用這些tips就可以稱為Pro? 會CSS的網友發表一下意見吧!

https://github.com/AllThingsSmitty/css-protips

jawayang commented 8 years ago

我先來示範第一個

1. Use :not() to Apply/Unapply Borders on Navigation

http://jsbin.com/mapetunizi/edit?html,css,js,output 透過:not() 可以過濾掉你不想要套用的元素 簡化大部分人習慣先把屬性套用到所有元素之後，再移除不想套用到的元素

2016-06-08 11 11 53

maoyang commented 8 years ago

css code還是一樣多, 這樣做會比較有效率?

jawayang commented 8 years ago

沒有一樣多吧?! 原本要寫兩個樣式，只需要寫一個啊~

maoyang commented 8 years ago

Sorry, 我重新看一次, yes, 一行搞定

maoyang commented 8 years ago

@jawayang 的Demo很棒, 有沒有網友要來分享下一個pro tips , 使用jsbin demo, 19個tips走完一次, 大家的CSS功力應該就是Pro等級了

jawayang commented 8 years ago

對英文有障礙的可以看中文版～ https://github.com/AllThingsSmitty/css-protips/tree/master/translations/zh-CN

jawayang commented 8 years ago

10. Equal Width Table Cells

這題的範例 http://jsbin.com/qapafitufi/edit?html,css 使用方式就是你設定了 table 的總寬 有加 table-layout: fixed; 的 table cell 的寬度就都會是一樣寬。 若沒有加就會是下面那樣，會隨著內容而調整。 2016-06-08 11 10 10

willhuang28 commented 8 years ago

@jawayang 如你的解釋沒錯，我被 w3schools 的案例誤導了，已刪除上篇留言 http://www.w3schools.com/cssref/tryit.asp?filename=trycss_table_table-layout