Tag Archives: Web

[Web] 上傳圖片前,怎麼先 preview?

直接參考範例: HTML:

jQuery:

CSS:

參考 這裡 的執行結果! 資料來源: Preview an image before it is uploaded

Posted in jQuery, Web, 程式設計 | Tagged , , | Leave a comment

[Web] 使用 breakpoint 控制 Bootstrap Navbar 的 Collapse

我們常常需要使用 Bootstrap 來做 Navbar,當 browser 被縮小時,Navbar 會 Collapse 成一個有三條線的按鈕。 如下所示: 當寬度夠時,畫面如下: 當寬度縮小時,應該要變成下面這樣: 但是,有時候畫面介於大跟小中間時,會出現兩個 Navbar 重疊的狀況,如下: 這個要怎麼解決呢? 答案是,使用 MediaQuery 設定好正確的 breakpoint! 請參考 這裡 的做法! 參考資料: Bootstrap 3 Navbar Collapse

Posted in Web, 程式設計 | Tagged , , | Leave a comment

[jQuery] 如何取得特定標籤的 id 或 class?

使用 attr()!

資料來源: How can I get the ID of an element using jQuery? How can I get the current class of a div with jQuery?

Posted in jQuery, Web, 程式設計 | Tagged , | Leave a comment

[CSS] 表格置中

表格水平置中方法如下: 訣竅是,把 margin 設成 auto。

垂直置中需要使用 Javascript,請參考下面連結。 資料來源: How to position a table at the center of div horizontally & vertically

Posted in CSS | Tagged , | Leave a comment

[CSS] [轉貼] Writing CSS Right?

覺得還不錯的連結: Writing CSS Right

Posted in Web | Tagged , | Leave a comment

[Chrome] Chrome Extension 的 Icon 尺寸

Chrome Extension 的 Icon 尺寸有下面幾種: 16×16, 19×19, 38×38, 48×48, 128×128 其中,19×19 跟 38×38 用在 browser action 的小 icon,38×38 用在 retina display 上面的 browser action 的小 Icon。 Icon 的設定方式如下: 一般的 Icon 設定在 manifest.json 底下:

browser action 的 Icon 設定在 manifest.json … Continue reading

Posted in Web, 程式設計 | Tagged , | Leave a comment

[Web] 測試用的 Web Server

可以考慮使用下面兩個方法: 1. node.js 的 serve 模組 2. python -m SimpleHTTPServer

Posted in Web | Tagged | Leave a comment

[HTML] Inline v.s. Block Elements

HTML 裡面的 element 大致上被分為 Inline elements 及 Block elements 兩大類。 Block element 在瀏覽器中被呈現時,通常前後會被加上換行(new line)符號。 在 css 中,你可以使用 display 屬性,來設定 element 的型態是 inline 或 block。 譬如說:

參考資料: 實際範例 HTML Blocks CSS Display Property

Posted in Web, 程式設計 | Tagged , , | Leave a comment

[轉貼] Using XPath Helper to Understand XPath Statements

怎麼使用 Xpath Helper? 1. 安裝 Xpath Helper。 2. 按下 Ctrl + Shift + x 以打開 Xpath Helper 視窗。 3. 在左邊的 Text Box 內輸入 Xpath 敘述,右邊的 Text Box 會顯示結果! 在 Chrome Dev Tools 內,直接執行 $x(“Xpath敘述”),亦可得到同樣的結果。 影音教學如下:

Posted in Web, XML | Tagged , | Leave a comment

[Web] HTML Entities 的轉換

常用的HTML Entities: HTML Entities 常常需要將大於(>)小於(<),轉換成 &gt; 跟&lt;嗎? 試試看這個網站: HTMLEntities.net

Posted in Web | Tagged , | Leave a comment