表单布局

雨点打透心脏的1/2处 2023-08-17 15:44 116阅读 0赞

## 表单 ##

**对于横向一致排开的搜索表单（上搜索下结果），最好使用固定框宽度的布局，可以结合element表单控件**

***在布局的时候，最好能统一html标签格式（如，统一将class放在标签第一位，并且该class带有语义性），使其易于区分和语义化，如下面的结构就是很好的结构，区分度大，代码可维护性高***

<div class="box">
        <div class="inner-line">
              <div class="inner-input">
                <label for="search-input" class="label pr-5">sreachVal:</label>
                <input type="text" name="search-input" class="no-outline" />
         	  </div>
        </div>
      </div>

**外层盒子**

box { 
    	     width: 90%;
    	     margin: 0 auto;
    	     border: 1px solid #ccc;
    	     box-sizing: border-box;
    	     padding: 20px;
    	}

**每行**

inner-line { 
    	  // 横向对齐
    	  display: flex;
    	  justify-content: flex-start;
    	  flex-wrap: wrap;
    	  margin-top: 30px;
    	}

**每小对**

.inner-input { 
    	  display: flex;
    	  justify-content: center;
    	  align-items: center;
    	}

**输入框标题**

.label { 
          font-size: 16px;
          color: #2f4f4f;
        }

**输入框**

input { 
          width: 100px;
          height: 28px;
          padding: 4px 7px;
          font-size: 12px;
          line-height: 1.5;
    
          color: rgba(0, 0, 0, .65);
          border: 1px solid #d9d9d9;
          border-radius: 4px;
    
          cursor: text;
          position: relative;
          background-image: none;
          background-color: #fff;
    
          -webkit-transition: all .3s;
          transition: all .3s;
        }
    
        .no-outline { 
          outline: none;
        }

## 表格 ##

**正常表格**

**除去表头的表格**

.table-data { 
          width: 90%;
          color: black;
          margin: 0 auto;
          border: 1px solid #ff6d2b;
          
          box-sizing: border-box;
          border-spacing: 0px;
        }

**设置表头背景色, 和表头单元格内间距**

.table-data thead { 
    	  background: #feb236;
    	}
    	.table-data thead tr th { 
    	  padding: 5px 0;
    	}

**设置表体的背景色和左右边距**

.table-data tbody { 
    	  color: white;
    	  padding: 5px 0;
    	}

**设置表体单元格排列方式**

.table-data td { 
          text-align: center
        }

**设置单双行颜色**

.table-data tbody tr:nth-child(2n){ 
    		 background: #291D09; 
    	}

**设置滚动条**

/* 设置滚动条 */
    	table{ 
    	  overflow: hidden;
    	}
    	table tbody { 
    	    display: block;
    	    height: 195px;
    	    overflow-y: scroll;
    	    width: calc(100% + 18px);
    	}
    	
    	table thead, tbody tr { 
    	    display: table;
    	    width: 100%;
    	    table-layout: fixed;
    	}
    	
    	table thead { 
    	    width: calc(100% )
    	}

**若是在vue中则，表头和表内数据可以通过遍历的形式取得**