Always Summer 永遠的夏天

2010年10月31日星期日

CSS Div 水平垂直置中

網路瀏覽器種類很多，有些網頁瀏覽器喜歡有自己的規格，不守公用規範，如IE
這個時候要CSS的語法來解決

在FireFox
text-align : center 就可以達到置中的目的
用padding 和margin也可

但在IE的話
文字用padding和margin不能改變文字的位置
垂直置中必須要用 line-height:高度，高度=div高度

2010年10月28日星期四

CSS inline (在html 標籤內加入CSS)

CSS有三個寫法 inline CSS、 internal CSS、 external CSS
這次要介紹的是 inline CSS

inline CSS的優點是方便，直接可用
inline CSS的缺點是亂，不易閱讀

用法: 直接在開始標籤內寫下style=""，並在引號中加入CSS語法，如下面二例所示

a. body的CSS加入margin:0px的目地是取消內定的內容距離，依個人需求而定。background-color設定背景顏色，方便區別。

body
{
    margin:0px;
    background-color:#999;
}

b. wrapper中可設定版面的寬度，這邊的設定為800px寬。若要置中，則要加入margin-left:auto和margin-right:auto。

wrapper
{
    width:800px;
    margin-left:auto;
    margin-right:auto;
    background-color:#fff;
}

c. 下圖為網頁上呈現的縮圖，外面灰色部分是body，白色部分是wrapper

2010年10月27日星期三

CSS Internal (在html內加入CSS)

在html中，有三個方法可以加入CSS語法，分別是inline CSS、internal CSS、external CSS
這裡要介紹的是 internal CSS

方法:在 head標籤之間加入 CSS標籤，如下面所示
<head>
<style type="text/css">

</style>
</head>

在CSS標籤中可加入CSS語法
#為id : 不可重複
.為class : 可重複

CSS Div 網站架構版面基本的三個區域

一般網頁的構成分成三個部分(三個div)
1.上面的標題 header div
2.中間的文字內容 content div
3.下面的作者和版權 footer div

所以用div來設計網頁的版面時，要先把"上中下"三個div完成。這三個div的外面最好有一個wrapper div把三個div包起來，wrapper div可以把所有的 div固定，並且可用CSS將版面置中。

下圖藍色的字為程式的部分，如圖所示，一共分成三個部分top div、middle div、bottom div，然後在外面加個wrapper。

下圖為網頁上呈現的結果，紅色的部分為wrapper div，然後是內部的三個div

2010年10月26日星期二

JavaScript 事件列表

onblur 當前元素失去焦點時觸發此事件

onchange 當前元素失去焦點並且元素的內容髮生改變而觸發此事件

onclick 鼠標點擊時觸發此事件

ondblclick 鼠標雙擊時觸發此事件

onerror 出現錯誤時觸發此事件

onfocus 當某個元素獲得焦點時觸發此事件

onkeydown 當鍵盤上某個按鍵被按下時觸發此事件

onkeypress 當鍵盤上的某個鍵被按著時觸發此事件

onkeyup 當鍵盤上某個按鍵被按放開時觸發此事件

onmousedown 按下鼠標時觸發此事件

onmousemove 鼠標移動時觸發此事件

onmouseout 當鼠標離開某對象範圍時觸發此事件

onmouseover 當鼠標移動到某對象範圍的上方時觸發此事件

onmouseup 鼠標按下後鬆開鼠標時觸發此事件

onresize 當瀏覽器的窗口大小被改變時觸發此事件

onselect 選取文字時觸發此事件

onunload 離開當前頁面時觸發此事件