移动端布局Demo测试

上两张图自勉一下（来自刘墉先生的文章，最近看他的作品）：然后移动端该愈来愈受到重视，未来的市场我不知道，不过我知道手机的功能越来越强大是不争的事实！移动端布局的积累也需要从现在做起！

需求一：实现下图效果，注意不同手机的型号：原生称为适配，我们称为自适应不变形

思路一：btn+ima布局风格

<div class="row margin-top">
                        <div class="col-sm-12">
                            <div class="form-group text-centr">
                                <button type="submit" class="btn btn-default ubBtn">
                                乘客快捷注册
                                <!-- <i class="check" style="padding-left:3.0rem">&nbsp;&nbsp;</i> -->
                                <!-- <img src="./image/checks.png" style="width:20px;height:20px;position: relative;right: -1.6rem;"> -->
                                </button>
                                <img src="./image/checks.png" style="width: 20px; height: 20px; position: absolute; top: 3.6rem; right: 0.5rem;">
                            </div>
                        </div>
                </div>

思路二：div 左右布局风格

<div class="row margin-top">
                        <div class="col-sm-8">
                            <button type="submit" class="btn btn-default ubBtn2" >
                                新用户注册
                            </button>
                        </div>
                        <div class="col-sm-4">
                                <img src="./image/checks.png" style="width: 20px; height: 20px;float: right;margin-top: -1rem;margin-right: 0.3rem;">
                         </div>
                </div>

思路三：div 左右布局风格2

<div class="row margin-top">
                        <div class="col-sm-8">
                            <a href="#" class="btn btn-a">新用户注册
                                <span class="msg-span">&nbsp;&nbsp;&nbsp;&nbsp;</span>
                            </a>
                        </div>
                        <!-- <div class="col-sm-4">
                            <img src="./image/checks.png" style="width: 20px; height: 20px;float: right;margin-top: -1rem;margin-right: 0.3rem;">
                        </div> -->
                </div>

这个需要<span>有占位，然后如果左侧文字不定 做出来效果也不是很理想，适合固定的界面模式 然后设置span的左边距离

思路四：ul li a  span布局

思路五：期待补充中

统一css样式整理：

.wrap-page{background:#ffffff;}
.nav-box{text-align:center;margin-top: 1.0rem}
.success{width:100%;margin:2.65625rem auto;}
.share-txt{font-size: 0.4375rem}
.logo{width: 3.109375rem;margin: 2.5625rem auto auto auto;}
.top-blank{height:0.6875rem;}
.top{background:#1FBAD6;height:10.0rem;}
.content{position: fixed;left: 0.2rem;right: 0.2rem;top: 5.0rem;background: #ffffff;margin: auto 0;width: 96%;}
.content-bg{width: 92%;margin: auto 0;position: relative;left: 0.4rem;}
.div-select{background: #1FBAD6;margin-top: 0.4rem;padding: 0.25rem}
.footer{height: 5.0rem}
.margin-top{margin-top: 0.25rem;}
.ubBtn{width:100%;margin:auto;display:block;height: 1.48rem;color:#1FBAD6;font-weight: 600}
.ubBtn2{width:100%;margin:auto;display:block;height: 1.48rem;color:#1FBAD6;font-weight: 600}
.check{background: url(../image/checks.png) right;background-repeat: no-repeat;background-size: 0.55rem 0.55rem;}
.box4{margin: 0 auto;width: 10px;height: 0px;border: 20px solid transparent;border-bottom-color: #1FBAD6;}
.btn-a{background:#ffffff;line-height: 28px;width: 100%;}
.msg-span{background: url(../image/checks.png) right;background-repeat: no-repeat;background-size: 0.55rem 0.55rem;}