2018年12月18日 星期二

DW_PHP_AJAX_CH3 表單的設計與規劃_(3)CSS樣式設定_樣式檔設定

1.點選主功能表【視窗】/【CSS樣式】, 或是直接按下 Shift+F11快速鍵, 開啟「CSS樣式」面板。
2.按下面板最下方的附加樣式表按鈕, 在「附加外部樣式檔」對話框中進行外部CSS樣式檔的連結設定。


3. 引入外部樣式檔後, 在「CSS樣式」面板中點選「全部」頁籤, 展開myForm.css項目, 即可見到外部樣式檔中現有的樣式設定規則。

 <<為表單欄位加入CSS樣式設定>>

 當CSS樣式檔引入後, body 標籤的樣式會立即被套用。

 body樣式的CSS原始碼如下:
/*套用於網頁的樣式*/
body {
 background-image:url(../img/21.jpg); /*加入背景底圖*/
 margin-top:50px;      /*設定上邊界*/
 margin-left:50px;      /*設定左邊界*/
}

接著為表單中的標籤套用CSS樣式, 以「姓名:」標籤為例, 套用的方式如下:
 1. 將游標插入點移入標籤文字中, 然後按下設計視窗下方標記列裡的



/*設定網頁中標籤文字的樣式*/
.labelStyle {
 font-weight:bold; /*粗體文字*/
 font-size:14px;   /*文字大小*/
 color:#666;   /*文字顏色*/
}

同樣地, 請為文字欄位與文字區域加上textField樣式:

 textField樣式的CSS原始碼如下:
/*設定文字欄位的樣式*/
.textField {
 background-color:#FCF;  /*背景顏色*/
 color:#F06;           /*文字顏色*/
}

最後, 請分別為送出、重設按鈕加上submitButton、resetButton樣式:

 submitButton、resetButton樣式的CSS原始碼如下:
/*設定送出按鈕的樣式*/
.submitButton {
 background-color:#00F;     /*按鈕顏色*/
 color:#FFF;    /*按鈕文字顏色*/
 border-style:dotted;        /*外框線樣式*/
 border-width:thin;         /*框線寬度*/
}

/*設定重設按鈕的樣式*/
.resetButton {
 background-color:#F00;     /*按鈕顏色*/
 color:#FFF;    /*按鈕文字顏色*/
 border-style:inset;         /*外框線樣式*/
 border-width:thin;         /*框線寬度*/
}

完成CSS設定後的網頁cssForm.htm檔案內容如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表單設計</title>
<link href="../style/myForm.css" rel="stylesheet" type="text/css" />
</head>

<body>
<form id="msgForm" name="msgForm" method="post" action="msgAct.php">
  <label for="aName" class="labelStyle">姓名:</label>
  <input name="aName" type="text" class="textField" id="aName" />
  <br />
  <label for="Email" class="labelStyle">信箱:</label>
  <input name="Email" type="text" class="textField" id="Email" /><br />
<label class="labelStyle">性別:</label>
<input name="sex" type="radio" id="M" value="男" checked="checked" />
<label for="M">男</label>
<input type="radio" name="sex" id="F" value="女" />
<label for="F">女</label>
<br /><label class="labelStyle">興趣:</label>
<input name="Love[]" type="checkbox" id="Love1" value="運動" />
<label for="Love1">運動</label>
<input name="Love[]" type="checkbox" id="Love2" value="歌唱" />
<label for="Love2">歌唱</label>
<input name="Love[]" type="checkbox" id="Love3" value="閱讀" />
<label for="Love3">閱讀</label>
<br />
<label for="blood" class="labelStyle">血型:</label>
<select name="blood" id="blood">
  <option>A</option>
  <option>B</option>
  <option>AB</option>
  <option selected="selected">0</option>
</select>
<br />
<label for="msg" class="labelStyle">留言:</label>
<textarea name="msg" cols="45" rows="5" class="textField" id="msg"></textarea>
<br />
<input name="button" type="submit" class="submitButton" id="button" value="送出" />
<input name="button2" type="reset" class="resetButton" id="button2" value="重設" />
</form>
</body>
</html>

沒有留言:

張貼留言