從一個簡單的加法運算功能開發建立 HTML+JavaScript+CSS 概念(中)

(上)(中)(下)

完成了應用程式的基礎功能,在預設的情形下,網頁只呈現了 HTML 定義的外觀,還不適合開放給使用者,因此接下來必須透過CSS 調整其外觀,同樣的,我們繼續前一篇文章的範例,如下圖,來看看其中必須調整的部份,有幾個部份,以下逐一作說明。


縮短文字方塊長度

預設的文字方塊太長必須將其縮短,要達到這個目的,只需設定 width 樣式即可,以第一個文字方塊為例,設定其 style 屬性如下:

<input id="a" type="text" style="width:60px;" />

其中設定了一個 width 樣式指定其值等於 60px , px 是像素單位,表示以 60 個像素的寬度呈現文字方塊,完成後的畫面如下:
如你所見,左邊的 a 文字方塊變短了,同樣的,右邊的文字方塊依相同的方式進行設定即可,最後的結果如下:
放寬加法符號(+)的邊距

完成設定之後,接下來調整文字方塊與 + 的距離,對於左邊的文字方塊,需要的屬性是 margin-right ,這個屬性表示與右邊元素的距離,同樣以像素為單位,將其設定如下:

<input id="a" type="text" style="width:60px;margin-right:10px;" />

這一次的 style 設定了 margin-right 樣式項目為 10 px ,如此一來, a 文字方塊會與它右邊的元素保持 10px 的距離,如下圖:


接下來要調整右邊文字方塊,由於 + 在其左邊,因此設定 margin-left 屬性值如下:

<input id="b" type="text" style="width:60px;margin-left:10px;" />

完成兩個文字方塊的設定,最後就得到以下的畫面,這一次符號 + 多出來空間不再與文字方塊連在一起。
調整數值呈現方向

由於這個應用程式提供的是兩個數值資料的加法運算,因此使用者於文字方塊輸入的均是數字,而通常數字資料會以靠右的方向呈現,而非文字資料的靠左,要達到靠右的效果,所需的樣式項目是 text-align ,這個項目預設是靠左對齊,樣式值為 left ,明確的將其指定為 right 即可,如下式:

<input id="a" type="text" style="width:60px;margin-right:10px;
text-align:right;" />

現在,檢視其效果,由於只設定了左邊的 a 文字方塊,因此當輸入數字之後,於未設定的 b 文字方塊效果差異如下:



現在,左邊的文字方塊已經靠右對齊,而右邊的文字方塊則維持預設值-靠左對齊。到目前為止我們完成了所需的 CSS 設定,完整的設定如下:

<body>
    <input id="a" type="text" style="width:60px;margin-right:10px;text-align:right;" />+
    <input id="b" type="text"
      style="width:60px;margin-left:10px;text-align:right;" />
    <button onclick="add()" ></button>
    <output id="result"></output>
</body>

在 a 與 b 的兩個 input 元素中,設定了 style 屬性,因此現在可以得到比較好的視覺效果,在網頁上呈現的結果如下:


如你所見,相較於原來未經過設定的外觀,透過 CSS 調整的操作介面在視覺上呈現了比較合適的效果。


(上)(中)(下)



沒有留言: