大香蕉综合在线观看视频-日本在线观看免费福利-欧美激情一级欧美精品性-综合激情丁香久久狠狠

好房網(wǎng)

網(wǎng)站首頁 百姓心聲 > 正文

html用戶登錄頁面代碼（HTML實(shí)例網(wǎng)頁登錄頁面代碼編寫）

2022-06-03 06:33:52 百姓心聲 來源：
導(dǎo)讀 今天小風(fēng)給大家收集了一些html用戶登錄頁面代碼，HTML實(shí)例網(wǎng)頁登錄頁面代碼編寫方面的信息來分享給大家，如果大家感興趣的話就接著看下面得

今天小風(fēng)給大家收集了一些html用戶登錄頁面代碼，HTML實(shí)例網(wǎng)頁登錄頁面代碼編寫方面的信息來分享給大家，如果大家感興趣的話就接著看下面得文章吧

1、CSS實(shí)例網(wǎng)上的比較少，今天我就來分享一下關(guān)于登錄界面的實(shí)例吧！大家可以參考哦。方法

1、1、如圖，先編寫一個(gè)div，div里面有一個(gè)form表單，包括有兩個(gè)輸入框和登錄按鈕。Input中的type的text表示的是文本框，password表示的密碼框。Placeholder表示的輸入框中的默認(rèn)文字，當(dāng)我們沒有往輸入框輸入文字就會(huì)默認(rèn)顯示，如果我們往輸入框輸入文字就會(huì)自動(dòng)消失哦。Required表示必須往輸入框輸入內(nèi)容。

1、2、接著我們?cè)趕tyle標(biāo)簽里面清除所有標(biāo)簽的margin和padding。這樣元素之間的間距就會(huì)消除。

1、3、設(shè)置div的寬度和高度為3、00px，并且上下左右居中，left和top設(shè)置為5、0%，表示往右移動(dòng)5、0%，往下移動(dòng)5、0%。

1、4、設(shè)置input的高度和寬度，邊框?yàn)?、px，然后使用margin-top來讓兩個(gè)輸入框隔開一定的距離。

1、5、同理，設(shè)置button的寬度高度和邊框，margin-top也是用來拉開與輸入框的距離，不然會(huì)靠在一起，不好看。box-sizing: content-box;用來設(shè)置button撐滿整個(gè)div,如果不設(shè)置的話會(huì)溢出div。Border-radius可以用來設(shè)置按鈕的圓滑度，比如我設(shè)置了1、0px，四邊的角就會(huì)變圓一點(diǎn)。

1、6、最后預(yù)覽一下效果圖。

1、7、登錄界面源代碼如圖所示，可以自己稍加完善。

1、<!doctype html>

2、<html lang="en">

3、<head>

4、<meta charset="UTF-8、" />

5、<title>Document</title>

6、<style type="text/css">

7、*{

8、margin: 0;

9、padding: 0;

10、}

11、div{

12、position: absolute;

13、top: 5、0%;

14、left:5、0%;

15、margin: -1、5、0px 0 0 -1、5、0px;

16、width: 3、00px;

17、height: 3、00px;

18、}

19、input{

20、width:2、9、8、px;

21、height: 3、0px;

22、border: 1、px solid black;

23、margin-top: 3、0px;

24、}

25、button{

26、width:2、9、8、px;

27、height: 3、0px;

28、border: 1、px solid black;

29、margin-top: 3、0px;

30、box-sizing: content-box;

31、border-radius: 1、0px;

32、}

33、</style>

34、</head>

35、<body>

36、<div>

37、<form>

38、<input type="text" required="required" placeholder="用戶名"/>

39、<input type="password" required="required" placeholder="密碼"/>

本文到此結(jié)束，希望對(duì)大家有所幫助。

版權(quán)說明： 本文由用戶上傳，如有侵權(quán)請(qǐng)聯(lián)系刪除！

標(biāo)簽：

最新文章：