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

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

查看全文

相关阅读:
Unity入门教程（上）
牛课堂算法直播题目
 使用3ds Max制作简单卧室
 Aizu_Insertion Sort
C语言中的循环语句练习
 3ds Max 中的导航控件SteeringWheels入门介绍
 3ds Max 中的导航控件ViewCube入门介绍
 容易出错的 if 语句
 计蒜客2018 蓝桥杯省赛 B 组模拟赛（一）
浅谈图的广度优先遍历

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