## codepen平台設定

* key binding->changes to sublime text
* preprocessor->prefixing change to autoprefixier
* editor options-> click autocomplete

Ctrl F / Command F會出現搜尋框框，就可以直接輸入元素名字找到那個元素，如果有不同設定的相同元素可以再按一次search就會往下找下一個相同元素。

<h2 style="color: green">html指令介紹
</h2>
<ul>
<li>
hr是綫條
例如：
<!-- hr -->
<hr>
</li>
<li>
ul是unorder list,要在ul裏加li，例如：
（ul)(li)(/li)(/ul)
</li>
<ol>
<li>
ol是order list，使用方法與ul同理
</li>
</ol>
網路圖片copy圖片網址，例如：
<img src="https://images.hahow.in/images/643bf874c6dedf68cd748eac" alt="" width="300">
<li>
按ctrl加/斜綫就可以把指令變注解
例如：
<加！--h1-->
<!-- h1 --></li>
<li><b>Bold字體是框框b</b>
打完<框框>按 tab就會把尾部框框補齊。</li>
<li>
按ctrl加d是多重選取，能快速且同步操作不同的程式。</li>
<li>使用emmet語法，在html或pug可直接透過.<b>（名字）$*（需要的數字）tab展開</b>，就會得到帶有數字順序排列的div<b>s</b>。</li>

</ul>
<hr>
<hr>

<h2 style="color: green"> css指令</h2>
<ul>
<li>
*在cs是全部的意思，因此只要打*{}就可以選取全部。
</li>
<li>
h1等等指令在cs不用加.，直接h1{}就可以執行指令。
</li>
<li>
class指令在cs要加.，.class名字{}就可以執行指令。
</li>
<li>
display中的inline-block是把内容物放在同一行的指令。
</li>
<li>
vertical-align：top，往上排列。
</li>
<li>
使用cs擺放圖片，例如在class名字{background-image:url()}就可以只在框框内置放照片。
</li>
<li>
background-size:cover，圖片在指定框框撐滿。
</li>
<li>
padding，上下 左右 的調整
</li>
<li>
在heading裏加div能讓div裏的文字在h1的下一格，而span就能讓文字跟heading同一行。
<h4>
例如：<span>這段文字是span</span><div>
而這段文字是div。
</div>
</h4>
</li>
<li>
shift+tab會往左縮排，tab會往右（來自單元7-14.44）
</li>
<li>.名字按tab展開就有一個div；.名字>.名字就可以在div裏面加另一個div；.名字>.名字*數字就可以同時有很多相同名字的div</li>
<li>超鏈接不要變色要在css設定color:initial,text decoration:initial</li>
<li>font-weight能更改字體粗細<span style="font-weight:150">字體粗細</span></li>
<li>bgi tab展開=bakcground-image</li>
<li>bgc tab展開=bakground-color</li>
<li>在css，.名字>div{}只會影響.名字底下的div；.名字（空格）div則會影響.名字裏面的所有div。</li>
<li>如果不要網頁滑動的空間可以在html,body下margin:0指令。</li>

</ul>
<hr>
<hr>

<h2 style="color: green">
排版<span style="font-size:5px">東西太多全丟這裏（屬性講解）</span>
</h2>
<ul>
<li>
若要在特定區域定位（absolute)，需要把特定區域的position設定爲relative，否則會找到其他不是static的區域定位。
</li>
<li>定位，排版時得先設定一個定位，不然就沒辦法使用top、bottom、left、right控制元素</li>
<li><b>position分類帽</b></li>

