web端常用的按钮、表单，input，单选框，复选框，开关，表格样式

时间  2021-07-12 标签 web框架 表格 按钮 单选框 复选选框

前一段时间在做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>样&nbsp;&nbsp;&nbsp;式：</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>样&nbsp;&nbsp;&nbsp;式：</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;
}

第一种表格会随着文章内容变多；撑开表格；
第二种表格文字超出部分…显示；
附上两张作品图，仅供参考！
在这里插入图片描述
在这里插入图片描述
最终效果图片！
在这里插入图片描述

联系我们 沪ICP备13005482号-10