css注册页面提交按钮怎么实现,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;

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

用户名

密码

相关样式：

.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个类

登　录

登录中...

相关样式：

.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%;

}

类

描述

实例

.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

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

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