html form 居中_Html制作简单而漂亮的登录页面

最新推荐文章于 2024-04-28 15:34:18 发布

weixin_39588223

最新推荐文章于 2024-04-28 15:34:18 发布

阅读量732

点赞数 2

文章标签： html form 居中 html 空格占位符 html漂亮留言板模板 html登录页面代码 html登录页面源码 html简单登录界面代码

这篇文章主要为大家详细介绍了Html制作简单而漂亮的登录页面具体代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

先来看看样子。

html源码：

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>  
<html lang="en">  
<head>  
 <meta charset="UTF-8">  
 <title>Login</title>  
 <link rel="stylesheet" type="text/css" href="Login.css"/>  
</head>  
<body>  
 <p id="login">  
 <h1>Login</h1>  
 <form method="post">  
 <input type="text" required="required" placeholder="用户名" name="u"></input>  
 <input type="password" required="required" placeholder="密码" name="p"></input>  
 <button class="but" type="submit">登录</button>  
 </form>  
 </p>  
</body>  
</html>

css代码：

程序猿的生活：前端只需要掌握这些，你也能拿8K！（（附简历模板102份）最完整面试题含答案）zhuanlan.zhihu.com

CSS Code复制内容到剪贴板

html{   
 width: 100%;   
 height: 100%;   
 overflow: hidden;   
 font-style: sans-serif;   
}   
body{   
 width: 100%;   
 height: 100%;   
 font-family: 'Open Sans',sans-serif;   
 margin: 0;   
 background-color: #4A374A;   
}   
#login{   
 position: absolute;   
 top: 50%;   
 left:50%;   
 margin: -150px 0 0 -150px;   
 width: 300px;   
 height: 300px;   
}   
#login h1{   
 color: #fff;   
 text-shadow:0 0 10px;   
 letter-spacing: 1px;   
 text-align: center;   
}   
h1{   
 font-size: 2em;   
 margin: 0.67em 0;   
}   
input{   
 width: 278px;   
 height: 18px;   
 margin-bottom: 10px;   
 outline: none;   
 padding: 10px;   
 font-size: 13px;   
 color: #fff;   
 text-shadow:1px 1px 1px;   
 border-top: 1px solid #312E3D;   
 border-left: 1px solid #312E3D;   
 border-right: 1px solid #312E3D;   
 border-bottom: 1px solid #56536A;   
 border-radius: 4px;   
 background-color: #2D2D3F;   
}   
.but{   
 width: 300px;   
 min-height: 20px;   
 display: block;   
 background-color: #4a77d4;   
 border: 1px solid #3762bc;   
 color: #fff;   
 padding: 9px 14px;   
 font-size: 15px;   
 line-height: normal;   
 border-radius: 5px;   
 margin: 0;   
}

总结：

代码如下:

程序猿的生活：打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）zhuanlan.zhihu.com

<input type="text" required="required" **placeholder="用户名"** name="u"></input> 
<input type="password" required="required" **placeholder="密码"** name="p"></input>

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

以上就是本文的全部内容，希望对大家的学习有所帮助。

weixin_39588223

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html form 居中_Html制作简单而漂亮的登录页面

这篇文章主要为大家详细介绍了Html制作简单而漂亮的登录页面具体代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下先来看看样子。html源码：XML/HTML Code复制内容到剪贴板<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title...
复制链接

扫一扫