VSCode 整理HTML熱鍵：Alt+Shift+F
container-fluid=width:auto;
spcing查找常用標籤的快速輸入。
flex排版對齊主軸(預設橫軸)，主軸可換。
看第一遍作品不夠多的時候除了照唸課文沒有辦法重新構築出自己的說法。
2019年8月5日 星期一
2019年8月4日 星期日
2019F2E3
做header的時候最常遇到的就是橫置一列清單，打完ul>li*n之後，css必備作法：
清單去除項目符號跟橫置
在對齊方面不斷參考王志誠老師的flex，用flex改變以往區塊元素跟行內元素的思考方式，達成排一橫列，排一直列的目標。
超連結去底線跟滑鼠移過變色
參考資源：https://wcc723.github.io/css/2017/07/21/css-flex/
清單去除項目符號跟橫置
.header-list-item {
display: inline-flex;
list-style-type: none;
在對齊方面不斷參考王志誠老師的flex，用flex改變以往區塊元素跟行內元素的思考方式，達成排一橫列，排一直列的目標。
flex-direction: column;
改變軸線方向超連結去底線跟滑鼠移過變色
.header a{
color: #AEAEAE;
text-decoration: none;
}
.header a:hover{
color: #707070;
參考資源：https://wcc723.github.io/css/2017/07/21/css-flex/
2019年8月2日 星期五
CSS：Class命名
一個網頁裡一定由數個block組成，現代設計每個block的內容都是用css控制，例如：
.header{
color:#000000;
}
但如果有幾十個block都同一顏色或都靠左對齊，就要反覆打數十次，因此可以把常用的屬性放在一個class做反覆套用，例如：
.white{
color: white;
}
BEM設計模式：
BEM由Yandex團隊提出來的一種創新命名Class名稱的設計模式，BEM的意思是區塊（Block）、元素（Element）、修飾符（Modifier）。
什麼時機不會需要用到BEM？可以獨立且具高重複性，例如左右對齊，四處都會用到。
block的位置
寫有包含長寬、定位...等等關於block特有資訊的Class，為了避免日後維護困難，因此需要一目了然能夠找到關於這個block所在或是資訊的命名方式。
參考來源：
https://blog.niclin.tw/2017/08/10/%E6%90%9E%E6%87%82-sass-%E4%B8%AD%E7%9A%84-bem-%E8%A8%AD%E8%A8%88%E5%8E%9F%E5%89%87/
https://ithelp.ithome.com.tw/articles/10160545
.header{
color:#000000;
}
但如果有幾十個block都同一顏色或都靠左對齊，就要反覆打數十次，因此可以把常用的屬性放在一個class做反覆套用，例如：
.white{
color: white;
}
BEM設計模式：
BEM由Yandex團隊提出來的一種創新命名Class名稱的設計模式，BEM的意思是區塊（Block）、元素（Element）、修飾符（Modifier）。
什麼時機不會需要用到BEM？可以獨立且具高重複性，例如左右對齊，四處都會用到。
block的位置
寫有包含長寬、定位...等等關於block特有資訊的Class，為了避免日後維護困難，因此需要一目了然能夠找到關於這個block所在或是資訊的命名方式。
參考來源：
https://blog.niclin.tw/2017/08/10/%E6%90%9E%E6%87%82-sass-%E4%B8%AD%E7%9A%84-bem-%E8%A8%AD%E8%A8%88%E5%8E%9F%E5%89%87/
https://ithelp.ithome.com.tw/articles/10160545
訂閱：
文章 (Atom)