前端切图:手机端自适应布局demo
手机端自适应布局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>
转载于:https://www.cnblogs.com/wangting888/p/9701919.html
前端切图:手机端自适应布局demo相关推荐
- 手机端自适应布局demo
原型如下: 要求如下:适应各种机型 源码如下: <!DOCTYPE html > <html> <head> <meta http-equiv ...
- （淘宝无限适配）移动手机端rem布局详解（转载非原创）
https://www.cnblogs.com/well-nice/p/5509589.html (淘宝无限适配)手机端rem布局详解(转载非原创) 从网易与淘宝的font-size思考前端设计稿与工 ...
- 第九十三节，html5+css3移动手机端流体布局，基础CSS,头部设计,轮播设计,底部设计...
html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计 基础CSS 首先将通用css属性写好 @charset "utf-8"; /*通用样式*/ /*去 ...
- 前端切图之svg图标的复用基于defs和use 亲测有用
切图网长期致力于web前端开发外包服务,而我们也关注到现在图标很多时候采用svg更多一点,然后图标字体文件已经提供了很多种类的图标,不过采用svg图标可以自行选择更符合.更好看的图标,相比于字体图标更 ...
- 前端切图案例课程一则-姜威-专题视频课程
前端切图案例课程一则-201人已学习 课程介绍 本课程以一套响应式网站设计图,进行切图为案例,还原老司机整个切图过程.本课程属于初级的前端工程师系列课程中案例课程的第一套课程,本课程需 ...
- 静态网页 手机端自适应
浏览器打开的网页,页面做手机端自适应以及引入vue和ant-design html <!DOCTYPE html> <html lang="en"> < ...
- 5款前端切图工具大比拼：谁是最强切图神器
前端切图是前端工程师们还原设计稿的过程中必不可缺的一环.不过,切图工作究竟谁来做?这个问题我们在各大论坛也屡见不鲜:前端工程师认为设计师出了设计稿,那么相应的切图也应该一并交付:设计师则认为前端工程师 ...
- 前端切图神器avocode
前端切图神器avocode 安装avocode 前端的基础工作就是把设计师的设计稿还原成前端页面,所以切图是作为一个前端的基本技能.杀敌要有趁手的兵器,而前端一般都是用photoshop,但是这个兵器 ...
- 介绍一个前端切图神器avocode
2019独角兽企业重金招聘Python工程师标准>>> 安装avocode 前端的基础工作就是把设计师的设计稿还原成前端页面,所以切图是作为一个前端的基本技能.杀敌要有趁手的兵器,而 ...
最新文章
- 笔记本电脑的有线和无线网络同时使用，如何设置？
- Python学习笔记（二）：标准流与重定向
- 第十次作业是同一个人
- MySQL-日志二进制日志binlog初探
- 基于原始套接字的嗅探器
- dos下登录fedora下的vsftp失败
- action请求是什么意思_凭什么说大疆Osmo Action可以干掉 GoPro hero7？
- Facebook也大干新闻聚合 “新闻快读”向所有媒体开放
- kali linux学习入门- Chrome浏览器安装，可以正常打开
- JS中判断某个字符串是否包含另一个字符串的方法
- Linux自动化运维第十八课
- 对抗弱网下的音视频难题，声网正式开源抗丢包音频编解码器 Agora SOLO！
- 数值优化（二）：信赖域方法与二维空间法
- 一道经典的C++题，关于分钱的问题，适合新手阅读(黑客X档案论坛题目) ［c#］...
- 【软件测试-实验-8】测试管理工具应用
- aspose.words生成pdf字体乱码为方框
- java partial class_easymock教程-partial class mocking
- 电脑网络适配器WLAN丢失，怎么找回？
- matlab自学入门
- 这样弄简历就算面试过了，offer也会黄！