手机端自适应布局demo
原型如下：

图片发自简书App

要求如下：适应各种机型源码如下：

<!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" />

        <!--<link rel="stylesheet" type="text/css" href="css/main.csss" />-->

        <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>

前端切图:手机端自适应布局demo的更多相关文章

  1. 手机端自适应布局demo

    原型如下: 要求如下:适应各种机型 源码如下: <!DOCTYPE html > <html>     <head>         <meta http-e ...

  2. 第九十四节，html5+css3移动手机端流体布局，旅游部分，媒体查询

    html5+css3移动手机端流体布局,旅游部分,媒体查询 媒体查询 媒体查询是手机网站和自适应网站的重要部分,媒体查询可以根据不同的屏幕大小,做响应的处理,如文字的大小,区块隐藏等等 媒体查询,这里 ...

  3. 第九十三节，html5+css3移动手机端流体布局，基础CSS,头部设计,轮播设计,底部设计

    html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计 基础CSS 首先将通用css属性写好 @charset "utf-8"; /*通用样式*/ /*去 ...

  4. 第九十二节，html5+css3移动手机端流体布局，开篇知识

    html5+css3移动手机端流体布局,开篇知识 将项目设计成移动端可访问的页面,项目采用的是流体布局.也就是宽度以百分比自适应的,因为手机的屏幕大小不一致  一．整体设计     首先 我们要了解一 ...

  5. 前端切图神器-cutterman

    之前我写过一篇关于前端切图的博客:https://www.cnblogs.com/tu-0718/p/9741058.html 但上面的方法在切图量大时依然很费时间,下面向大家推荐这款免费切图神器 c ...

  6. 前端切图相关ps技术

    标签(空格分隔): 前端切图 复制图层到一个新的ps文件 对于单个图层 1.选中图层 2.CTRL+A全选 3.CTRL+C 4.CTRL+N新建文件,文件大小默认就可以(背景透明也在这个面板设置), ...

  7. （淘宝无限适配）手机端rem布局详解（转载非原创）

    从网易与淘宝的font-size思考前端设计稿与工作流 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问 ...

  8. （淘宝无限适配）手机端rem布局详解

    从网易与淘宝的font-size思考前端设计稿与工作流 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问 ...

  9. 前端切图实战（PSD设计稿转化为前端）

    课程来源:https://www.imooc.com/learn/668 一:读设计稿 划分:头部.尾部.公共部分.大概分多少块.logo的重用.列表有哪些.各部分用什么技术实现等等. 二:建立项目目 ...

随机推荐

  1. ORA-01078错误举例：SID的大写和小写错误

    案例重演: dbca建库.SID:metro    --手工建库时实例名小写的metro ...... [oracle@org54 ~]$ export ORACLE_SID=METRO        ...

  2. HTML实体与网页编码(汉字转化为了html实体) .

    http://blog.csdn.net/f438952359/article/details/7481267 HTML实体与网页编码(汉字转化为了html实体) . htmlencodingfunc ...

  3. JVM route

    http://www.linuxidc.com/Linux/2013-06/86446.htm

  4. HDU——T 3501 Calculation 2

    http://acm.hdu.edu.cn/showproblem.php?pid=3501 Time Limit: 2000/1000 MS (Java/Others)    Memory Limi ...

  5. Linux 从core信息中找到TLS信息

    背景 我们在查core问题时,有时候须要查看某个TLS变量的值.可是GDB没有提供直接的命令,或者我不知道.这篇文字的目的.就是想办法从core文件里找出某个线程存放TLS变量的内容. 依据 Linu ...

  6. JS概述

             从Asp.NET跨越到JavaScript.这既是一个新的领域也是一个非常熟悉的地方,新是由于不知道什么是JavaScript,首先来了解一下什么是JavaScript.       ...

  7. 把java程序打包成.exe

    准备工作:将可执行的jar包跟资源跟第三方包都放到一个目录下. 能够将jre包也放入里面.这样在没有安装jre的情况下也能够执行. watermark/2/text/aHR0cDovL2Jsb2cuY ...

  8. 关于YUM错误，Error: rpmdb open failed

    错误如题: rpmdb: Thread/process / failed: Thread died in Berkeley DB library error: db3 error(-) from db ...

  9. Android 关于java.util.NoSuchElementException错误

    写了一个从A文件复制到B文件的例子,其中要求去掉重复的行. 于是想到了Set,这本来是很容易的事情,结果在向外写数据时抱错 Java.util.NoSuchElementException 网络上反复 ...

  10. （转）alter database open resetlogs 的意义

    转自:http://blog.sina.com.cn/s/blog_63216bda0100zblr.html Oracle文档中提到,一旦用备份的控制文件进行数据库恢复,就需要使用resetlogs ...