寫一個簡單的登錄頁面!!!
大家好,我是伍柒.
今天我又雙叒叕發現了一個好東西.
那就是用html做一個登錄頁面
那,該如何做呢?
首先
現在html里的body里寫
一個頭部header標簽(雙標簽)
然后在header標簽里寫登錄就像這樣
< header>用戶登錄< /header>
然后再寫一個div標簽
< div>
< input type=“text” name=“username” placeholder=“請輸入賬號…” /><(這是賬號部分,input標簽是單標簽)
< input type=“password” name=“password” placeholder=“請輸入密碼…” />(這是密碼部分)
然后再添加登錄按鈕.如下:
< input type=“button” value=“登錄” />
整理一下,總效果如下:
<body>
<header>用戶登錄</header>
<div>
<input type="text" name="username" placeholder="請輸入賬號..." />
<input type="password" name="password" placeholder="請輸入密碼...">
</div>
<div>
<input type="button" value="登錄"/>
</div>
</body>
接下來我放置一下效果圖
看起看起來不太美觀…
那
不如
加點樣式吧
<style type="text/css">
header{
width: 100%;/*這是設定寬,100%的意思是撐滿螢屏*/
height: 35px;/*這是設定高*/
background-color: black;/*這是header標簽的背景顏色*/
color: white;/*這是字體顏色*/
text-align:center;/*這是文字居中*/
line-height: 35px;
}
input[type="text"],input[type="password"]{
line-height: 48px;
margin-top: 10px;
width: 100%;
}/*這是設定賬號框和密碼框的樣式,具體的需要說的太多,
嗯....,
那就請你們動動你們的小手去百度搜一下叭*/
input[type="button"]{
width: 100%;
margin-top: 10px;
}
</style>
/*樣式最好寫在head標簽后面body標簽前面*/
效果圖來啦
看起來似憾訓可以
好了,今天的內容就到這里了,喜歡的一鍵三連,下期更精彩!!!
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/229204.html
標籤：其他