Html制作简单而漂亮的登录页面-web前端教程

最新推荐文章于 2024-06-16 23:02:16 发布

猿说前端

最新推荐文章于 2024-06-16 23:02:16 发布

阅读量5.4k

点赞数 8

文章标签： html web开发前端 Web前端前端教程

本文链接：https://blog.csdn.net/ITZ1992/article/details/107127025

版权

这篇文章主要为大家详细介绍了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代码：
> 
> 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; 
> 
> }

**总结：**

代码如下:

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

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

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

从事前端6年，一个人学习会有迷茫，动力不足。这里推荐一下我的前端学习交流qun：731771211 ，里面都是学习前端的，如果你想制作酷炫的网页，想学习编程。整理了一份最新最全面前端学习资料，从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴，有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入学习。

点击：加入

猿说前端

关注

8
点赞
踩
31

收藏

觉得还不错? 一键收藏
1
评论
Html制作简单而漂亮的登录页面-web前端教程

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

扫一扫