<ul><li>position: static (預設定位)</li>
<li> relative (相對定位)</li>
<li>absolute (絕對定位)</li>
<li>fixed (固定定位)</li>
<li>sticky (滾動式沾黏定位)</li>
</ul>
</li>
<li>詳細position資料
<a href="https://ithelp.ithome.com.tw/articles/10265760" target="_blank">點這裏</a>(内含有每種position的案例)
</li>
<li><b>position : relative</b>會將元素拉到最前面蓋掉後面元素</li>
<li><a href="https://zh-tw.learnlayout.com/display" target="_blank">CSS display 屬性</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10252827" target="_blank">Box-sizing介紹</a>
</li>
<li><b>justify content是主軸綫，align item是副軸綫</b>。當選擇flex-direction為row，justify content（主軸綫）則在左右;align item（副軸綫）則是上下；當選擇flex-direction為column，justify content（主軸綫）則在上下;align item（副軸綫）則是左右。此外還有row-reverse與column-reverse,也就是把原本row或column裏面倒序。</li>
<li><b>justify content</b> & <b>align item</b>可選擇的排版</li>
<ul>
<li>flex-start</li>
<li>center</li>
<li>flex-end</li>
<li>space-around(左右各留一個空間，因此元素跟元素之間是兩個空間）</li>
<li>space-between（將所有空間留在各個元素的中央）</li>
<li>space-evenly（左右各留一個空間，但元素跟元素之間空間一致）</li>
</ul>
<li><b>Flexbox</b>可選擇排版。</li>
<span style="font-size:5px">當display選擇了flex就有以下幾種選擇</span>
<ul>
<li>flex-grow：若有剩餘空間時，flex items 會分配到多少比例的剩餘空間，通常預設值為 0</li>
<li>flex-shrink：當 flex item 超過 flex container 時，是否會依比例縮小，通常預設值為 1</li>
<li>flex-basis：設定 flex item 在主軸方向上的最小大小，預設值為 auto ，也就是會自適應主軸方向的大小（main size）</li>
<a style="font-size:10px" href="https://vocus.cc/article/6268d64afd897800017a368b">更多flex資料</a>
</ul>
<li><b>flex-wrap : wrap</b>可以讓flex狀態下的元素到下面一行。</li>
<li>順序必須要是可以排列的元素，因此如果想把某個元素移到前面可以使用<b>(por)position:relative，改變原始position:static的設定。</b></li>
<li>如果元素都是可以可以定位的元素(position:relative)，那它們就會依照html裏面給的順序做排列，最後出現會在最前面。</li>
<li>如果在元素都是por的狀態可以使用<b>z-index</b>（意思為在畫面裏渲染的高度），<b>數字越大就會排在越前面</b>。</li>
<li>transform可以平移、縮放、旋轉，而且不用改動position: absolute這種絕對的屬性。</li>
</ul>

<h2 style="color: green">pug/sass變數練習</h2>
<ul>
<li>mixin就是模組化的意思。</li>
<li><b>@mixin 名字</b> 能在底下增加設定，只要<b>.項目地下有+名字</b>就可以對不同項目統一管理。</li>
<li>$是變數符號，意味著若無增加設定將會使用$的設定。</li>
<li>只要設定$colorOrange: #色號，接下來在其他項目填上color: $colorOrange就可以使用設好的顔色。</li>
<li>如果在$設定padding大小高度20px長度40px，只需要輸入$padding：20px，填入$padding的項目就可以有高度20px的形狀，如果長度是可直接使用乘法可以在@mixin底下加入padding:$padding $padding*2就能得到20px 40px的效果。 </li>
<li>在@mixin裏面只要&.名字就能進行更針對不同項目的設定。</li>
<li>如果要用變數$，得先在.mixin 名字（$變數項目：原始設定），之後沒有特別在項目加上$其他變數，網站將使用上面mixin的原始設定。</li>
<li><b>隨機改變顔色，形狀，角度得先在上方設定：</b>
<h4>
@mixin 名字（$color:#顔色，$size:100px,$rotateDeg:數字deg）<br>
&nbsp&nbsp&nbsp&nbsp width: $size<br>
&nbsp&nbsp&nbsp&nbsp height: $size<br>
&nbsp&nbsp&nbsp&nbsp background-color: $bodyColor<br>
&nbsp&nbsp&nbsp&nbsp transform: rotate($rotateDeg)<br>
</h4>
</li>
<li><b>隨機改變不同大小：</b>
<h4>@for $i from 想要數字 through 想要數字<br>
&nbsp&nbsp&nbsp&nbsp$size:random(想要的數字)+想要的數字**~~//這裏表示隨機將會產生自0到想要的數字**~~<br>
<br>
&nbsp&nbsp&nbsp&nbsp.名字#{$i}<br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp+名字(#{$size})
</h4>
就會產生不同大小的形狀。</li>
<li><b>隨機顔色</b>，得先設定幾種要的顔色
<h4>$colorRed: #ff5151<br>
$colorYellow: #eddb76<br>
等等```````````````````
</h4>
最後加上<b>$colors*要加s*:($colorRed,$colorYellow,</b>等等。接著就能在<b>$名字Color:nth($colors*要加s*,random(上面列的顔色數量))</b></li>
<li><b>@if (名字1Color==名字2Color），$名字1Color：nth($colors,random（上面列的顔色數量）)</b>就能得到不會撞色的名字1跟名字2。
</li>
<li><b>隨機不同的角度</b>,跟上面大小一樣
<h4>$rotateDeg:random(想要的數字)+想要的數字**~~<br>
<br>
并在+名字裏面加上(#{$rotateDeg}deg)</h4>
就能的得到不同角度的形狀。
</li>
<li>想要選取一個元素裏面的所有元素可以.元素換行tab後*就可以涵括.元素裏面的所有元素。</li>
<li><b>{class^="名字"}</b>，這樣就能在地下控制相同名字可是後面有順序1、2、3的元素。
</li>
</ul>

<h2 style="color: green">
Animation<span style="font-size:5px">（屬性講解）</span>
</h2>
<ul>
<li>animation-name：動畫名字</li>
<li>animation-duration:動畫完成長度</li>
<li>animation-delay:動畫延遲</li>
<li>animation-iteration-count: infinite動畫重播次數</li>
<li>animation-direction: alternate動畫播出回放</li>
<h3>
上面順序就是在.元素下animation：名字 長度 等等
</h3>
<li>animation-fill-mode: both 動畫往前填補</li>

</ul>
<h2 style="color: green">
JavaScript<span style="font-size:5px">（屬性講解）</span>
</h2>
<ul>
<li><b>console.clear()</b>能讓console（即時視窗）自動清空。console.clear()能讓console（即時視窗）自動清空。</li>
<li><b>var</b>指變數，把各項變數列出來后，可以使用console.log（得到答案）。var指變數，把各項變數列出來后，可以使用console.log（得到答案）。</li>
<li><b>concat</b>指接續</li>
<li><b>.prepend</b>指加在前面<b>.append</b>指接在後面</li>
<li><b>[]陣列</b>，這是一種屬性的容器。["1","2","3"]</li>
<li><b>{}物件</b></li>
<li><ul><b>~~操作指令~~</b>
<li>indexOf 尋找位置</li>
<li>slice/substr 切割字串</li>
<li>replace 取代字串</li>
<li>toUpperCase 轉大寫</li>
<li>toLowerCase 轉小寫</li>
<li>split 分割成陣列</li>
<li>join 結合陣列為字串</li>
</ul>
</li>
</ul>

<hr>
<hr>

<h4>**grid system例子</h4>
<a href="https://www.uxdesigninstitute.com/blog/how-to-use-grids-in-web-design/" target=_blank>link</a>
<h4>**emmet cheat sheet</h4>
<a href="https://docs.emmet.io/cheat-sheet/" target="_blank">link</a>
<h4>**type input</h4>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input" target=_blank>link</a>
<h4>**讓你在codepen放背景的網站</h4>
<a href="https://postimages.org/" target="_blank">link</a>