Jade – 簡化 HTML

寫了HTML 都很多年了,HTML 一直存在問題,就是HTML Tag 打起上來不方便,而且當一個 HTML 檔案的行數達到一定數量時,變得很難看。

Jade 就是嘗試把 HTML 簡化,剛才試用了一下,打起上來真的很舒服,而且都易明。

JADE Source Code:

doctype html
// Created by Louis Lam on 12/10/2014.

html
    head
        title HELLO WORLD!
        meta(charset=“utf-8”)
body
    div HELLO WORLD!
    div(id=“abc”)
    script(src=”//code.jquery.com/jquery-1.11.0.min.js”)
    script.
        var abc = “ABC!”;
        $(“#abc”).html(abc);

HTML:

<!DOCTYPE html>
<!— Created by Louis Lam on 12/10/2014.—>
<html>
<head>
    <title>
HELLO WORLD!</title>
    <meta
charset=“utf-8”>
</head>
<body>
    <div>
HELLO WORLD!</div>
    <div
id=“abc”></div>
    <script
src=”//code.jquery.com/jquery-1.11.0.min.js”</script>
    <script>
        var
abc = “ABC!”;
        $(“#abc”).html(abc);
    </script>
</body>
</html>

AdminLTE 超華麗網頁 Backend 後台設計風格

這個後台設計別人介紹給我用的。它的作用就是類似 Bootstrap ,提供大量十分美,十分實用的元素給大家使用。雖然它叫 AdminLTE,但用在 Front end 其實也不過份。

沒有設計天份,CSS苦手或想快速起一個 CMS 的 Web Developer 們可以留意下 AdminLTE 吧。

連結: http://almsaeedstudio.com/AdminLTE/

Alternative way to center a text element vertically with unknown parent height.

Centering a text element vertically in CSS is a crazy task. Because “vertical-align: middle” is not working sometimes. In fact, vertical-align works with Image only.

If you know the parent height already, you can set the line-height and height with same value in order to centering the element, for example:

line-height: 10px;
height: 10px;

However, what if I don’t know the height? You have 2 choices:

  1. Use table and set <td> with vertical-align: middle;
  2. You can re-style the button and make it look like a div.

The following link show it works.

http://jsfiddle.net/ptvkP/1/

these are strange and ugly ways, but works! 🙂