一些项目需要的东西整合（1）——九款按钮

怕自己忘了，也为一些刚刚接触WEB的同学分享一下才开始不久做项目的一些东西！

九款按钮

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>9款超炫的 CSS3 复选框（Checkbox) </title>
<link rel="stylesheet" href="assets/reset.css">
<style>/* .slideOne */
.slideOne {
width: 50px;
height: 10px;
background: #333;
margin: 20px auto;
position: relative;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
}
.slideOne label {
display: block;
width: 16px;
height: 16px;
position: absolute;
top: -3px;
left: -3px;
cursor: pointer;
background: #fcfff4;
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.slideOne input[type=checkbox] {
visibility: hidden;
}
.slideOne input[type=checkbox]:checked + label {
left: 37px;
}

/* end .slideOne */
/* .slideTwo */
.slideTwo {
width: 80px;
height: 30px;
background: #333;
margin: 20px auto;
position: relative;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
}
.slideTwo:after {
content: ‘‘;
position: absolute;
top: 14px;
left: 14px;
height: 2px;
width: 52px;
background: #111;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
}
.slideTwo label {
display: block;
width: 22px;
height: 22px;
cursor: pointer;
position: absolute;
top: 4px;
z-index: 1;
left: 4px;
background: #fcfff4;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
-moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
}
.slideTwo label:after {
content: ‘‘;
width: 10px;
height: 10px;
position: absolute;
top: 6px;
left: 6px;
background: #333;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: inset 0px 1px 1px black, 0px 1px 0px rgba(255, 255, 255, 0.9);
-webkit-box-shadow: inset 0px 1px 1px black, 0px 1px 0px rgba(255, 255, 255, 0.9);
box-shadow: inset 0px 1px 1px black, 0px 1px 0px rgba(255, 255, 255, 0.9);
}
.slideTwo input[type=checkbox] {
visibility: hidden;
}
.slideTwo input[type=checkbox]:checked + label {
left: 54px;
}
.slideTwo input[type=checkbox]:checked + label:after {
background: #00bf00;
}

/* end .slideTwo */
/* .slideThree */
.slideThree {
width: 80px;
height: 26px;
background: #333;
margin: 20px auto;
position: relative;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
}
.slideThree:after {
content: ‘OFF‘;
color: #000;
position: absolute;
right: 10px;
z-index: 0;
font: 12px/26px Arial, sans-serif;
font-weight: bold;
text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.15);
}
.slideThree:before {
content: ‘ON‘;
color: #00bf00;
position: absolute;
left: 10px;
z-index: 0;
font: 12px/26px Arial, sans-serif;
font-weight: bold;
}
.slideThree label {
display: block;
width: 34px;
height: 20px;
cursor: pointer;
position: absolute;
top: 3px;
left: 3px;
z-index: 1;
background: #fcfff4;
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
-moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
}
.slideThree input[type=checkbox] {
visibility: hidden;
}
.slideThree input[type=checkbox]:checked + label {
left: 43px;
}

