2011年8月,回到花蓮悠閒地渡過了一個月,這個月我開始密集式的翻譯日文歌曲發表在我的音樂盒、練習寫作 JavaScript 小作品發表在我的網路展覽廳(本部落格)、固定每天做一點小運動以培養習慣(話說自從我當完兵之後,已經有6年沒有為運動而運動了)、同時閱讀 HTML / CSS / JavaScript 相關書籍以增進網路生活基本功、月中開始專題企劃--每天欣賞一首唐詩,月底最後兩天應大哥的工作邀約騎機車出門進行兩天一夜的流浪並前往新竹。以下是這次的噗浪生活記。
測試
2011年9月25日 星期日
2011年9月24日 星期六
我的噗浪生活201107
2011年7月底,噗浪推出備份服務,對我這種念舊的使用者來說,這是一項非常有意義的功能。利用這項功能,我輕鬆的製作了新版噗浪生活記,主要就是複製、貼上,然後在適當的地方做一些小修改。因為資料是建基於噗浪備份系統所提供的檔案,所以發表在部落格上的噗浪生活記沒有辦法囊括所有功能,例如,表情小圖不見了、點擊回噗數不會跳出回噗內容,不過該有的原噗文字都有,基本版型也在,最重要的是點擊發佈時間可以連回噗浪看原文,光是這一點就足以超越我自己手動製作的舊版噗浪生活記了。(參見部落格文章--我的噗浪生活: 201104(手動條列式)、201105(手動表格式)、201106(手動表格式)三篇)噗浪備份的時間比台灣時間快了大約八個小時,記錄上的資料跟實際情況會有時間差,這是另外一個美中不足的地方。
2011年7月,我剛從新竹往南走,騎機車在外流浪11天結束回到花蓮。這次回花蓮的主要目的是協助整理家裡的環境,因為弟弟要結婚了,家裡需要有一個不一樣的佈置和擺設。除此之外,這個月我過得相當悠閒,主要在久違的花蓮四處亂晃、看了一本小說--唐.吉軻德傳、瀏覽了一下西班牙和歐洲中世紀的歷史、然後為11天的流浪做記錄(未完殘念)。以下是這次的噗浪生活記。
2011年9月21日 星期三
JavaScript小作品 -- 跳出式圖像
這次JavaScript小作品的創作目標是要寫一個小程式,可以自動化改寫部落格文章內所有圖片,讓圖片上的連結不是帶領使用者更換頁面,而是在頁面不改變的情況下跳出圖片。完成這個小作品之後,只要我寫入一些圖片很多的網站,例如2010年底至2011年初我所管理的網站--LED照明王--以及我的國中時代漫畫作品珍藏用的網站--真的好慢報--裡面都有大量照片和圖片,如此一來,我就可以改善blogger平台每次點擊圖片就會換頁的缺點,進而提供讀者一個更好的閱讀經驗。
然而世事難預料,正所謂「計畫趕不上變化、變化趕不上一通電話」!這個小作品的製作過程中,blogger平台開啟了光箱效果,也就是現在大家點擊圖片時會出現的畫面,這個光箱效果是blogger的程式設計師編修的,實用程度比我的小作品還要好上太多太多,不但會自動在畫面置中、縮放到最適當大小,還有點擊跳下一張和底部小圖索引,完全是一個專業的圖片展示台,效果甚至可以媲美網路漫畫平台。兩相比較之下,我的作品簡直就是個可笑的玩具!更何況我還沒有完成!!我的幼小的心靈被大環境無情地擊落。
2011年9月4日 星期日
CSS shorthand property 屬性縮寫
縮寫 | 屬性 | 值 |
---|---|---|
background | background-color background-position background-size background-repeat background-origin background-clip background-attachment background-image | color | transparent; x% y% | xpos ypos | left | top | ...; length | percentage | cover | auto | ...; repeat | repeat-x | repeat-y | no-repeat; border-box | contain-box | padding-box; border-box | contain-box | padding-box; scroll | fixed; url('URL') | none; |
border | border-width border-style border-color border-top border-right border-bottom border-left | thin | medium | thick | length; none | dotted | dashed | solid | ...; color | transparent; thin | medium | thick | length; thin | medium | thick | length; thin | medium | thick | length; thin | medium | thick | length; |
font | font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar | normal | italic | oblique; normal | small-caps; normal | bold | lighter | 100 | ...; medium | length | % | normal | ...; font-family, generic-family name; caption; icon; menu; message-box; small-caption; status-bar; |
list-style | list-style-type list-style-position list-style-image | disc | circle | square | decimal | ...; inside | outside; none | url('URL'); |
margin | margin-top margin-right margin-bottom margin-left | auto | length | %; auto | length | %; auto | length | %; auto | length | %; |
outline | outline-color outline-style outline-width | color | invert; none | dotted | dashed | solid | ...; thin | medium | thick | length; |
padding | padding-top padding-right padding-bottom padding-left | length | %; length | %; length | %; length | %; |
本篇為整理資料,內容參照:
- 2007年旗標出版股份有限公司翻譯O'Reilly出版Christopher Schmitt著藍雲紋譯《CSS問題解決速查手冊》、
- w3schools.com 網路資料。