效果圖
例最終效果如下:
一、設置整個網頁的背景色
圖1
圖2
二、創(chuàng)建一個盒子,讓其水平居中,距離上邊200像素。
圖3
圖4
三、把盒子設置四個角為圓角,圓10個像素。
圖5
圖6
四、在大盒子里做一個ding盒子,設置它上面兩個角是圓角,下面兩個角是直角。
圖7
圖8
五、ding盒子里輸入幾個字,讓這幾個字在盒子里水平居中,垂直居中,關于盒子內居中問題可參看我寫的文【203】。
圖9
圖10
六、在deng盒子里面再做三個小盒子,取名為ref,注意如果這三個盒子不用浮動,會有什么效果,這個你可以試試看。
圖11
圖12
七、往ref盒子里面添加信息,發(fā)下圖,這里順便學習兩個標簽,一個是input,一個是button。
圖13
圖14
八、去掉背景色,然后用盒子內居中的方法,讓這些元素居中。
圖15
圖16
九、通過樣式,設置按鈕的大小和字的大小,這里我特地用id來給元素上名字,不同于class,在樣式里調用的時候,一個是前面加.一個是前面加#。
圖17
圖18
十、最后設置一下密碼輸入框,輸入內容時為密碼隱藏符號。
圖19
圖20
、這里是最簡單的div+css,div+css在前端開發(fā)中有什么用參看我發(fā)的文【105】。
這里我用div+css做一個有顏色的盒子,瀏覽器運行后如下圖。
圖1
二、我用的開發(fā)工具是Sublime Text,代碼如下:
圖2
*請認真填寫需求信息,我們會在24小時內與您取得聯(lián)系。