本例最終效果如下：
一、設置整個網頁的背景色
圖1
圖2
二、創建一個盒子，讓其水平居中，距離上邊200像素。
圖3
圖4
三、把盒子設置四個角為圓角，圓10個像素。
圖5
圖6
四、在大盒子裡做一個ding盒子，設置它上面兩個角是圓角，下面兩個角是直角。
圖7
圖8
五、ding盒子裡輸入幾個字，讓這幾個字在盒子裡水平居中，垂直居中，關於盒子內居中問題可參看我寫的文【203】。
圖9
圖10
六、在deng盒子裡面再做三個小盒子，取名為ref，注意如果這三個盒子不用浮動，會有什麼效果，這個你可以試試看。
圖11
圖12
七、往ref盒子裡面添加信息，發下圖，這裡順便學習兩個標籤，一個是input，一個是button。
圖13
圖14
八、去掉背景色，然後用盒子內居中的方法，讓這些元素居中。
圖15
圖16
九、通過樣式，設置按鈕的大小和字的大小，這裡我特地用id來給元素上名字，不同於class，在樣式裡調用的時候，一個是前面加.一個是前面加#。
圖17
圖18
十、最後設置一下密碼輸入框，輸入內容時為密碼隱藏符號。
圖19
圖20
<title>Document/<title>
方塊登錄窗口
用戶名：
密 碼：
<button>確 定/<button>
分享到:
閱讀更多 落筆承冰 的文章
