整合營銷服務商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          div + css 實現(xiàn)登錄界面

          果圖:

          效果圖

          div + css 實現(xiàn)登錄界面,用到的知識點:

          • 表單、h、div、input標簽的使用
          • 行內元素和塊級元素的區(qū)別
          • css類選擇器和標簽選擇器
          • 字體屬性,包括大小、顏色、對齊等
          • border的使用
          • padding和margin的使用

          實現(xiàn)代碼 :

          例最終效果如下:

          一、設置整個網頁的背景色

          圖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


          主站蜘蛛池模板: 在线视频一区二区三区三区不卡| 一区二区不卡久久精品| 日韩在线一区二区三区免费视频| 无码精品国产一区二区三区免费| 一区二区国产在线观看| 亚洲丰满熟女一区二区v| 亚洲国产精品成人一区| 日本精品3d动漫一区二区| 亚洲国产欧美一区二区三区| 日韩高清国产一区在线 | 中文字幕av无码一区二区三区电影| 尤物精品视频一区二区三区| 亚洲AV成人一区二区三区在线看 | 国产精品无码AV一区二区三区| 国产91一区二区在线播放不卡| 国产成人AV区一区二区三| 精品一区二区ww| 99偷拍视频精品一区二区 | 国产伦精品一区二区三区视频金莲| 在线观看精品视频一区二区三区| 亚洲一区二区三区在线观看网站| 国产精品揄拍一区二区久久| 亚洲图片一区二区| 亚洲av乱码一区二区三区香蕉 | 性色av无码免费一区二区三区| 一本一道波多野结衣AV一区| 精品人妻无码一区二区三区蜜桃一| 色综合视频一区中文字幕| 伊人色综合网一区二区三区| 久久久无码精品人妻一区| 国产一区高清视频| 好湿好大硬得深一点动态图91精品福利一区二区 | 欧洲精品免费一区二区三区| 国产女人乱人伦精品一区二区| 日韩精品一区二区三区中文字幕| 一区二区三区影院| 日韩精品视频一区二区三区| 午夜一区二区免费视频| 国产美女口爆吞精一区二区| 文中字幕一区二区三区视频播放| 国产精品自拍一区|