移動端布局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布局

<!-- ul li a  span 布局 -->
                <div class="row margin-top">
                        <div class="col-sm-12 navlink">
                            <ul>
                                <li>
                                    <a href="">乘客快捷注冊
                                        <span class="moreicon">&gt;</span>    
                                    </a>
                                </li>
                                <li>
                                    <a href="">新用戶注冊
                                        <span class="moreicon">
                                            <img src="./image/checks.png" style="width: 20px; height: 20px;float: right;margin-right: 0.3rem;margin-top: 0.2rem;">
                                        </span>    
                                    </a>

                                </li>
                            </ul>
                        </div>
                </div>

 

思路五：期待補充中

 

統一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;}
.navlink li {
    width: 100%;
    position: relative;
    margin-bottom: 2%;
}
.navlink li a {
    text-align: center;
    font-size: 11pt;
    display: block;
    height: 1.48rem;
    line-height: 1.2rem;
    /*border-radius: 20px;*/
    border-radius: 4px;
    background: #ffffff none repeat scroll 0% 0%;
    border-width: 1px;
    border-style: solid;
    border-color: #202329 #202329 #393E48;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
    padding: 4px 0px;
}

 

 

 

 

參考：

使用Flexible實現手淘H5頁面的終端適配：http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html