css实现登录注册可切换页面与boostrap按钮组

                                    

1、设置login_box

.login-box {
  width: 420px;
  height: 408px;
  padding: 20px;
  background-color: #fff;
}

2、设置login-tabs,底部设置灰色边框

.login-box .login-tabs {
  font-family: tahoma, arial, 'Hiragino Sans GB', '\5FAE\8F6F\96C5\9ED1', sans-serif;
  margin-bottom: 15px;
  padding: 0;
  list-style: none;
  border-bottom: 2px solid #d9d9d9;
}

2_1、logintabs要清除浮动,因为他里面的li元素都是向左浮动

.login-box .login-tabs:before,
.login-box .login-tabs:after {
  content: " ";
  display: table;
}
.login-box .login-tabs:after {
  clear: both;
}

2_2、a元素底部设置同样的灰色边框

.login-box .login-tabs li {
  display: block;
  float: left;
  margin: 0;
  padding: 0;
}
.login-box .login-tabs li a {
  font-size: 16px;
  display: block;
  margin-bottom: -2px;
  padding: 10px 35px;
  border-bottom: 2px solid #d9d9d9;
}

2-3、被点击的a元素动态添加active样式,该样式使底部边框变为红色

.login-box .login-tabs li a:hover,
.login-box .login-tabs li a:focus {
  text-decoration: none;
}
.login-box .login-tabs li.active a,
.login-box .login-tabs li.active a:hover,
.login-box .login-tabs li.active a:focus {
  color: #ff6a00;
  border-bottom-color: #ff6a00;
}


3、接下来是设置提示信息login-notice

.login-box .login-panel {
  font-size: 12px;
  margin: 0 38px;
}
.login-box .login-panel .login-notice {
  min-height: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.login-box .login-panel .login-notice .notice-cont {
  line-height: 18px;
  padding: 3px 12px;
  color: #7e7e80;
  border: 1px solid #feb98a;
  background-color: #fbf0e8;
}
.login-box .login-panel .login-notice .notice-cont .ico {
  margin-top: -2px;
  margin-right: 5px;


一个输入框的设置在花礼网上居然如此复杂

<div class="form-group">
								<label class="sr-only" for="InputUser">用户名</label>
								<div class="input-group">
									<div class="input-group-addon"><span class="ico ico-user"></span></div>
									<div class="email_autocomplete1">
                            	<input name="Email" autocomplete="off" placeholder="E-mail地址/手机号" nodetype="email" value="2590428884@qq.com" type="text" id="Email" config="{width:267,height:40}"></div>
								</div>
							</div>


<div class="form-group">
								<label class="sr-only" for="InputPassword">密码</label>
								<div class="input-group">
									<div class="input-group-addon"><span class="ico ico-lock"></span></div>
									<div class="email_autocomplete1"><input name="PassWord" autocomplete="off" placeholder="用户密码" type="password" id="PassWord"></div>
								</div>
							</div>

相关样式:

.login-box .login-panel .input-group-addon {
  padding: 10px;
  border: 1px solid #d2d2d2;
  border-right: 0;
  border-radius: 0;
  background-color: #eee;
}

sr-only样式

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}


ico样式

.ico {
  display: inline-block;
  vertical-align: middle;
  background-repeat: no-repeat;
}






登录按钮的设置居然用了4个类

<button class="btn btn-primary btn-lg btn-block" type="button" οnclick="return Check_User_Login()" id="dosubmit">登 录</button>
<button class="btn btn-primary btn-lg btn-block" type="button" disabled="disabled" style="display:none;" id="submiting">登录中...</button>


相关样式:

.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.btn:hover,
.btn:focus,
.btn.focus {
  color: #4d4d4d;
  text-decoration: none;
}
.btn:active,
.btn.active {
  outline: 0;
  background-image: none;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}


.btn-primary {
  color: #ffffff;
  background-color: #ff6a00;
  border-color: #ff6a00;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active {
  color: #ffffff;
  border-color: #f56600;
  background-color: #f56600;}

上面设置了那么多.btn-primary我也不知道为什么

正常划过一个登录按钮的效果是这样,颜色较深:


没划过就略浅



如果去掉第二部分的

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active

划过效果如下:




.btn-lg,
.btn-group-lg > .btn {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}

.btn-block {
  display: block;
  width: 100%;
}
.btn-block + .btn-block {
  margin-top: 5px;
}
input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
  width: 100%;
}



以下样式可用于<a>, <button>, 或 <input> 元素上:

描述 实例
.btn 为按钮添加基本样式 尝试一下
.btn-default 默认/标准按钮 尝试一下
.btn-primary 原始按钮样式(未被操作) 尝试一下
.btn-success 表示成功的动作 尝试一下
.btn-info 该样式可用于要弹出信息的按钮 尝试一下
.btn-warning 表示需要谨慎操作的按钮 尝试一下
.btn-danger 表示一个危险动作的按钮操作 尝试一下
.btn-link 让按钮看起来像个链接 (仍然保留按钮行为) 尝试一下
.btn-lg 制作一个大按钮 尝试一下
.btn-sm 制作一个小按钮 尝试一下
.btn-xs 制作一个超小按钮 尝试一下
.btn-block 块级按钮(拉伸至父元素100%的宽度) 尝试一下
.active 按钮被点击 尝试一下
.disabled 禁用按钮

原文链接:Bootstrap 按钮 | 菜鸟教程

http://www.runoob.com/bootstrap/bootstrap-buttons.html


原文上说这是设置块级的原始按钮

 <button type="button" class="btn btn-primary btn-lg btn-block">
      块级的原始按钮
   </button>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值