記錄程式相關的一些實用語法

2014年9月29日星期一

[轉貼] CSS 常用語法

出處：http://www.eion.com.tw/Blogger/?Pid=1003

CSS 層疊樣式表 Cascading Style Sheets 樣式通常是將他保存在外部的 .css 檔案文件中。
由簡單的 CSS 外部樣式表，使網頁開發提高工作效率可同時改變網站中所有頁面佈局和外觀樣式。

超連結的連結樣式

a 加入所有超連結樣式
a:link 加入超連結文字樣式
a:visited 加入瀏覽過的連結文字樣式
a:hover 加入滑鼠指標指著連結樣式
a:active 加入按下啟用連結的樣式

文字風格樣式 CSS文字風格樣式範例

color: #0f0f0f; 文字顏色
font-family: Arial, Tahoma; 文字風格字型
font-size: 13px; 文字大小
font-weight: bold; 文字粗體
font-style: italic; 文字斜體
font-variant: small-caps; 小字體
letter-spacing: 1px; 字體間距離
line-height: 18px; 設定行高
text-decoration: line-through; 加上刪除線
text-decoration: overline; 加上頂線
text-decoration: underline; 加上底線
text-decoration: none; 刪除連結底線
text-transform: capitalize; 字首大寫
text-transform: uppercase; 英文大寫
text-transform: lowercase; 英文小寫
text-align: right; 文字靠右對齊
text-align: left; 文字靠左對齊
text-align: center; 文字置中對齊
text-align: justify; 文字分散對齊
vertical-align: sub; 下標字
vertical-align: super; 上標字
vertical-align: top; 垂直向上對齊
vertical-align: bottom; 垂直向下對齊
vertical-align: middle; 垂直置中對齊
vertical-align: text-top; 文字垂直向上對齊
vertical-align: text-bottom; 文字垂直向下對齊
word-spacing: 5px; 設定詞的間距(詞間需有空白)
word-wrap: break-word; 任意斷字，適用於英文
word-wrap: nowrap; 強制水平排序不斷行

項目符號及編號 CSS項目樣式範例

list-style-type: none; 沒有標誌，不編號
list-style-type: disc; 實心圓形符號
list-style-type: circle; 空心圓形符號
list-style-type: square; 實心方形符號
list-style-type: decimal; 阿拉伯數字
list-style-type: decimal-leading-zero; 阿拉伯數字(十進制前置零)
list-style-type: lower-roman; 小寫羅馬數字
list-style-type: upper-roman; 大寫羅馬數字
list-style-type: lower-alpha; 小寫英文字母
list-style-type: upper-alpha; 大寫英文字母
list-style-type: lower-greek; 希臘語
list-style-type: armenian; 亞美尼亞
list-style-type: georgian; 格魯吉亞語
list-style-image: url(dot.gif); 圖片式符號
list-style-position: outside; 凸排(預設值)
list-style-position: inside; 縮排

背景樣式 CSS背景樣式範例

background-color: #5f5f5f; 背景色彩
background: transparent; 透明背景
background-image : url(bg.gif); 背景圖片
background-attachment : fixed; 浮水印固定背景
background-repeat : repeat; 重複排列-網頁預設
background-repeat : no-repeat; 不重複排列
background-repeat : repeat-x; 在 X 軸重複排列
background-repeat : repeat-y; 在 Y 軸重複排列
background-position : 90% 90%; 背景圖片 X 與 Y 軸的位置
background-position : top; 向上對齊
background-position : bottom; 向下對齊
background-position : left; 向左對齊
background-position : right; 向右對齊
background-position : center; 置中對齊

指定滑鼠游標的型態 CSS滑鼠樣式範例

cursor: crosshair; 十字線型
cursor: cell; 十字小方格 (Firefox, Opera)
cursor: move; 十字箭頭
cursor: all-scroll; 四方捲動 (IE, Opera)
cursor: n-resize; 箭頭朝上
cursor: s-resize; 箭頭朝下
cursor: e-resize; 箭頭朝右
cursor: w-resize; 箭頭朝左
cursor: nw-resize; 箭頭朝左上
cursor: sw-resize; 箭頭斜左下
cursor: se-resize; 箭頭斜右下
cursor: ne-resize; 箭頭朝右上
cursor: col-resize; 改變直行數
cursor: row-resize; 改變橫欄數
cursor: text; I 輸入文字符號
cursor: vertical-text; 垂直文字
cursor: help; 協助加一問號
cursor: wait; 等待中；漏斗
cursor: progress; 進行中；作業中
cursor: pointer; 手型，表示超連結
cursor: not-allowed; 無法使用
cursor: context-menu; 選單 (Opera)

框線樣式 CSS框線樣式範例

border-top:上框線
border-bottom:下框線
border-left:左框線
border-right:右框線
border:四邊框線
border-style: solid 實線框
border-style: dotted 點線框
border-style: dashed 分段線
border-style: double 雙線框
border-style: groove 立體內凸框
border-style: ridge 立體浮凸框
border-style: inset 凹框
border-style: outset 凸框

容器外緣及邊框空白(邊界)樣式 CSS邊界樣式範例

