手机端自适应布局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前端开发资源，源码下载，请点击原文链接：祈澈姑娘

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

查看全文

相关阅读:
#考研碎碎念#
#考研笔记#计算机之病毒
 #考研笔记#计算机之多媒体应用
 #考研笔记#计算机之PPT问题
 第六章深入理解类
 第五章方法
 类的基本教程
 类型存储变量
 C#和.net框架
 C#编程概述

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