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" onclick="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>