拼图Pintuer.com登录页面表单
web 拼图Pintuer 2019-12-11 253 0
关于本站

淘淘IT

记录工作学习中的点点滴滴

本站创建于2017年,用于记录工作和学习中遇到的问题。同时,不断提升网站的使用体验,增加新的功能。

844930 1249 12
最新评论
感谢大佬解决了我的问题
评 留言
11111111111111111111ewqr :ku:
评 留言
@xiaoniba 好像是编码GBK和utf-8的区别,请看下我摘抄的一篇文章,里面有介绍http://taotaoit.com/article/details/885.html,你可以尝试下是否可以
评 tp5.1中字段别名是汉字,提示错误:不支持的数据表达式
\x7f-\xff 这个匹配什么东东,会不会出现安全问题??? 改成这样如何 if ($strict && !preg_match('/^[\w\.\*\x{4e00}-\x{9fa5}]+$/u', $key)) {
评 tp5.1中字段别名是汉字,提示错误:不支持的数据表达式
完美解决 牛逼
评 tp5.1中字段别名是汉字,提示错误:不支持的数据表达式
文章标签更多
ThinkPHP (121)
Mysql (28)
DedeCms (28)
jQuery (28)
证件照 (1)
setInc (3)
setDec (3)
onclick (3)
打开边栏(ESC) 关闭边栏(ESC)

Pintuer提供了一个登录页面,网址http://www.pintuer.com/react.html#form

但是我感觉表单有点小,所以就给form表单加了样式.form-big,

表单变大了,小图标没有变大,给小图标加上样式.text-big或.text-large,大小还是没变,后来发现

pintuer.css里面

.field-icon-right .icon{position:absolute;right:0;top:0;width:34px;height:34px;text-align:center;line-height:34px;font-size:16px;font-weight:normal}

控制了大小,然后自己重新定义图标大小。

然后调整验证码的大小。

效果如图:

from clipboard

代码如下:

<div align="center">
					<form action="#index.html" method="post" class="form-big form_ttit">
						<div class="panel padding" style="width: 450px;text-align: left;">
							<div class="text-center">
								<br>
								<h2><strong>登录</strong></h2>
							</div>
							<div class="" style="padding:20px;">
								<div class="form-group">
									<div class="field field-icon-right">
										<input type="text" class="input" name="admin" placeholder="登录账号" />
										<span class="icon icon-user text-large"></span>
									</div>
								</div>
								<div class="form-group">
									<div class="field field-icon-right">
										<input type="password" class="input" name="password" placeholder="登录密码" />
										<span class="icon icon-key text-large"></span>
									</div>
								</div>
								<div class="form-group">
									<div class="field">
										<input type="text" class="input" name="passcode" placeholder="填写右侧的验证码" />
										<img style='vertical-align:middle;cursor:pointer;height:44px;width:120px;' class='verifyImg' src='__ADMIN__/img/clickForVerify.png' title='刷新验证码' onclick='javascript:getVerify()'/>
									</div>
								</div>
								<div class="form-group">
									<div class="field">
										<button class="button button-block bg-main text-big form-actions">立即登录</button>
									</div>
								</div>
								<div class="form-group">
									<div class="field text-center">
										<p class="text-muted text-center"> <a class="" href="#login.html"><small>忘记密码了?</small></a> | <a class="" href="#register.html">注册新账号</a>
										</p>
									</div>
								</div>
							</div>
						</div>
					</form>
				</div>
自定义css样式

/*登录表单*/
.form_ttit{}
/*验证码样式*/
.verifyImg {border-left: 1px solid #ddd;border-radius: 0 4px 4px 0;height: 44px;line-height: 44px; position: absolute;right: 1px;text-align: center;top: 1px;}
/*登录页面图标大小*/
.form_ttit .field-icon-right .icon{width:44px;height:44px;line-height:44px;font-size:20px;}

版权声明:本篇文章来源于网络。 来源链接

相关推荐
Pintuer+ajax验证提交表单,不知道为什么敲回车提交两次表单
拼图Pintuer | 2019-12-26 327
html代码: <form method="post" class="form-big" onsubmit="return false" id="ajaxForm"> <div class="panel padding radius-none"> <div class="t...
拼图Pintuer里面.layout,.container,.container-layout的区别
拼图Pintuer | 2019-12-16 303
先看css: .layout { width: 100% } .container, .container-layout { margin: 0 auto; padding: 0 10px } html代码: <div class="container" style="background:#ccc;"> ...