HTML写一个登录框样式

以QQ空间的登陆框为例，原先的代码很复杂，还涉及了其他的知识，对于刚刚接触的人来说想写一点点样式来练练手的话可以看一下。
写好之后是这个样子

下面是代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">body{background-color: gray;}.wrap{width: 414px;height: 312px;border: solid rgb(238,238,238) 2px;background-color: white;/*margin: 0px auto;*/}.wrap .title{margin-top: 6px;margin-bottom: 16px;font-size: 20px;color: rgb(51,51,51);text-align: center;/*居中*/}.wrap .infor{text-align: center;color: #666;font-size: 16px;margin-bottom: 36px;}.wrap .infor a{text-decoration: none;color:#3481cf;}.wrap #form{text-align: center;height:150px ;width: 272px;margin: 0px auto;}.wrap #form .input{height: 38px;width: 268px;box-sizing: border-box;padding: 10px;padding-right: 0px;margin-bottom: 17px;border-radius: 3px;border: solid rgb(214,214,21)  1px;}.wrap #form #btn{border-radius: 3px;height: 37px;width: 258px;padding: 1px 7px 2px 7px;box-sizing: content-box;border: none;background-color:rgb(136,210,48) ;color: white;font-size: 17px;}</style></head><body><div class="wrap"><!--登录框的最外部的框框--><div class="title"><!--账号密码字体存放的div-->账号密码登录</div><div class="infor"> <!--第二行字存放的div-->推荐使用<a href="">快速安全登录</a>,防止盗号。</div><form action="" method="post" id="form"> <!--账号密码登录的一个from表单--><input type="text" class="input" placeholder="支持QQ号/邮箱/手机号登录"/><input type="text"class="input" placeholder="密码"/><button type="button" id="btn">登 录</button><!--简单来讲就是一个大的方块（wrap）包含了title，infor，from三大块的信息，from中又包含了账号，密码，登录三个块块--></form></div></body>
</html>

HTML写一个登录框样式相关推荐

一个“登录框“引发的安全问题
前言搞安全的小伙伴只有一个登录框你都能测试哪些漏洞? 通常大家测试的都会测试关键部分,为了有更好的测试效果,小厂会提供给你用户名密码:但是一些比较重要的企业,而这个环境却是正式环境,里面存放着一些数 ...
点击登录按钮，弹出一个登录框
点击登录按钮,弹出一个登录框首先将登录框写在一个div块里,里面放上登录框所需的各种信息,比如用户名.密码等,并将CSS样式里的display设置成none.然后在你的前端页面,比如index.ht ...
用IDEA写一个登录系统
用IDEA写一个登录系统+连接数据库 1-1配置jdk环境变量 1-2导入jdk 1-3创建web application 1-4在这需要手动创建bin包和main包如下图 1-5手动加入三个jar ...
uniapp写一个登录页面
很高兴为您解答,可以参考以下步骤来写一个登录页面: 创建一个uniapp项目,并在项目中创建一个登录页面: 在登录页面中添加用户名和密码输入框,以及一个登录按钮: 在登录按钮的点击事件中,添加验证用户 ...
一个登录框引发的“安全问题”
一个文本框可能存在哪些漏洞前言用户名枚举弱口令空口令登录认证绕过存在暴力破解风险图形验证码不失效短信验证码绕过短信验证码可暴力破解短信验证码可预测短信炸弹恶意锁定问题密码明文 ...
写一个登录界面——用窗体界面实现
写一个登录界面--用窗体界面实现我们在上网的时候总能看到各种各样的窗体界面,比如:网页角落突然弹出的小广告.登录界面.画图板--接下来我就来讲讲如何创建一个窗体界面并制作一个登录界面. 窗体类的英文 ...
[html] 写一个搜索框，聚焦时搜索框向左拉长并有动画效果
[html] 写一个搜索框,聚焦时搜索框向左拉长并有动画效果为啥直接粘贴html发布以后就没有了呢个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 ...
javaweb 常用jar包_使用javaweb写一个登录案例
下载地址:https://gitee.com/dl_shrimp/java_web_login_case.git https://www.zhihu.com/video/124178088859969 ...
java myqq ui,用Java Swing写一个登录界面
首先我们先看一下预览效果: 要实现这样一个界面就需要用到Java Swing相关代码: 首先我们在eclipse中创建一个Java项目,在这个项目下创建包还有相关的类我们的项目一共分为四个java文 ...

HTML写一个登录框样式

HTML写一个登录框样式相关推荐

最新文章

热门文章