CSS 小技巧之一：float 與 BFC，側欄固定寬度

通常在左右兩欄並排，.child1 30% ，.child2 70%。
我們會在兩個區塊下 float: left ，如下圖所示：

 .parent {

 }

 .child1 {
  float: left;
  width: 30%;
 }

 .child2 {
  float: left;
  width: 70%;
 }

JQuery 關於事件委派與 stopPropagation

寫過 javascript 的人多少都會知道冒泡的原則，例如 click li，同時也會 click 到 ul，這個事件會一直往上傳遞。
但有時候我們不想讓 li 的 click 事件上傳遞，就會使用到 stopPropagation() 方法，例如：

 $('ul').on('click', function(event){
  console.log('this is ul.');
 });

 $('li').on('click', function(event){
  event.stopPropagation();

  console.log('this is li.');
 });

此時 li 的click 事件就不會往上傳遞，但如果我們使用 on 委派事件給父元素，stopPropagation() 方法就有一些值得提醒的潛規則：

SCSS @include、@mixin 與 @content

@include 與 @extend 有點類似，但與 @extend 不同的是，@include 方法可以接受變數。
我們需要先定義 @mixin，並且在使用的時候用 @include 去呼叫，請見以下：

 @mixin border-radius($int: 4px) { //使用 @mixin 定義一個 border-radius 方法，變數預設值是 4px
  border-radius: $int;
  display: block; 
 }

 .a {
  @include border-radius(10px); //使用 @include 呼叫 border-radius 方法，變數是 10px
  display: block; 
 }

 .b {
  @include border-radius(); //個例子沒有置入變數，因此會使用預設值
  display: block; 
 }

SCSS @extend 與 %

@extend 可以讓現有的選擇器規則，套用至另一個選擇器中，例如我撰寫一個按鈕的樣式如下：

.btn {
    display: inline-block;
    padding: 6px 12px;
}

名偵探的夢

一位頗有份量的黑道大哥，請我們三五朋友吃飯，說是成功的將事業交棒給小兒子，得好好慶祝。雖然我的職業是偵探，但工作上這位大哥常給我不少線索，因此感情還算是可以。

才吃完飯，大嫂急急忙忙的打發我們回家，直到回家半路上，才突然想起手機遺忘在大哥家，幸虧走得還不遠，再回去拿就是了。

SCSS 函式與判斷

作為一種語言，SCSS 當然也有 function。
SCSS function 會處理丟進來的參數，並返回一個值。

SCSS 內建了許多關於顏色的 function，例如加深/加亮，我們可以這麼寫：

a {
    color: darken(#08c, 10); //#08c 變暗10個單位
}

SCSS map 與 each 迴圈

我們都非常喜歡物件，因為相關的東西可以放在一起，相當容易理解。

SCSS 也加入了這種方便的特性，但在 SCSS 的世界裡他不叫物件，而是叫 map，讓我們來看看 map 長什麼樣子吧！

SCSS list 與 for 迴圈

SCSS list 有點類似於一般語言的陣列。
陣列有點像是櫃子，我們把東西一個一個存進去。例如：

$list: 12px, 14px, 16px, 18px;

實作上陣列常會搭配迴圈，在 SCSS 中也提供了我們這項功能。

SCSS 運算

SCSS 讓我們在撰寫 CSS 的時候，可以運用基本的運算。
其中我們多少會碰到一些單位、轉換的問題，以下帶大家了解它背後運算的邏輯。

SCSS 變數

像 SCSS、LESS 這種 CSS 預處理器，都具備變數這個特點。
變數存取一些有意義的數值，幫助我們更方便的建構或維護代碼。

掛蚊帳的回憶

這幾天跟一個以前很喜歡的女生聊了一下 Line，突然想起當兵的時候，如果要打電話，必須要等寢室裡所有的蚊帳掛好之後才行。

所以為了睡前可以打 3 分鐘的電話給她，我每天一洗完澡，就急急忙忙的把所有弟兄的蚊帳通通掛好，然後興匆匆的趕緊打電話給她。

現在想想雖然很辛苦，但也許是這樣，所以這份回憶才顯得特別吧！

SCSS 巢狀選擇器

SCSS 的巢狀標籤，能幫助我們建構出更簡潔、直觀的代碼，讓我們看一些相關的範例：

HTML常用標籤（二）

提到HTML，其中最讓人熟悉的應該是它的表格(table)吧。

表格的概念其實相當簡單 - 其實跟word中的表格完全一樣。在CSS尚未完善之前，不少的網頁排版其實是依靠表格完成。

HTML常用標籤（一）

既然我們一腳踏入了HTML的世界，那麼首先我們先來熟悉幾個常用的標籤吧！請看下面的範例：

HTML文件編輯的第一步

俗話說經驗就是最好的老師，要學會如何編輯HTML，最好的方法就是打開你的編輯器(你可以使用Windwos的記事本)，跟我一起編輯HTML吧！

HTML的基本 - 標籤

HTML文件，是由許許多多的標籤組合而成，標籤又分成兩種：成對標籤與不成對(單獨)標籤。理解這些小玩意是你成功破解外星語言般的HTML的第一步。

網頁基礎：HTML? CSS? javascript?

從設計系畢業的我很清楚，大部分的人對於網頁的認知僅停留在Dreamweaver、Frontpage 之類的網頁製作軟體產生的檔案。而當面試官一問：「你會CSS嗎？」時，你卻只能丈二金剛摸不著頭緒的抓抓頭：『痾...我會Dreamweaver( Frontpage)』，接著苦笑。

到底什麼是HTML，什麼是CSS與javascript ？就讓小弟在此概略介紹一下吧！

這一年，屬於我的新兵日記。〈馬祖之五〉

馬防部有一個泯滅天良的恐怖規定：『 到馬新兵60日內不得返台(確切幾天我也忘了，就寫60吧！反正誰在乎？)』。

所以到馬新兵十個有九個會倒數那60天的漫漫長日，而剩下那個一定是馬祖人。

原本我也在數，什麼時候會回到可愛的台灣，思考這種問題可是會讓人精神崩潰的...原因是返台假有固定的天數，是依你在島上的天數計算的...

“白話文就是：你越早回去，放越久，將來就越不爽。”

此時我終於明白為什麼女孩一下說要，一下又不要；心裡覺得不好，但又有會點想...喂！想哪去了，stop！

不該被需要的博愛座

不知道多少次了。總是在公車上，看著走道上的乘客抓著欄杆或把手，但那博愛座卻是空的。

 (轉自你好台灣網 張浩 攝)

前些日子有個新聞，大意是說兩個坐博愛座的青少年，堅持不肯讓座給老人家。後來這整件事被人拍成影片貼上網。青少年被網友人肉搜索出來，社交網站和部落格慘遭洗板，只好在網路上發表公開道歉聲明，最後還免不了被新聞媒體拿來大書特書。

這一年，屬於我的新兵日記。〈馬祖之四〉

「你跟以前一個叫許修懷的學長找得好像喔！」、「天吶，修懷哥！你回來啦！」一寢的學長老是這樣跟我說。
「幹！你長得真的很像一個我很討厭的人。」但也有些學長這樣說，順便瞪了我一眼。

一直到退伍之前，POA有時候還是會拿修懷哥的東西給我：「欸！這是你的。」

「噢！傲中，我真的好想拿修懷哥的照片給你看噢...」連國書也在連辦公室大嘆：「你們側面真的好像...」。
靠，這實在是太誇張了...我不知道許修懷是誰，只知道我無時無刻的聽到他的名字，修懷哥，你好屌！