手机端自适应布局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;

               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>

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

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

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

巴特西

手机端自适应布局demo

最新文章

热门文章