手機端調適型配置demo

最後更新：2017-11-27 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：原型規劃 tar font minimum col styles https order

原型如下：

要求如下：適應各種機型

源碼如下：

<!DOCTYPE html >
<html>

   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
       
       <style>
           .container {
               border: 1px solid #F0F1F1;
               -webkit-box-shadow: 0px 3px 3px #c8c8c8;
               -moz-box-shadow: 0px 3px 3px #c8c8c8;
               box-shadow: 0px 3px 3px #c8c8c8;
           }

           .search {
               height: 42px;
               margin: 0 20px;
           }

           .search_left {
               float: left;
               margin: 14px 7px 5px 11px;
               width: 8px;
               height: 8px;
               border-radius: 50px;
               border: 3px solid orangered;
               font-size: 12px;
               text-align: center;
               line-height: 30px;
           }

           .search_input {
               float: left;
           }

           .search_input input {
               border: none;
               height: 30px;
               margin-top: 5px;
           }

           .search_right {
               float: right;
               width: 20px;
               height: 20px;
               margin: 9px 17px 5px 10px;
           }

           .search_right img {
               width: 100%;
               height: 100%;
           }

           .start {
               height: 42px;
               margin: 80px 30px 40px 30px;
               border: 1px solid #F0F1F1;
               -webkit-box-shadow: 0px 3px 3px #c8c8c8;
               -moz-box-shadow: 0px 3px 3px #c8c8c8;
               box-shadow: 0px 3px 3px #c8c8c8;
               background: #ff4343;
               color: #FFFFFF;
               text-align: center;
               line-height: 40px;
               border-radius: 50px;
           }

           .back {
               height: 42px;
               margin: 0px 30px;
               border: 1px solid #F0F1F1;
               -webkit-box-shadow: 0px 3px 3px #c8c8c8;
               -moz-box-shadow: 0px 3px 3px #c8c8c8;
               box-shadow: 0px 3px 3px #c8c8c8;
               background: #FFFFFF;
               color: #1E1F20;
               text-align: center;
               line-height: 40px;
               border-radius: 50px;
           }
       </style>
       <title>高校地圖</title>
   </head>

   <body>
       <div class="container">
           <div class="search" style="border-bottom: 1px solid #F0F1F1;">
               <div class="search_left"></div>
               <div class="search_input"><input type="text" placeholder="定位失敗，手動設定"></div>
               <div class="search_right"><img src="img/scale_search.png" alt="放大" /></div>
           </div>

           <div class="search">
               <div class="search_left"></div>
               <div class="search_input"><input type="text" placeholder="電梯間"></div>
               <div class="search_right"><img src="img/scale_search.png" alt="放大" /></div>
           </div>
       </div>

       <div class="start">開始規劃路線</div>
       <div class="back">返回</div>
   </body>

</html>

手機端調適型配置demo

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More