手机端自适应布局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" />
<!--<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的更多相关文章
- 前端切图:手机端自适应布局demo
手机端自适应布局demo原型如下: 图片发自简书App 要求如下:适应各种机型源码如下: <!DOCTYPE html > <html> <head> <me ...
- 第九十四节，html5+css3移动手机端流体布局，旅游部分，媒体查询
html5+css3移动手机端流体布局,旅游部分,媒体查询 媒体查询 媒体查询是手机网站和自适应网站的重要部分,媒体查询可以根据不同的屏幕大小,做响应的处理,如文字的大小,区块隐藏等等 媒体查询,这里 ...
- 第九十三节，html5+css3移动手机端流体布局，基础CSS,头部设计,轮播设计,底部设计
html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计 基础CSS 首先将通用css属性写好 @charset "utf-8"; /*通用样式*/ /*去 ...
- 第九十二节，html5+css3移动手机端流体布局，开篇知识
html5+css3移动手机端流体布局,开篇知识 将项目设计成移动端可访问的页面,项目采用的是流体布局.也就是宽度以百分比自适应的,因为手机的屏幕大小不一致 一．整体设计 首先 我们要了解一 ...
- 织梦M手机端/自适应网站内容图片变形解决办法
我们在做响应式网站或者织梦M功能手机站的时候,会发现如果内容页图片太大,在移动端显示会变形,dede手机端图片过长等问题,手机端文章内容页图片不能自适应!这给通过手机端浏览网站的用户造成了很不好的用户 ...
- （淘宝无限适配）手机端rem布局详解（转载非原创）
从网易与淘宝的font-size思考前端设计稿与工作流 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问 ...
- （淘宝无限适配）手机端rem布局详解
从网易与淘宝的font-size思考前端设计稿与工作流 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问 ...
- 怎么设置table(表格)手机端自适应宽度
我们在wordpress文章页面经常会用到表格,有些是从其他网页或者文档复制粘贴过来的,在电脑设备网页上都能很好的展示,但是在移动设备上或者低分辨率设备上却经常撑破列宽,很是影响美观和客户体验.这里就 ...
- 移动端适配（手机端rem布局详解）
1. 问题的引出 如果html5要适应各种分辨率的移动设备,应该使用rem这样的尺寸单位,同时给出了一段针对各个分辨率范围在html上设置font-size的代码: html{font-size:10 ...
随机推荐
- Linux 进程通信之管道
管道是单向的.先进先出的,它把一个进程的输出和还有一个进程的输入连接在一起.一个进程(写进程)在管道的尾部写入数据,还有一个进程(读进程)从管道的头部读出数据.数据被一个进程读出后,将被从管道中删除, ...
- hdu-3642--Get The Treasury-线段树求面积并
求空间中叠加3次及3次以上的体积. 由于|z|<=500.所以直接把z轴剥离出来1000层. 然后对于每一层进行线段树求面积并. #include<stdio.h> #include ...
- [TS] Swap two element in the array (mutation)
Shuffling is a common process used with randomizing the order for a deck of cards. The key property ...
- 有关Canvas的一点小事--鼠标绘图
1. 如何根据鼠标位置获取canvas上对应位置的x,y. 2. canvas的图糊了,设置宽和高的方式不对. 3.鼠标绘图代码 之前听说过canvas这个元素,但是实际上并没有深入了解过.不过日 ...
- 00089_字节输出流OutputStream
1.字节输出流OutputStream (1)OutputStream此抽象类,是表示输出字节流的所有类的超类.操作的数据都是字节,定义了输出字节流的基本共性功能方法: (2)输出流中定义都是写wri ...
- 【AtCoder Regular Contest 082 F】Sandglass
[链接]点击打开链接 [题意] 你有一个沙漏. 沙漏里面总共有X单位的沙子. 沙漏分A,B上下两个部分. 沙漏从上半部分漏沙子到下半部分. 每个时间单位漏1单位的沙子. 一开始A部分在上面.然后在r1 ...
- 小程序踩坑记- tabBar.list[3].selectedIconPath 大小超过 40kb
重新启动微信小程序编辑器的时候遇到了这样的一个问题: tabBar.list[3].selectedIconPath 大小超过 40kb 微信小程序开发的过程之中总会出现这样或者那样的错误,需要我们耐 ...
- Android Studio查看android源码
Android Studio的默认版本在/Applications/Android Studio.app/Contents/info.plist中设置,默认没有1.8.如下: <key>J ...
- C_C++指针指针应用详解
前言:复杂类型说明 要了解指针,多多少少会出现一些比较复杂的类型,所以我先介绍一下如何完全理解一个复杂类型,要理解复杂类型其实很简单,一个类型里会出现很多运算符,他们也像普通的表达式一样,有优先级,其 ...
- php 如何写一个自己项目的安装程序
版权声明:此篇文章只是用作笔记,如果版权冲突,请邮件通知一下(15201155501@163.com) https://blog.csdn.net/shenpengchao/article/detai ...