當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

Html如何制作登录页面

發布時間：2023/12/19 综合教程 19 生活家

生活随笔收集整理的這篇文章主要介紹了 Html如何制作登录页面小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

這篇文章給大家分享的是有關Html如何制作登錄頁面的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

先來看看樣子。

html源碼：

XML/HTML Code復制內容到剪貼板

<!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復制內容到剪貼板

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;
}

總結：

復制代碼

代碼如下:

<inputtype="text"required="required"**placeholder="用戶名"**name="u"></input>
<inputtype="password"required="required"**placeholder="密碼"**name="p"></input>

placeholder="用戶名"的作用:占位符

總結

以上是生活随笔為你收集整理的Html如何制作登录页面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

html
页面

上一篇： Testing on block siz
下一篇： 3dmax怎么打室内筒灯灯光 3dmax