<meta name="viewport" content=" width=device-width , initial-scale=1 , shrink-to-fit=no , user-scalable=no " /> 以上這段會放在 Html 的 Head 區塊中，以下大略說明其用意： width=device-width ==> Viewport 的寬度為 Screen 的寬度 initial-scale=1 ==> 固定畫面比例為1 user-scalable=no ==> 避免畫面被放大或縮小 shrink-to-fit=no ==> 額外解決 iOS9 無法辨認 initial-scale 的新屬性

有時只是想要一個小小的淡入淡出動畫效果，可以使用以下的語法 -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s;  可以加在 a 和 a:hover 兩個地方，那麼在滑入和滑出時都會有效果 不要問我為什麼要短短的一個淡入淡出動畫，就要寫這麼多行，其實只有一行啦！就是最後一行，另外四行有在玩 CSS 的應該都知道那是什麼東東吧？

網址：https://www.twicon.page/index.html 之前在瀏覽新聞時，注意到這個網站。 它裡面提供了專屬於臺灣意象的 ICON 圖示，重點是：它完全免費！ 這對很多設計師來說非常有吸引力，而且將這些圖示添加在自己的設計上，更有「台味」的感覺。 除了臺灣發明的小綠人外，還有女王頭、捷運…很有趣的感覺，大家若要使用，也可以依照使用狀況，自行下載不同的檔案類型。 作者還很有自信的在上面說道：會永久更新。哈~~~

以前我切版最愛用 Float ，但常常在一些區塊會無法彈性伸縮，現在在了解完 Flex 屬性後，發現 CSS 的世界真是廣大呀！哈~~~ Flex 屬性要套用的第一點，要記得它分為「外框元件」和「內元件」，感覺就像是 table 和 td 的關係，兩者缺一不可。 第一步要做的就是，將外框元件設定 display: flex; 沒有做這個設定，後續的設定都白搭。 因為這裡會有很多不同的情況，所以我先大略設定一個情況：一組外框元件600px寬度、和三個內元件A、B、C 接下來就是針對「外框元件」的相關設定： flex-direction : row（橫式左往右） | row-reverse（橫式右往左） | column（直式上往下） | column-reverse（直式下往上） flex-wrap : nowrap（超出範圍換行） | wrap（超出範圍不換行） | wrap-reverse（超出範圍換行時反轉） justify-content (水平對齊): flex-start（靠左） | flex-end（靠右） | center（置中） | space-between（左右均分，但內容寬度不變） | space-around（左右均分、內容寬度不變，但最左和最右有間距） align-items （垂直對齊): flex-start（靠上） | flex-end（靠下） | center（置中） | baseline（第一行文字的底部對齊） | stretch（上下均分置中，區塊會撐開) align-content （垂直對齊多行版，但需要先設定 flex-wrap: wrap 才會有用）: flex-start（靠上) | flex-end（靠下） | center（置中） | space-between（上下均分置中，區塊不會撐開） | space-around（上下均分置中，區塊不會撐開、但最上和最下會有間距） | stretch（上下均分置中，區塊會撐開） 「內元件」的相關設定： flex-grow （剩餘空間給元件的伸展性）: 0（預設值，都不伸展） | 1（剩餘空間分為1份做伸展），如果有兩個元件皆設定 flex-grow:1，代表剩餘空間分為2份做伸展，未設定的元件就不列入伸展 例如： 外空間為1000px，裡面包著A、B、C三個區塊，每個區塊寬...

這兩個偽元素一般來說在 HTML 程式裡面並不會看到，但在前台檢查時，卻可以透過 CSS 加上去，讓 DOM 增加更多不同的樣式。 特別注意： CSS 裡一定要寫一行：「 content: ' '; 」至於裡面要不要放文字，可以依設計來決定 這裡可以加的只能是一般文字和符號，不接受 <br> 這類的 HTML 語法 文字的樣式和父元素的相同，想要有不同的樣式，就需要再另外寫語法來指定 其他使用方式，可以搜尋Amos的「金魚都能懂的CSS選取器」一書，裡面會有更詳細的使用教學 【HTML】 <div class="events">      <a href="#">活動說明文字兼活動簡述文字</a> </div> 【CSS】 .events a {      font-size: 14px;     color: #333333;     display: block;     border-left: 3px solid #689c85;     padding-left: 0.5rem; }  【示意圖】 大概出現的樣式就是像下面的圖，左邊會有一條綠色線段 如果加上偽元素的 CSS 語法後： .events a:before {     content: '【特別】';     color:#ff0000;     font-weight:bold; } 在每個 a 的前面都會加上紅色、粗體的文字 前台檢查 HTML 語法時，也可以看到 a 底下出現了 ::before 的偽元素 如果用的是 ::after ，那麼文字就會出現在最後 偽元素的基本使用就介紹到這裡，下次有機會再介紹如何利用這兩個偽元素來增加更多變的樣式。

【HTML】  <div class="textzoom-line">     <dd>左側文字1</dd>     <em></em>     <dt>說明文字1</dt> </div> <div class="textzoom-line">     <dd>標題2</dd>     <em></em>     <dt>標題說明文字2</dt> </div> <div class="textzoom-line">     <dd>標題3</dd>     <em></em>     <dt>不曉得要打什麼就隨便啦</dt> </div> <div class="textzoom-line">     <dd>最後一行的標題文字4</dd>     <em></em>     <dt>說明</dt> </div> 【CSS語法】 .textzoom-line { display: flex;} .textzoom-line dd, .textzoom-line em, .textzoom-line dt {flex-shrink: 0;} .textzoom-line dd { padding-right: 1em;} .textzoom-line em { border-bottom: 1px dotted #000000; height: 0.9em; flex: 2;} .textzoom-line dt { padding-left: 1em; text-align: right;} 【說明】 就是把左文字、中間連接線、右文字用一個 te...

利用這個語法， 可以輕鬆在文字的下方（或右方）增加一個有質感的箭頭 【HTML 語法】   <p>Arrow Btn <strong class="arrowsBox"></strong></p> 【CSS】 .arrowsBox::before {      content: '';       border-bottom: 1px solid #f78a74; /* 下方一條線 */      border-right: 1px solid #f78a74; /* 右方一條線 */      -webkit-transform: skewX(45deg);       -ms-transform: skewX(45deg);       transform: skewX(45deg); /* 將該區塊傾斜 */      width: 50px;       height: 7px;       display: inline-block;  } 【說明】 當區塊未設定傾斜時呈現的樣式 而當區塊設定傾斜後，就可以明顯看到它變成箭頭的樣式了