手机端自适应布局demo

zoukankan html css js c++ java

手机端自适应布局demo

原型如下：

要求如下：适应各种机型

源码如下：

<!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;
               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;
               20px;
               height: 20px;
               margin: 9px 17px 5px 10px;
           }

           .search_right img {
               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>

若需要转载，联系原文作者

更多技术文章，行业交流，web前端开发资源，源码下载，请点击原文链接：祈澈姑娘

或者联系我的微信，姑娘家家创作不易，走过路过点个赞呗

查看全文

相关阅读:
149. Max Points on a Line（js）
148. Sort List（js）
147. Insertion Sort List（js）
146. LRU Cache（js）
145. Binary Tree Postorder Traversal（js）
144. Binary Tree Preorder Traversal（js）
143. Reorder List（js）
142. Linked List Cycle II（js）
141. Linked List Cycle（js）
140. Word Break II（js）

原文地址：https://www.cnblogs.com/wangting888/p/9701923.html