Html完成一个简单的登录页面 |
您所在的位置：网站首页 › 简单的html登陆界面 › Html完成一个简单的登录页面 |
Html完成一个简单的登录页面
|
这篇文章主要为大家详细介绍了Html制作简单而漂亮的登录页面具体代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下 先来看看样子。
html源码： XML/HTML Code复制内容到剪贴板 LoginLogin 登录 登录后复制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; }登录后复制总结： 代码如下: 登录后复制placeholder="用户名"的作用:占位符
【相关推荐】 1. Html免费视频教程 2. 详解前端开发常用的HTML标签 3. 通过marquee标签完成滚动效果的纯html代码 4. html利用Mailto实现邮件发送功能的实例详解 5. 浏览器加载和渲染html的顺序 以上就是Html完成一个简单的登录页面的详细内容，更多请关注php中文网其它相关文章！ |
【本文地址】
今日新闻 |
推荐新闻 |