2012年10月9日 星期二

利用 RabbitVCS clone/update bitbucket 上的 git 專案 


如果直接用 bitbucket 提供的
https://[username]@bitbucket.org/XXXX/XXXX.git
會顯示 Could not read Password for XXXX 的訊息
要將 url 改成
https://[username]:[password]@bitbucket.org/XXXX/XXXX.git
才行
如果是已經 clone 出來的 project, 則修改 .git/config 裡的 url 內容即可
張貼者： Lance Wu 於 下午5:28 0 意見
標籤：

git 設定

使用 git config --system 的設定值會存在 /etc/gitconfig 裡
使用 git config --global 的設定值會存在 ~/.gitconfig 裡
每個 repository 裡的 .git/config 則會覆蓋上述二個檔案的設定，提供個別 repository 專門的設定

將預設編輯器改為 vim 
git config --global core.editor vim
改使用者名稱 
git config --global user.name "Your Name"
改使用者 e-mail 位址 
git config --global user.email you@example.com
設定使用的 diff tool 
git config --global merge.tool vimdiff
查看目前設定 
git config --lis
張貼者： Lance Wu 於 下午5:03 0 意見
標籤：

2012年10月5日 星期五

[CSS] 製作自訂邊框的做法

參考: Transparent custom corners and borders, version 2

1. 製作一張含四個角的邊框圖，其中寬要設大一點，防止頁面被放大時邊框會破掉
2. 製作一張直線邊框的圖，不用太大，如果左右邊框不一樣的話就要做二張
3. html 的內容:
    <div class="cb">
        <div class="bt"> <!-- 上邊框線乃右圓角 -->
            <div></div> <!-- 左圓角 -->
        </div>
        <div class="i1"> <!-- 左邊框線 -->
        <div class="i2"> <!-- 右邊框線 -->
        <div class="i3"> <!-- 底色 -->
        <h1>Header</h1>
        <p>TEST</p>
        </div>
        </div>
        </div>
        <div class="bb"> <!-- 下方框線及右圓角 -->
            <div></div> <!-- 左圓角 -->
        </div>
    </div>
4. css 的內容: 
/* Normal styling */
.cb {margin:0.5em 0;}
    /* Top corners and border */
.bt {
    height:17px;
    margin:0 0 0 18px;  /* 設定左邊界，將空間留給顯示左上邊角的 div */
    background:url(box.png) no-repeat 100% 0;  /* 將圖靠右上對齊，顯示上方框線及右上方的邊角 */
}
.bt div {
    position:relative;
    left:-18px;  /* 原本 bt 設定了左邊界，這裡要設負值讓 div 移回原本的位置 */
    width:18px;  /* 設定邊角的寬度，避免蓋掉右上邊角 */
    height:17px;
    background:url(box.png) no-repeat 0 0; /* 將圖靠左上對齊，顯示左上方的邊角 */
    font-size:0;
    line-height:0;
}
    /* Bottom corners and border */
.bb {
    height:14px;
    margin:0 0 0 12px;  /* 設定左邊界，將空間留給顯示左下邊角的 div */
    background:url(box.png) no-repeat 100% 100%; /* 將圖靠右下對齊，顯示右下方的邊角 */
}
.bb div {
    position:relative;
    left:-12px;   /* 原本 bb 設定了左邊界，這裡要設負值讓 div 移回原本的位置 */
    width:12px;  /* 設定邊角的寬度，避免蓋掉右下邊角 */
    height:14px;
    background:url(box.png) no-repeat 0 100%; /* 將圖靠左下對齊，顯示左下方的邊角 */
    font-size:0;
    line-height:0;
}
    /* Left border */
.i1 {
    padding:0 0 0 12px;  /* 設定左邊界，避免內容和邊框重疊 */
    background:url(borders.png) repeat-y 0 0;
}
    /* Right border */
.i2 {
    padding:0 12px 0 0;   /* 設定右邊界，避免內容和邊框重疊 */
    background:url(borders.png) repeat-y 100% 0;
}
    /* Wrapper for the content. Use it to set the background colour and insert some padding between the borders and the content. */
.i3 {
    display:block;
    margin:0;
    padding:1px 10px;
    background:#fff;
}
    /* Make the content wrapper auto clearing so it will contain floats (see http://positioniseverything.net/easyclearing.html). */
.i3:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.i3 {display:inline-block;}
.i3 {display:block;}
張貼者： Lance Wu 於 下午2:53 0 意見
標籤：

2012年9月28日 星期五

[CSS] 版面置中

