## 原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> ``` ## 哪些做了变更 如图：