# 风格选择 ## 6.7.2.风格选择 迷你样式： ~~~ <!-- 多加一个layui-steps-small即可 --> <div class="layui-tab layui-steps layui-steps-small"> <!-- 省略...... --> </div> ~~~ 自定义图标： ~~~ <div class="layui-tab layui-steps layui-steps-small"> <ul class="layui-tab-title"> <li class="layui-this"> <!-- 这里的图标可以任意修改 --> <i class="layui-icon layui-icon-username"></i> <span class="layui-steps-title">账号注册</span> </li> <li> <i class="layui-icon layui-icon-camera"></i> <span class="layui-steps-title">上传头像</span> </li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show">内容1</div> <div class="layui-tab-item">内容2</div> </div> </div> ~~~ 垂直风格： ~~~ <!-- 多加一个layui-steps-vertical即可 --> <div class="layui-tab layui-steps layui-steps-vertical"> <!-- 省略...... --> </div> ~~~ 简洁风格： ~~~ <!-- 多加一个layui-steps-simple --> <div class="layui-tab layui-steps layui-steps-simple"> <ul class="layui-tab-title"> <li>1.填写注册手机号</li> <li class="layui-this">2.获取短信验证码</li> <li>3.修改登录密码</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item">内容1</div> <div class="layui-tab-item layui-show">内容2</div> <div class="layui-tab-item">内容3</div> </div> </div> ~~~ >[danger]**注意** 简洁风格只有标题，没有图标、描述等