前一段时间在做web端的东西;感觉框架不是很好用;就自己总结了一下;仅供大家交流学习;大家有什么问题一定要告诉我呦~我好进行改正!
按钮部分
x-radius 2圆角,x-bottom 向下10margin ,x-radius-circle圆边
<!-- 正常按钮 -->
<button class="x-btn x-radius x-bottom">原色按钮</button>
<button class="x-btn primary x-radius x-bottom">默认按钮</button>
<button class="x-btn danger x-radius x-bottom">警告按钮</button>
<!-- 带动画的按钮 -->
<button class="btn draw-outline">曲婉婷</button>
<button class="btn draw-outline ">李健</button>
<button class="btn draw-outline ">邓紫棋</button>
<!-- 圆边按钮 -->
<button class="x-btn x-radius-circle x-bottom">原色按钮</button>
<button class="x-btn primary x-radius-circle x-bottom">默认按钮</button>
<button class="x-btn danger x-radius-circle x-bottom">警告按钮</button>
/* 按钮样式 */
.x-btn{
display: inline-block;
outline:0;
cursor: pointer;
background: #e6e6e6;
font-size: 14px;
padding: 5px 10px;
white-space:nowrap;
border:1px solid transparent;
-webkit-appearance:none;
user-select:none;
transition:background-color .3s ease-out,border-color .3s ease-out;
-webkit-transition:background-color .3s ease-out,border-color .3s ease-out;
-moz-transition:background-color .3s ease-out,border-color .3s ease-out;
-ms-transition:background-color .3s ease-out,border-color .3s ease-out;
-o-transition:background-color .3s ease-out,border-color .3s ease-out;
color:#323232;
text-align: center;
}
.x-btn:hover{
opacity: 0.8;
}
.x-radius{
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
}
.x-bottom{
margin-bottom: 10px;
}
.primary{
background: #117ff0 !important;
color: #fff;
border-color: #117ff0;
}
.danger{
background: #FF5722 !important;
color: #fff;
border-color: #FF5722;
}
.x-radius-circle{
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
-o-border-radius: 50px;
}
/* 带动画的按钮 */
.draw-outline {
box-shadow:inset 0 0 0 2px #000;
color:#000;
-webkit-transition:color 0.25s 0.125s;
transition:color 0.25s 0.125s;
position:relative;
margin-bottom: 10px;
}
.draw-outline::before,.draw-outline::after {
border:0 solid transparent;
box-sizing:border-box;
content:'';
pointer-events:none;
position:absolute;
width:0;
height:0;
}
.draw-outline::before {
top:0;
right:0;
}
.draw-outline::after {
left:0;
bottom:0;
}
.draw-outline::after {
border-top-width:2px;
border-left-width:2px;
}
.draw-outline::before {
border-bottom-width:2px;
border-right-width:2px;
}
.draw-outline:hover {
color:#00a0e9;
}
.draw-outline:hover::before,.draw-outline:hover::after {
border-color:#00a0e9;
-webkit-transition:border-color 0s,height 0.25s,width 0.25s;
transition:border-color 0s,height 0.25s,width 0.25s;
-moz-transition:border-color 0s,height 0.25s,width 0.25s;
-ms-transition:border-color 0s,height 0.25s,width 0.25s;
-o-transition:border-color 0s,height 0.25s,width 0.25s;
width:100%;
height:100%;
}
.draw-outline:hover::before {
-webkit-transition-delay:0s,0s,0.25s;
transition-delay:0s,0s,0.25s;
}
.draw-outline:hover::after {
-webkit-transition-delay:0.5s,0.5s,0.75s;
transition-delay:0.5s,0.5s,0.75s;
}
.btn {
background:none;
border:none;
cursor:pointer;
line-height:1.5;
font-size: 14px;
padding:5px 10px;
letter-spacing:0.05rem;
}
.btn:focus {
outline:2px dotted #55d7dc;
}
表单部分
<!-- input点击带阴影-->
<div>
<span>样 式:</span>
<input type="text" class="x-radius x-input" placeholder="请输入">
<input type="text" class="x-radius x-input" placeholder="请输入">
<span>文字啊啊</span>
<div>
<!-- input点击不带阴影 -->
<div>
<span>样 式:</span>
<input type="text" class="x-radius x-input1" placeholder="请输入">
<input type="text" class="x-radius x-input1" placeholder="请输入">
<span>文字啊啊</span>
<div>
<!-- textarea文本框-->
<div>
<span style="float:left;">文本域:</span>
<textarea name="" id="" cols="30" rows="10" placeholder="请输入" class="x-textarea"></textarea>
</div>
<div class="x-oneday">
<input id="item1" type="radio" name="item" value="熊大" checked class="x-radio">
<label for="item1" class="x-lable"></label>
<span class="x-input-right">选项一</span>
</div>
<!-- 单选框-->
<div class="x-oneday">
<input id="item2" type="radio" name="item" value="选项二" class="x-radio">
<label for="item2" class="x-lable"></label>
<span class="x-input-right">选项二</span>
</div>
<div>
<input type="radio" id="option-0-1" name="mode" value = "0" class="option-radio" checked />
<label for="option-0-1"></label>
<span class="">选项一</span>
<input type="radio" id="option-0-2" name="mode" value = "1" class="option-radio" />
<label for="option-0-2"></label>
<span class="">选项二</span>
<!-- 点击之后粉色 -->
<input type="radio" class="x-radiolable" id="x-radios" value = "0" name="mode">
<label for="x-radios"></label>
<span>选项一</span>
<input type="radio" class="x-radiolable" id="x-radios1" value = "1" name="mode">
<label for="x-radios1"></label>
<span>选项一</span>
</div>
<div class="x-chenkbox">
<input type="checkbox" name="item" class="x-checked" checked>
<label for="hu" class="x-lable1"></label>
<span class="x-input-right">选项一</span>
</div>
<div class="x-chenkbox">
<input type="checkbox" name="item" class="x-checked">
<label for="hu" class="x-lable1"></label>
<span class="x-input-right">选项二</span>
</div>
<!-- 开关-->
<div >
<label>
<input class="switch-btn switch-btn-animbg" type="checkbox" checked>
</label>
<label>
<input class="switch-btn switch-btn-animbg" type="checkbox" >
</label>
</div>
/* 表单样式input部分 */
.x-input1,.x-input{
height: 30px;
border: 1px solid #e6e6e6;
padding-left: 10px;
border-style:solid;
-webkit-appearance:none;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
}
input::-webkit-input-placeholder{
font-size: 12px;
color: #9e9d9d;
}
textarea::-webkit-input-placeholder{
font-size: 12px;
color: #9e9d9d;
}
input:hover{
border: 1px solid #D2D2D2!important;
}
textarea:hover{
border: 1px solid #D2D2D2!important;
}
.x-input:focus{
outline: none;
box-shadow:inset 0 1px 1px rgba(165,207,249,.075), 0 0 8px rgba(123,186,250,.6);
/* transition: all 0.1;
-webkit-transition: all 0.1;
-moz-transition: all 0.1;
-ms-transition: all 0.1;
-o-transition: all 0.1; */
border: 1px solid rgba(123,186,250,.6);
}
input,select,textarea:focus{
outline: none;
}
.x-textarea{
padding: 8px 10px;
min-height: 100px;
height: auto;
resize:vertical;
border: 1px solid #e6e6e6;
display: block;
}
.x-change{
width: 150px;
padding-left:10px;
height: 30px;
border: 1px solid #e6e6e6;
}
.x-insert{
float:left;
position: relative;
}
.x-select{
height: 30px;
border: 1px solid #e6e6e6;
padding-left: 30px;
padding-right: 60px;
line-height: 30px;
}
.x-li{
line-height: 30px;
width: 100%;
padding-left: 10px;
list-style: none;
font-size: 14px;
}
.x-before{
position: absolute;
top: 40px;
overflow:hidden;
width:160px;
height:180px;
overflow-y:auto;
border-style:groove;
display: none;
border: 1px solid #e6e6e6;
box-shadow: 0 0 5px 2px #e6e6e6e6;
background: #fff;
}
.x-ul{
list-style: none;
padding: 0;
margin: 0;
}
/* 棕色单选框样式 */
.x-oneday {
position: relative;
float: left;
margin-right: 4px;
}
.x-radio[type="radio"] {
width: 15px;
height: 15px;
opacity:0;
position: absolute;
z-index: 100;
}
.x-lable {
position: absolute;
left: 0px;
top: 5px;
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #999;
}
/*设置选中的input的样式*/
/* + 是兄弟选择器,获取选中后的label元素*/
.x-radio:checked+label {
background-color: #995c14;
border: 1px solid #995c14;
}
.x-radio:checked+label::after {
position: absolute;
content: "";
width: 8px;
height: 8px;
top: 6px;
left: 6px;
border-radius:50%;
background: #fff;
border-top: none;
border-left: none;
transform: rotate(45deg);
-webkit-border-radius:50%;
-moz-border-radius:50%;
-ms-border-radius:50%;
-o-border-radius:50%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
/* 绿色单选框 */
.option-radio{
display: none;
}
.option-radio+label{
position: relative;
height: 20px;
width: 20px;
border-radius: 50%;
border: 1px solid #9a9a9a;
background-color: transparent;
display: inline-block;
top:5px;
}
.option-radio:checked+label{
position: relative;
height: 20px;
width: 20px;
border-radius: 50%;
border: 1px solid rgb(4, 190, 2);
background-color: transparent;
display: inline-block;
top:5px;
}
.option-radio:checked+label:after{
position: absolute;
content: '';
font-size: 0;
border: 5px solid rgb(4, 190, 2);
border-radius: 50%;
top:5px;
left:5px;
}
.option-radio:checked:disabled+label{
border-color: #9a9a9a;
}
.option-radio:checked:disabled+label:after{
border-color: #9a9a9a;
}
.option-radio:checked+label:hover,.option-radio + label:hover {
cursor: pointer;
}
/* 粉色单选框 */
.x-radiolable{
display:none;
}
.x-radiolable+label{
position: relative;
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #9a9a9a;
/* 背景透明 */
background: transparent;
display: inline-block;
top: 5px;
cursor: pointer;
}
/* 点击之后checked label的样式 */
.x-radiolable:checked+label{
position: relative;
width: 20px;
height: 20px;
border: 1px solid tomato;
background: transparent;
display: inline-block;
top: 5px;
}
.x-radiolable:checked+label:after{
position: absolute;
content: "";
border: 5px solid tomato;
border-radius: 50%;
top: 5px;
left: 5px;
}
.x-radiolable:checked+label:hover,.option-radio + label:hover {
cursor: pointer;
}
/* 复选框 */
.x-chenkbox{
position: relative;
float: left;
margin-right: 5px;
}
.x-checked[type="checkbox"] {
width:20px;
height: 20px;
opacity:0;
margin-top: 5px;
margin-left: 1px;
z-index: 100;
position: absolute;
}
.x-lable1{
width: 17px;
height: 17px;
position: absolute;
top: 5px;
left: 0px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border: 1px solid #999;
}
.x-checked:checked+label {
background-color: #995c14;
border: 1px solid #995c14;
}
.x-checked:checked+label::after {
position: absolute;
content: "";
width: 5px;
height: 9px;
top: 1px;
left: 5px;
border: 2px solid #fff;
border-top: none;
border-left: none;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.x-input-right{
float: left;
margin-left:27px;
margin-top:3px;
}
/* 开关按钮 */
.switch-btn {
cursor: pointer;
width: 45px;
height: 22px;
position: relative;
border: 1px solid #dfdfdf;
background-color: #fdfdfd;
box-shadow: #dfdfdf 0 0 0 0 inset;
border-radius: 15px;
background-clip: content-box;
display: inline-block;
-webkit-appearance: none;
user-select: none;
outline: none;
margin-top: 16px;
border: 1px solid #e6e6e6;
}
.switch-btn:before {
content: '';
width: 18px;
height: 18px;
position: absolute;
top: 0;
left: 0;
border-radius: 20px;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
margin-top: 1px;
}
.switch-btn:checked:before {
left: 24px;
}
.switch-btn.switch-btn-animbg {
transition: background-color ease .4s;
-webkit-transition: background-color ease .4s;
-moz-transition: background-color ease .4s;
-ms-transition: background-color ease .4s;
-o-transition: background-color ease .4s;
}
.switch-btn.switch-btn-animbg:before {
transition: left .3s;
}
.switch-btn.switch-btn-animbg:checked {
box-shadow: #dfdfdf 0 0 0 0 inset;
background-color: #995c14;
transition: border-color .4s, background-color ease .4s;
}
.switch-btn.switch-btn-animbg:checked:before {
transition: left .3s;
}
表格部分
<table class="x-table">
<colgroup>
<col width="8%">
<col width="10%">
<col width="10%">
<col width="10%">
<col width="10%">
<col width="10%">
</colgroup>
<thead>
<tr>
<th class="x-th">序号</th>
<th class="x-th">队内人员</th>
<th class="x-th">职务</th>
<th class="x-th">职务</th>
<th class="x-th">职务</th>
<th class="x-th">职务</th>
</tr>
</thead>
<tbody style="text-align:left;">
<tr>
<td class="x-td">
<p class="x-overflow">
gggggggggggggggggggggggggggggggggggggggggggg
</p>
</td>
<td class="x-td">
<p class="x-overflow">
gggggggggggggggggggggggggggggggggggggggggggg
</p>
</td>
<td class="x-td">
<p class="x-overflow">
gggggggggggggggggggggggggggggggggggggggggggg
</p>
</td>
<td class="x-td">
<p class="x-overflow">
gggggggggggggggggggggggggggggggggggggggggggg
</p>
</td>
<td class="x-td">
<p class="x-overflow">
gggggggggggggggggggggggggggggggggggggggggggg
</p>
</td>
<td class="x-td">
<p class="x-overflow">
gggggggggggggggggggggggggggggggggggggggggggg
</p>
</td>
</tr>
<tr>
<td class="x-td">
<p class="x-overflow">
gggggggggggggggggggggggggggggggggggggggggggg
</p>
</td>
<td class="x-td">
<p class="x-overflow">
gggggggggggggggggggggggggggggggggggggggggggg
</p>
</td>
<td class="x-td">
<p class="x-overflow">
gggggggggggggggggggggggggggggggggggggggggggg
</p>
</td>
<td class="x-td">
<p class="x-overflow">
gggggggggggggggggggggggggggggggggggggggggggg
</p>
</td>
<td class="x-td">
<p class="x-overflow">
gggggggggggggggggggggggggggggggggggggggggggg
</p>
</td>
<td class="x-td">
<p class="x-overflow">
gggggggggggggggggggggggggggggggggggggggggggg
</p>
</td>
</tr>
<tr>
<td class="x-td">
<p class="x-overflow">
gggggggggggggggggggggggggggggggggggggggggggg
</p>
</td>
<td class="x-td">
<p class="x-overflow">
gggggggggggggggggggggggggggggggggggggggggggg
</p>
</td>
<td class="x-td">
<p class="x-overflow">
gggggggggggggggggggggggggggggggggggggggggggg
</p>
</td>
<td class="x-td">
<p class="x-overflow">
gggggggggggggggggggggggggggggggggggggggggggg
</p>
</td>
<td class="x-td">
<p class="x-overflow">
gggggggggggggggggggggggggggggggggggggggggggg
</p>
</td>
<td class="x-td">
<p class="x-overflow">
gggggggggggggggggggggggggggggggggggggggggggg
</p>
</td>
</tr>
</tbody>
</table>
<table class="x-table">
<colgroup>
<col width="8%">
<col width="10%">
<col width="10%">
<col width="10%">
<col width="10%">
<col width="10%">
</colgroup>
<thead>
<tr>
<th class="x-th">序号</th>
<th class="x-th">队内人员</th>
<th class="x-th">职务</th>
<th class="x-th">职务</th>
<th class="x-th">职务</th>
<th class="x-th">职务</th>
</tr>
</thead>
<tbody style="text-align:left;">
<tr>
<td class="x-td">
<p class="cell_bk">
gggggggggggggggggggggggggggggggggggggggggggg
</p>
</td>
<td class="x-td">
<p class="cell_bk">
gggggggggggggggggggggggggggggggggggggggggggg
</p>
</td>
<td class="x-td">
<p class="cell_bk">
gggggggggggggggggggggggggggggggggggggggggggg
</p>
</td>
<td class="x-td">
<p class="cell_bk">
gggggggggggggggggggggggggggggggggggggggggggg
</p>
</td>
<td class="x-td">
<p class="cell_bk">
gggggggggggggggggggggggggggggggggggggggggggg
</p>
</td>
<td class="x-td">
<p class="cell_bk">
gggggggggggggggggggggggggggggggggggggggggggg
</p>
</td>
</tr>
<tr>
<td class="x-td">
<p class="cell_bk">
gggggggggggggggggggggggggggggggggggggggggggg
</p>
</td>
<td class="x-td">
<p class="cell_bk">
gggggggggggggggggggggggggggggggggggggggggggg
</p>
</td>
<td class="x-td">
<p class="cell_bk">
gggggggggggggggggggggggggggggggggggggggggggg
</p>
</td>
<td class="x-td">
<p class="cell_bk">
gggggggggggggggggggggggggggggggggggggggggggg
</p>
</td>
<td class="x-td">
<p class="cell_bk">
gggggggggggggggggggggggggggggggggggggggggggg
</p>
</td>
<td class="x-td">
<p class="cell_bk">
gggggggggggggggggggggggggggggggggggggggggggg
</p>
</td>
</tr>
<tr>
<td class="x-td">
<p class="cell_bk">
gggggggggggggggggggggggggggggggggggggggggggg
</p>
</td>
<td class="x-td">
<p class="cell_bk">
gggggggggggggggggggggggggggggggggggggggggggg
</p>
</td>
<td class="x-td">
<p class="cell_bk">
gggggggggggggggggggggggggggggggggggggggggggg
</p>
</td>
<td class="x-td">
<p class="cell_bk">
gggggggggggggggggggggggggggggggggggggggggggg
</p>
</td>
<td class="x-td">
<p class="cell_bk">
gggggggggggggggggggggggggggggggggggggggggggg
</p>
</td>
<td class="x-td">
<p class="cell_bk">
gggggggggggggggggggggggggggggggggggggggggggg
</p>
</td>
</tr>
</tbody>
</table>
/* 表格 */
.x-table{
width: 100%;
color: #000;
border: 1px solid #e6e6e6;
background: #fff;
border-collapse:collapse;
border-spacing:0;
display: table;
margin: 5px 0;
margin-bottom: 9px;
table-layout: fixed;
}
.cell{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.x-table tr{
transition: all .3s;
-webkit-transition: all .3s
}
.x-table thead tr{
background: #f2f2f2;
}
.x-table th{
text-align: left;
font-weight: 400;
}
.x-table img{
text-align: center;
max-width: 100px
}
.x-th,.x-td{
position: relative;
border-width: 0 1px 0 0;
border-width: 1px;
border-style:solid;
border-color:#e6e6e6;
min-height:20px;
line-height:20px;
font-size: 14px;
padding: 1px 15px;
/* text-align: center; */
}
.x-table-cell{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
td,th{
display: table-cell;
vertical-align: inherit;
}
.x-colors{
background: #f3f3f3;
}
tr:hover{
background: #f2f2f2;
transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
}
.cell_bk{
display: table;
width: 100%;
table-layout: fixed;
word-wrap: break-word;
}
.x-overflow{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
第一种表格会随着文章内容变多;撑开表格;
第二种表格文字超出部分…显示;
附上两张作品图,仅供参考!
最终效果图片!