/* end .slideThree */
/* .roundedOne */
.roundedOne {
width: 28px;
height: 28px;
position: relative;
margin: 20px auto;
background: #fcfff4;
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
}
.roundedOne label {
width: 20px;
height: 20px;
cursor: pointer;
position: absolute;
left: 4px;
top: 4px;
background: -moz-linear-gradient(top, #222222 0%, #45484d 100%);
background: -webkit-linear-gradient(top, #222222 0%, #45484d 100%);
background: linear-gradient(to bottom, #222222 0%, #45484d 100%);
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
}
.roundedOne label:after {
content: ‘‘;
width: 16px;
height: 16px;
position: absolute;
top: 2px;
left: 2px;
background: #00bf00;
background: -moz-linear-gradient(top, #00bf00 0%, #009400 100%);
background: -webkit-linear-gradient(top, #00bf00 0%, #009400 100%);
background: linear-gradient(to bottom, #00bf00 0%, #009400 100%);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
}
.roundedOne label:hover::after {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
opacity: 0.3;
}
.roundedOne input[type=checkbox] {
visibility: hidden;
}
.roundedOne input[type=checkbox]:checked + label:after {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
}

/* end .roundedOne */
/* .roundedTwo */
.roundedTwo {
width: 28px;
height: 28px;
position: relative;
margin: 20px auto;
background: #fcfff4;
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
}
.roundedTwo label {
width: 20px;
height: 20px;
position: absolute;
top: 4px;
left: 4px;
cursor: pointer;
background: -moz-linear-gradient(top, #222222 0%, #45484d 100%);
background: -webkit-linear-gradient(top, #222222 0%, #45484d 100%);
background: linear-gradient(to bottom, #222222 0%, #45484d 100%);
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
}
.roundedTwo label:after {
content: ‘‘;
width: 9px;
height: 5px;
position: absolute;
top: 5px;
left: 4px;
border: 3px solid #fcfff4;
border-top: none;
border-right: none;
background: transparent;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.roundedTwo label:hover::after {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
opacity: 0.3;
}
.roundedTwo input[type=checkbox] {
visibility: hidden;
}
.roundedTwo input[type=checkbox]:checked + label:after {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
}

/* end .roundedTwo */
/* .squaredOne */
.squaredOne {
width: 28px;
height: 28px;
position: relative;
margin: 20px auto;
background: #fcfff4;
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
}
.squaredOne label {
width: 20px;
height: 20px;
position: absolute;
top: 4px;
left: 4px;
cursor: pointer;
background: -moz-linear-gradient(top, #222222 0%, #45484d 100%);
background: -webkit-linear-gradient(top, #222222 0%, #45484d 100%);
background: linear-gradient(to bottom, #222222 0%, #45484d 100%);
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
}
.squaredOne label:after {
content: ‘‘;
width: 16px;
height: 16px;
position: absolute;
top: 2px;
left: 2px;
background: #00bf00;
background: -moz-linear-gradient(top, #00bf00 0%, #009400 100%);
background: -webkit-linear-gradient(top, #00bf00 0%, #009400 100%);
background: linear-gradient(to bottom, #00bf00 0%, #009400 100%);
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}
.squaredOne label:hover::after {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
opacity: 0.3;
}
.squaredOne input[type=checkbox] {
visibility: hidden;
}
.squaredOne input[type=checkbox]:checked + label:after {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
}

/* end .squaredOne */
/* .squaredTwo */
.squaredTwo {
width: 28px;
height: 28px;
position: relative;
margin: 20px auto;
background: #fcfff4;
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
}
.squaredTwo label {
width: 20px;
height: 20px;
cursor: pointer;
position: absolute;
left: 4px;
top: 4px;
background: -moz-linear-gradient(top, #222222 0%, #45484d 100%);
background: -webkit-linear-gradient(top, #222222 0%, #45484d 100%);
background: linear-gradient(to bottom, #222222 0%, #45484d 100%);
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
}
.squaredTwo label:after {
content: ‘‘;
width: 9px;
height: 5px;
position: absolute;
top: 4px;
left: 4px;
border: 3px solid #fcfff4;
border-top: none;
border-right: none;
background: transparent;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.squaredTwo label:hover::after {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
opacity: 0.3;
}
.squaredTwo input[type=checkbox] {
visibility: hidden;
}
.squaredTwo input[type=checkbox]:checked + label:after {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
}

/* end .squaredTwo */
/* .squaredThree */
.squaredThree {
width: 20px;
position: relative;
margin: 20px auto;
}
.squaredThree label {
width: 20px;
height: 20px;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
background: -moz-linear-gradient(top, #222222 0%, #45484d 100%);
background: -webkit-linear-gradient(top, #222222 0%, #45484d 100%);
background: linear-gradient(to bottom, #222222 0%, #45484d 100%);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.4);
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.4);
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.4);
}
.squaredThree label:after {
content: ‘‘;
width: 9px;
height: 5px;
position: absolute;
top: 4px;
left: 4px;
border: 3px solid #fcfff4;
border-top: none;
border-right: none;
background: transparent;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.squaredThree label:hover::after {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
opacity: 0.3;
}
.squaredThree input[type=checkbox] {
visibility: hidden;
}
.squaredThree input[type=checkbox]:checked + label:after {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
}

/* end .squaredThree */
/* .squaredFour */
.squaredFour {
width: 20px;
position: relative;
margin: 20px auto;
}
.squaredFour label {
width: 20px;
height: 20px;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
background: #fcfff4;
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
}
.squaredFour label:after {
content: ‘‘;
width: 9px;
height: 5px;
position: absolute;
top: 4px;
left: 4px;
border: 3px solid #333;
border-top: none;
border-right: none;
background: transparent;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.squaredFour label:hover::after {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
opacity: 0.5;
}
.squaredFour input[type=checkbox] {
visibility: hidden;
}
.squaredFour input[type=checkbox]:checked + label:after {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
}

/* end .squaredFour */
* {
box-sizing: border-box;
}

body {
background: #333;
font-family: ‘Open Sans‘, sans-serif;
font-weight: 300;
}
body h1, body h2 {
color: #eee;
font-size: 30px;
text-align: center;
margin: 60px 0 50px 0;
-webkit-font-smoothing: antialiased;
text-shadow: 0px 1px black;
}
body .ondisplay {
text-align: center;
/*border-bottom: 1px solid gray;*/
padding: 60px 0;
}
body .ondisplay section {
width: 100px;
height: 100px;
background: #555;
display: inline-block;
position: relative;
text-align: center;
margin-top: 5px;
border: 1px solid gray;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
body .ondisplay section:before {
content: ‘click it‘;
color: #bbb;
font-size: 12px;
font-weight: 400;
-webkit-font-smoothing: antialiased;
text-shadow: 0px 1px black;
}
body .ondisplay section:after {
content: attr(title);
position: absolute;
width: 100%;
left: 0;
bottom: 3px;
color: #fff;
font-size: 12px;
font-weight: 400;
-webkit-font-smoothing: antialiased;
text-shadow: 0px 1px black;
}</style>
<script src="http://dreamsky.github.io/main/blog/common/jquery.min.js"></script>
<script src="http://dreamsky.github.io/main/blog/common/init.js"></script>
<script src="assets/prefixfree.min.js"></script>
</head>

<body>
<h1>9款超炫的 CSS3 复选框（Checkbox) </h1>
<div class="ondisplay">

<section title=".slideOne">
<!-- .slideOne -->
<div class="slideOne">
<input type="checkbox" value="None" id="slideOne" name="check" checked />
<label for="slideOne"></label>
</div>
<!-- end .slideOne -->
</section>

<section title=".slideTwo">
<!-- .slideTwo -->
<div class="slideTwo">
<input type="checkbox" value="None" id="slideTwo" name="check" checked />
<label for="slideTwo"></label>
</div>
<!-- end .slideTwo -->
</section>

<section title=".slideThree">
<!-- .slideThree -->
<div class="slideThree">
<input type="checkbox" value="None" id="slideThree" name="check" checked />
<label for="slideThree"></label>
</div>
<!-- end .slideThree -->
</section>

<section title=".roundedOne">
<!-- .roundedOne -->
<div class="roundedOne">
<input type="checkbox" value="None" id="roundedOne" name="check" checked />
<label for="roundedOne"></label>
</div>
<!-- end .roundedOne -->
</section>

<section title=".roundedTwo">
<!-- .roundedTwo -->
<div class="roundedTwo">
<input type="checkbox" value="None" id="roundedTwo" name="check" checked />
<label for="roundedTwo"></label>
</div>
<!-- end .roundedTwo -->
</section>

<section title=".squaredOne">
<!-- .squaredOne -->
<div class="squaredOne">
<input type="checkbox" value="None" id="squaredOne" name="check" checked />
<label for="squaredOne"></label>
</div>
<!-- end .squaredOne -->
</section>

<section title=".squaredTwo">
<!-- .squaredTwo -->
<div class="squaredTwo">
<input type="checkbox" value="None" id="squaredTwo" name="check" checked />
<label for="squaredTwo"></label>
</div>
<!-- end .squaredTwo -->
</section>

<section title=".squaredThree">
<!-- .squaredThree -->
<div class="squaredThree">
<input type="checkbox" value="None" id="squaredThree" name="check" checked />
<label for="squaredThree"></label>
</div>
<!-- end .squaredThree -->
</section>

<section title=".squaredFour">
<!-- .squaredFour -->
<div class="squaredFour">
<input type="checkbox" value="None" id="squaredFour" name="check" checked />
<label for="squaredFour"></label>
</div>
<!-- end .squaredFour -->
</section>

</div>
<div class="footer-banner" style="width:728px; margin:30px auto"></div>
</body>

</html>

仅供学习！

时间： 2024-10-14 06:56:46

一些项目需要的东西整合（1）——九款按钮的相关文章

一些项目需要的东西整合（2）—— 浮动导航

这个东西其实理解了很好懂的,就是position:fixed的应用 例子如下: <!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .wrapper{width:1000px;height:2000px;mar

一些项目需要的东西整合（3）—— 一些表格的引用

1.边框的输入 <!doctype html><html ng-app=""><head><meta charset="utf-8"><title>边框的输入</title><style>#div1 {width:100px; height:200px; background:#CCC;}</style></head> <body><p>

项目ITP(七) javaWeb 整合 Quartz 实现动态调度 并且 持久化

项目ITP(七) javaWeb 整合 Quartz 实现动态调度 并且 持久化 原创地址:http://www.cnblogs.com/Alandre/(泥沙砖瓦浆木匠),需要转载的,保留下! 弟子规 圣人训 首孝弟 次谨信 泛爱众 而亲仁 有余力 则学文 Written In The Font 需要:WEB-INF/lib/quartz-2.2.1.jar 基本步骤: web.xml注册监听器ScheduleStartListener 监听器类sedion.jeffli.wmuitp.lis

项目记录2：整合SSH2

本文内容来自:<传智播客-OA项目> 一,集成 Spring 与 Hibernate    1,配置SessionFactory        1,配置            ---------------------- applicationContext.xml ------------------------            <!-- 配置SessionFactory(整合Hibernate) -->            <context:property-pl

SSH项目在Maven下整合

<div class="quote_title">引用</div><div class="quote_div"> 一:Maven的安装: POM.xml P:project O:Object M:Model 在pom.xml文件中有modelVersion,maven2和maven3一定是4.0.0版本 groupId,artifactId和version是必须写的 maven约定的源文件的目录为:src/main/java/co

IDEA下使用maven构建web项目（SpringMVC+Mybatis整合）

需求背景:由于最近总是接到一些需求,需要配合前端团队快速建设移动端UI应用或web应用及后台业务逻辑支撑的需求,若每次都复用之前复杂业务应用的项目代码,总会携带很多暂时不会用到的功能或组件,这样的初始工程就存在冗余代码. 在本文中,我们将使用Java语言开发集成环境IntelliJ IDEA(其倡言是智能编码?),应用maven构建SpringMVC整合Mybatis+MySQL5.7(流行框架)的web项目:目的在于快速构建一个简洁纯净版的web应用工程,将其作为一个基础web-demo,以便

【SSH项目实战01】整合Struts2、Hibernate4.3和Spring4.2

今天开始,跟进一个网上商城的项目,首先从搭建环境开始,一步步整合S2SH.这篇博文主要总结一下如何整合Struts2.Hibernate4.3和Spring4.2. 整合三大框架得先从搭建各部分环境开始,也就是说首先得把Spring,Hibernate和Struts2的环境搭建好,确保它们没有问题了,再做整合.这篇博文遵从的顺序是:先搭建Spring环境-->然后搭建Hibernate环境--> 整合Spring和Hibernate --> 搭建Struts2环境 --> 整合Sp

Maven创建Web项目、、、整合SSM框架

自己接触ssm框架有一段时间了,从最早的接触新版ITOO项目的(SSM/H+Dobbu zk),再到自己近期来学习到的<淘淘商城>一个ssm框架的电商项目.用过,但是还真的没有自己搭建过,一直都是用别人搭建好的.所以,从网上找了一些材料,结合自己来解决过程中的一些问题,使自己对ssm框架理解更加深了,不为分享,只是总结一下,下次有机会再搭建的时候,直接看自己的博客,省得找了! 一.准备环境: maven:apache-maven-3.2.3 jdk:jdk1.8.0_25 tomcat:tom

分布式电商项目(03)--后台管理系统整合测试

前言:前面的博客讲到了后台管理系统的工程搭建以及SSM框架的整合,这篇就讲一下后台管理系统的整合测试 1.逆向工程生成代码 1.1 什么是逆向工程 简单点说,就是通过数据库中的单表,自动生成java代码. Mybatis官方提供了逆向工程,可以针对单表自动生成mybatis代码 1.2 逆向工程以及项目sql下载 链接   提取码:zaez 1.3 修改配置文件 下载好逆向工程之后,将其作为一个新工程导入,然后找到工程下的generatorConfig.xml文件,按照文件中的注释以及实际情况修