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

===========================================================
注：以上文章出自一位前端妹子，若有不足，欢迎指教，原文链接：前端技术交流平台

查看全文

相关阅读:
jvm原理----------4.Java虚拟机何谓垃圾及垃圾回收算法
 jvm原理----------5.垃圾收集器及内存分配策略
 jvm原理----------6.创建对象及对象的访问定位
 mysql的sql语句的常用的优化方式
 jvm内存原理及调优（完全总结）
dubbo的负载均衡与重试机制
 File类
 异常的真实应用
 字符串转换功能
 Object类介绍

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