1.小三角樣式
.tip{
?? ?position:relative;
?? ?display:inline-block;
?? ?width:100px;
?? ?margin:100px;
?? ?padding:30px 20px;
?? ?color:#fff;
?? ?border:1px solid #666;
?? ?border-radius:5px;
?? ?background-color:rgba(0,153,51,1);
}
.tip:before{
?? ?content:'';
?? ?position:absolute;
?? ?top:15px;
?? ?left:-20px;
?? ?border:10px solid #666;
?? ?border-color:transparent #666 transparent transparent;
}
.tip:after{
?? ?content:'';
?? ?position:absolute;
?? ?top:15px;
?? ?left:-18px;
?? ?border:10px solid rgba(0,153,51,1);
?? ?border-color:transparent rgba(0,153,51,1) transparent transparent;
}
2.取消浮動
.float{
?? ?border:1px solid #000;
?? ?zoom:1; /*解決ie6,ie7浮動問題*/
}
.float:after{
?? ?content:'';
?? ?display:block;
?? ?width:0;
?? ?height:0;
?? ?clear:both;
}
.fl{
?? ?float:left;
?? ?width:300px;
?? ?height:200px;
?? ?color:#fff;
?? ?background:rgba(204,51,0,1);
}
.fr{
?? ?float:right;
?? ?width:300px;
?? ?height:200px;
?? ?color:#fff;
?? ?background:rgba(0,102,102,1);
}
1.:after消除浮動,父元素需加zoom:1,建議使用，
2.在父元素的末尾加一個孩子，<div style="clear:both"></div>
3.在父元素中增加overflow:hidden; 不能和position配合使用，因為超出的尺寸的會被隱藏
4.在父元素中增加overflow:auto;前提是必須定義width 或 zoom:1,并且不能定義height
5.父元素一起浮動，不推薦使用
6.給父元素增加display:table,不建議使用
3.單選或復選
.simple{
?? ?width:100px;
?? ?height:20px;
?? ?border:1px solid #000;
?? ?line-height:20px;
?? ?padding:10px;
?? ?display:inline-block;
}
.simple input{
?? ?display:none;
}
.simple label:before{
?? ?content:'';
?? ?display:inline-block;
?? ?width:15px;
?? ?height:15px;
?? ?vertical-align:-2px;
?? ?margin-right:5px;
?? ?border:1px solid #000;
}
.simple input:checked + label:before{
?? ?content:'';
?? ?display:inline-block;
?? ?width:15px;
?? ?height:15px;
?? ?background:rgba(255,51,0,1);
?? ?vertical-align:-2px;
?? ?margin-right:5px;
?? ?border:1px solid #000;
}
.middle{
?? ?display:inline-block;
?? ?position:relative;
?? ?overflow:hidden;
}
.middle input{
?? ?display:none;
}
.middle label{
?? ?padding:10px;
?? ?display:inline-block;
?? ?border:1px solid #000;
}
.middle input:checked + label{
?? ?border:rgba(0,255,255,1) 1px solid ;
}
.middle input:checked + label:after{
?? ?content:"";
?? ?position:absolute;
?? ?bottom:0px;
?? ?right:0px;
?? ?width:10px;
?? ?height:10px;
?? ?border-radius:10px 0 0 0;
?? ?display:inline-block;
?? ?background:#F03;
?? ?color:#fff;
}
.hight{
?? ?display:inline-block;
?? ?position:relative;
}
.hight input{
?? ?display:none;
}
.hight input + label:before{
?? ?content:'';
?? ?display:inline-block;
?? ?width:48px;
?? ?height: 24px;
?? ?margin-right:10px;
?? ?vertical-align:-6px;
?? ?background:#e0e0e0;
?? ?position:relative;
?? ?border-radius:24px;
?? ?transition:background 0.3s;
}
.hight input + label:after{
?? ?content:'';
?? ?display:inline-block;
?? ?width:20px;
?? ?height:20px;
?? ?border-radius:20px;
?? ?background:#fff;
?? ?position:absolute;
?? ?top:2px;
?? ?left:2px;
?? ?transition:left 0.32s;
}
.hight input:checked + label:before{
?? ?background:rgba(153,0,153,1);
}
.hight input:checked+label:after{
?? ?left:26px;
}
.diff{
?? ?display:inline-block;
?? ?position:relative;
}
.diff label{
?? ?width:auto;
?? ?height:48px;
}
.diff label input{
?? ?display:none;
}
.diff label input + i{
?? ?content:'';
?? ?position:relative;
?? ?width:48px;
?? ?height:24px;
?? ?border-radius:24px;
?? ?background:#e0e0e0;
?? ?display:inline-block;
?? ?transition:background 0.3s;
}
.diff label input + i:after{
?? ?content:"";
?? ?position:absolute;
?? ?top:2px;
?? ?left:2px;
?? ?display:inline-block;
?? ?background:#fff;
?? ?width:20px;
?? ?height:20px;
?? ?border-radius:20px;
?? ?transition:left 0.3s;
}
.diff label input:checked + i{
?? ?background:#0F0;
}
.diff label input:checked + i:after{
?? ?left:26px;
}
