## 原TAB  原代碼 ``` <div class="layui-tab"> <ul class="layui-tab-title"> <li class="layui-this">網站設置</li> <li>用戶管理</li> <li>權限分配</li> <li>商品管理</li> <li>訂單管理</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show"> 1. 高度默認自適應，也可以隨意固寬。 <br>2. Tab進行了響應式處理，所以無需擔心數量多少。 </div> <div class="layui-tab-item">內容2</div> <div class="layui-tab-item">內容3</div> <div class="layui-tab-item">內容4</div> <div class="layui-tab-item">內容5</div> </div> </div> ``` ## 豎形TAB  現代碼 ``` <style> .layui-tab-title{border-bottom: none;}/* 重置 - 去掉下劃線 */ .layui-tab-title .layui-this{background: #FFAF09;}/* 增加背景 */ .layui-tab-title .layui-this:after{border: none;}/* 重置 -this無邊框 */ .layui-tab-title li{display: list-item;}/* 重置 -縱向顯示 */ </style> <div class="layui-tab"> <ul class="layui-tab-title layui-col-md3"> <li class="layui-this">網站設置</li> <li>用戶管理</li> <li>權限分配</li> <li>商品管理</li> <li>訂單管理</li> </ul> <div class="layui-tab-content layui-col-md9"> <div class="layui-tab-item layui-show"> 1. 高度默認自適應，也可以隨意固寬。 <br>2. Tab進行了響應式處理，所以無需擔心數量多少。 </div> <div class="layui-tab-item">內容2</div> <div class="layui-tab-item">內容3</div> <div class="layui-tab-item">內容4</div> <div class="layui-tab-item">內容5</div> </div> </div> ``` ## 哪些做了變更 如圖：