Html如何制作登录页面
生活随笔
收集整理的這篇文章主要介紹了
Html如何制作登录页面
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
這篇文章給大家分享的是有關(guān)Html如何制作登錄頁面的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。
先來看看樣子。
html源碼：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
-
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>Login</title> <linkrel="stylesheet"type="text/css"href="Login.css"/> </head> <body> <pid="login"> <h2>Login</h2> <formmethod="post"> <inputtype="text"required="required"placeholder="用戶名"name="u"></input> <inputtype="password"required="required"placeholder="密碼"name="p"></input> <buttonclass="but"type="submit">登錄</button> </form> </p> </body> </html>
css代碼：
CSS Code復(fù)制內(nèi)容到剪貼板
-
html{ width:100%; height:100%; overflow:hidden; font-style:sans-serif; } body{ width:100%; height:100%; font-family:'OpenSans',sans-serif; margin:0; background-color:#4A374A; } #login{ position:absolute; top:50%; left:50%; margin:-150px00-150px; width:300px; height:300px; } #loginh2{ color:#fff; text-shadow:0010px; letter-spacing:1px; text-align:center; } h2{ font-size:2em; margin:0.67em0; } input{ width:278px; height:18px; margin-bottom:10px; outline:none; padding:10px; font-size:13px; color:#fff; text-shadow:1px1px1px; border-top:1pxsolid#312E3D; border-left:1pxsolid#312E3D; border-right:1pxsolid#312E3D; border-bottom:1pxsolid#56536A; border-radius:4px; background-color:#2D2D3F; } .but{ width:300px; min-height:20px; display:block; background-color:#4a77d4; border:1pxsolid#3762bc; color:#fff; padding:9px14px; font-size:15px; line-height:normal; border-radius:5px; margin:0; }
總結(jié)：
復(fù)制代碼
代碼如下:
<inputtype="text"required="required"**placeholder="用戶名"**name="u"></input> <inputtype="password"required="required"**placeholder="密碼"**name="p"></input>
placeholder="用戶名"的作用:占位符
總結(jié)
以上是生活随笔為你收集整理的Html如何制作登录页面的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Testing on block siz
- 下一篇： 3dmax怎么打室内筒灯灯光 3dmax