要讓版面置中的方法:
將 wrapper 區塊置中 
<body>
<div id="wrapper">
</div>
</body>
1. 使用自動邊界置中
#wrapper {
    width: 720px;    /* 可用 % 或其它單位 */
    margin: 0 auto;
}
2. 使用負邊界來做置中 
#wrapper {
    width: 720px;
    position: relative;
    left: 50%;           /* 將區塊的左邊對齊中央 */
    margin-left: -360px; /* 再將左邊界設為寬度一半的負值 */
}
張貼者： Lance Wu 於 下午2:22 0 意見
標籤：

2012年9月20日 星期四

[CSS] 工具說明 (Tip)

效果: ( 移到按鈕上時會出現下方黃色的文字說明 )
將要顯示的文字說明用 span 包起來 
<body>
<a href="#" class="btnLink">Button Link<span>This is a button like link</span></a>
</body>
CSS 的內容: 
<style>
a.btnLink {
    display: block;
    background-color: #94B8E9;
    border: 1px solid black;
    text-decoration: none;
    text-align: center;
    width: 300px;
    position: relative; /* 設定錨點為相對配置, span 就可依相對於錨點的位置來做絕對配置 */
}

a.btnLink:hover {
    background-color: #369;
    color: #fff;
}

a.btnLink span {
    display: none; /* 先將 span 設為隱藏，平常裡面的內容就不會顯示出來 */
}

/* 當滑鼠移到錨點上時，改變 span 的 style 讓它顯示出來 */
a.btnLink:hover span {
    display: block;
    position: absolute; /* 設為絕對位置 (相對於錨點) */
    top: 1em;  /* 設定 span 的位置，比錨點低 1em */
    left: 2em;  /* 設定 span 的位置，比錨點往右 2em */
    padding: 0.2em 0.6em;
    border: 1px solid #996633;
    background-color: #FFFF66;
    color: #000;
}
</style>
張貼者： Lance Wu 於 上午11:49 0 意見
標籤：

2012年9月19日 星期三

[CSS] 製作類似按鈕的 link

原本的超連結 (<a>) 是會在內容下方產生底線，並要點選該連結內容才會有反應
可以加入以下的 CSS 樣式，就可以產生類似按鈕的效果，在框內都會有反應，不一定要點選文字才行

<style>
a {
    display: block;            /* 設為區塊模式 */
    background-color: #94B8E9; /* 定義按鈕顏色 */
    border: 1px solid black;   /* 按鈕邊框 */
    text-decoration: none;     /* 不產生底線 */
    text-align: center;        /* 將文字置中 */
    width: 300px;              /* 設定寬度 */
}

/* 滑鼠指到連結時改變按鈕顏色 */
a:hover {
    background-color: #369;
    color: #fff;
}
</style>
<body>
<a href="#">Button Link</a>
</body>

效果:
滑鼠移到按鈕上會改變顏色:

張貼者： Lance Wu 於 下午2:33 0 意見
標籤：

2012年5月4日 星期五

正規表示法 (Regular Expression) 記錄

說明
^ : 在開頭表示後面的符號必須出現在字串的開頭
     寫在 pattern 中間則表示“不能”出現後面的符號
$ : 寫在 pattern 最後面時表示前一個符號必須出現在字串的尾端
     寫在其它地方則沒有意義
* : 表示字串中有 0 到無數個前一符號的內容
+ : 表示字串中有 1 到無數個前一符號的內容
? : 表示字串中有 0 到 1 個前一符號的內容
{} : 表示前一個符號在字串中的重覆次數
       如 /A{2}/ 表示 A 重覆二次, /A{2,5}/ 表示有 2 到 5 個 A
. : 表示任一字元
[] : 表示字串中有 [] 內的任一字元，可以用 - 來表示一組連續的字元
     如 /[0-9]/ 表示 0 到 9 中的任一數字皆符合, /[123]/ 則表示符合 1 或 2 或 3 其中一個
() : 表示一個 sub pattern
\ : 表示跳脫字元, 後面的字元會被視為一般字元
    如要表示 / 則必須寫成 \/ 才行
| : 表示前一符號或後一符號
\d : 表示任一數字，同 [0-9]
\D : 表示任一非數字，同 [^0-9]
\w : 表示任一字元，數字或 _
\W : 表示除 \w 代表的字元以外的字元
\s : 表示任一個空白符號，含 \t 等
\S : 表示任一個非空白的符號

範例
1. /^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/
    表示字串為 "(1到3個數字).(1到3個數字).(1到3個數字).(1到3個數字)" 的格式
2. /^[0-9a-fA-F]+$/
    表示字串由 9-0, a-f 及 A-F 組成




張貼者： Lance Wu 於 下午5:02 0 意見
標籤：
訂閱： 文章 (Atom)