margin-top: 10px; 上外緣值
margin-right: 10px; 右外緣值
margin-bottom: 10px; 下外緣值
margin-left: 10px; 左外緣值
margin: 10px; 四邊外緣值
padding-top: 10px; 上邊框空白
padding-right: 10px; 右邊框空白
padding-bottom: 10px; 下邊框空白
padding-left: 10px; 左邊框空白

物件定位 CSS物件定位範例

position : static; 依照正常流程佈局
position : relative; top: 10px; left: 10px; 物件左上角開始位置
position : absolute; top: 10px; left: 10px; 網頁左上角開始位置
position : fixed; top: 10px; left: 10px; 固定在參考物上

2014年6月13日星期五

[轉貼] 用jQuery處理各瀏覽器滑鼠鎖右鍵

出處：http://injerry.pixnet.net/blog/post/47065340-%5Bjquery%5D---jquery%E8%A7%A3%E6%B1%BA%E5%90%84%E7%80%8F%E8%A6%BD%E5%99%A8%E6%BB%91%E9%BC%A0%E9%8E%96%E5%8F%B3%E9%8D%B5%E7%9A%84plugin

為了要應付 FireFox、Google Chrome、IE...等各瀏覽器，鎖滑鼠右鍵的方法，加入以下JavaScript指令即可：

1$(document).ready(function() { 

2    $(document).get(0).oncontextmenu = function() {

3        return false;

4    };

5});

前提當然記得要導入jQuery檔：

<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>

[轉貼] Javascript判斷用戶離開當前頁面或關閉瀏覽器並給出提示

出處：http://hi.baidu.com/lane727/item/4273e4b61ca7309f18469723

最近偶爾用一下web的qq(web.qq.com)，

在關閉它的時候，都會給出一個確認離開的提示，

之前沒真正做過這個功能，想當然地以為給window對象綁定一個onbeforeunload事件的回調函數，

在回調函數中return false就可以了，

今天有空試了一下，

發現不盡然，且不兼容主流的三個瀏覽器，哈，冒冷汗。

搜索了一下，在微軟官方網址找到了答案：http://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx

按照示例試了一下，還真是簡單，

於是在firefox和chrome下也順便測試了一下，

這兩個瀏覽器居然也是支持的，

再分別試試webqq在這兩個瀏覽器上的提示方式，

發現是一樣的，

看來不是想當然中的用confirm()函數來提示用戶，

而是瀏覽器自有的一種提示方式。

而且只需一句簡短的語句就可以至少兼容三大瀏覽器了：

window.onbeforeunload = function() {return 'Sure to leave?';};

</script>

凡事還是只有動手了才能了解清楚一些啊！

2014年4月18日星期五

[轉貼] 用jquery控制表格奇偶行及活動行顏色

出處：http://www.cnblogs.com/magics/p/3673570.html

　　雖然jquery流行已經很多年了，一直都感覺很難，也沒有花時間去學習它，只是偶爾哪天心血來潮了去看一點點，時隔多日又會忘得一乾二淨。最近用到表格奇偶行不同色，不得不去再看jquery，雖然感覺還是難，但已經不像以前一樣無從下手了。做完後不得不來感嘆一下jquery真是太牛了，不用自己再寫一大堆javascript函數去實現了，簡單幾句輕鬆搞定。
　　先定義好表格的奇偶行樣式，如下代碼：

body {

    font-size:12px;
}

th {
    color: #FFFFFF;
    background: #A172AC;
}

table,table td,table th {
    padding: 0.5em;
    margin: 0;
    border:0;
    border-spacing:0;
}
/* odd items 1,3,5,7,... */
table tbody tr.odd,
.odd {
    background: #FBD106;
}

/* even items 2,4,6,8,... */
table tbody tr.even,
.even {
    background: #E6453B;
}

/* hovered items */
.odd:hover,
.even:hover,
.hover {
    background: #4BB747;
    color: #FFFFFF;
}

再就是頁面代碼了：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>用jquery實現table奇偶行不同色</title>
    <link href="style/mysql.css" rel="stylesheet" />
    <script src="javascript/jquery-1.7.2.min.js"></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            //排除th標簽，th可能是有自己特有的樣式，所以定義th樣式。
            //$("tr:not(:has(th)):odd").addClass("odd");
            //$("tr:not(:has(th)):even").addClass("even");
            $("tr:odd").addClass("odd");
            $("tr:even").addClass("even");
            //如果CSS中不定義".odd:hover"和".even:hover"就需要toggleClass()。
            /*
            $("tr").mouseover(function () {
                $(this).toggleClass(".hover");
            });
            $("tr").mouseout(function () {
                $(this).toggleClass(".hover");
            });
            */
        });
    </script>
</head>

<body>
    <div id="outline">
        <table>
            <tr id="tth">
                <th>data</th>
                <th>data</th>
                <th>data</th>
                <th>data</th>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td>data</td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td>data</td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td>data</td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td>data</td>
            </tr>
        </table>
    </div>
</body>
</html>

如果不需要滑鼠事件，只需奇偶行不同色直接可以用CSS搞定。

table tr:nth-child(even) td,

            table tr:nth-child(even) th {
                background-color: #FBD106;
            }

            table tr:nth-child(odd) td,
            table tr:nth-child(odd) th {
                background-color: #E6453B;
            }

2014年9月29日 星期一