项目过去个把月了,一直没有写些东西总结下,这次借着年后的空隙,将当时记录下来的几个点回顾一下。
今明的布局:position技巧
每当看到类似横向并排布局的时候,总是想起定宽浮动,和下面讲到的列表并排不同,这里是指定输出的数据。并且你可以看到,在浮动的元素中,有一个元素与其他不同,我们将其他相同样式的元素称为时段导航,不同的单独称为日期导航。最初的认知告诉我要用ul标签,内嵌li标签来解决这个布局,可是在我尝试多次之后,并没有达到理想效果,日期导航和时段导航的留空和高度始终不和谐。之后,我分析了以下,之所以不适合完全用ul li 浮动来排版,是因为日期导航的样式实在是太区别于时段导航,让我们可以将它单独拎出来作为一个独立样式来实现。
我的方案是:时段导航仍用合适的ul li 来实现,而日期导航采用div标签定位{position:absolute; top:0; right:0;}来实现。这样,日期导航始终出现在目标区域的最右边,我只要关注时段导航的留白和高度,就能完全掌控日期导航的留白和高度,实现理想展示效果。

del引发的下划线:*{}去除,del{}特殊line-though
del标签在某些安卓系统的浏览器下会展示多余的底部下划线,即目标样式同时拥有删除线和下划线,看起来很不舒服。我采用的解决方案是用*去除所有下划线,然后指定目标样式为{ text-decoration:line-through;} 这样del在浏览器中的展示就统一了。
列表布局:width: Npx; 配合 overflow:hidden技巧
这个是小技巧,相信大家都知道。
我这里写出我的想法,我的认知告诉我像下面这种并列的大都是用定宽,加上浮动方案解决。这样浮动没有问题,问题就在于在控制中间留白的时候,我的思维限制于宽度中,就决定给奇偶项不同的margin值,奇数项是:margin-right;偶数项是margin-left;
这样有个弊端:必须要求后端给的数据是成双成对的,比如:6*6*4,如果其中参杂奇数:5*6*3,那么所展示的布局就会错乱。在这个项目中,这是完全不可控的,意味着随时有奇数对儿的数据出现,因此,这种奇偶对待的方案被完全否定。
 
我的一行两列方案:
 
我的留空方案:
 
列表导航随滚动条滚动,样式处理技巧
导航随高度智能漂浮是常见的UI展现方式,不过在实现的时候我踩了个大坑。实现思路很明确:当目标容器的top值小于滚动的高度时,目标容器的样式设置为{position:fixed;top:0;}
然后再赋予悬浮的样式,就能达到如下效果。
其中的坑在哪呢?简单的这么实现,你会发现,在PC浏览器上, 你拖动滚动条的时候目标容器会在临界值的边缘抖动,这很让人不爽。问题在哪里?没错,就是因为你野蛮的将目标直接从它的原始位置上拽了下来,导致整个web页面的布局发生变化,目标容器以下的元素都会自动上调位置,这就造成了难看的抖动画面。
我的解决方案是:将要转换样式的时候,保留目标容器的位置,即设置合适的宽和高。
 
总结
     
以上几点是我印象比较深刻的,虽然技术含量不高哦,但我想表达的是前端是个Magic,有很多方案可以实现设计师的效果,但要想用最舒适,最平滑的方案去实现,我们还是得花心思的,野蛮的实现可能只会带去不和谐的用户体验。
最后还是希望带给大家分享的快乐。算是起步吧。

Mobile页面项目总结的更多相关文章

  1. Sharepoint页面项目展示画廊纯前端实现,后端用list/library简单维护

    需求背景: Sharepoint页面项目展示画廊.图片+文字,要求图片与文字用Sharepoint Library维护,然后在sharepoint页面上被调用,生成项目展示画廊. 解决方案(纯前端), ...

  2. [ Talk is Cheap Show me the CODE ] : jQuery Mobile页面布

    [ Talk is Cheap Show me the CODE ] : jQuery Mobile页面布局 当我们专注地研究人类生活的空虚,并考虑荣华富贵空幻无常时,或许我们正在阿谀逢迎自己懒惰的天 ...

  3. (二)Jquery Mobile介绍以及Jquery Mobile页面与对话框

    Jquery Mobile介绍以及Jquery Mobile页面与对话框  一. Adobe Dreamweaver CS6 环境 最新版本的cs6会支持JM的使用,有自动提示功能,很强大.安装说明地 ...

  4. Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(上篇——纯前端多页面)

    Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(上篇--纯前端多页面) @(HTML/JS) 一般来说,使用vue做成单页应用比较好,但特殊情况下,需要使用多页面也有另外 ...

  5. Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(下篇——多页面VueSSR+热更新Server)

    Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(下篇--多页面VueSSR+热更新Server) @(HTML/JS) 这是Vue多页面框架系列文章的第二篇,上一篇(纯前 ...

  6. vue自动路由-单页面项目(非build时构建)

    博客中自动路由的原理? 答:简单点说,就是在请求页面时,根据url进行动态添加路由. 与其它自动路由博客的区别? 目前网上的博客,一般都是在build的时候进行动态路由添加,而本博客,采用的是在获得u ...

  7. jQuery Mobile 页面事件

    jQuery Mobile 页面事件 在 jQuery Mobile 中与页面打交道的事件被分为四类: Page Initialization - 在页面创建前,当页面创建时,以及在页面初始化之后 P ...

  8. 用谷歌浏览器Chrome浏览jQuery Mobile页面需要配置Tomcat服务器

    在浏览jQuery Mobile 页面中,除了 Chrome浏览器出错外,其他的浏览器都ok: 这里,是因为需要单独配置 Tomcat 服务: 1.先配置java jdk: 2.下载,安装,配置,To ...

  9. 02.Jquery Mobile介绍以及Jquery Mobile页面与对话框

    一.为什么要学Jquery Mobile   JqueryMobile 是jquery的移动版本,懂基本的jquery知识,会简单的html+css就可以完成很多复杂的功能,还有就是这个框架在企业中用 ...

随机推荐

  1. crawler_UE使用技巧

    UE使用技巧 Tip 1: 如何去掉所编辑文本中包含特定字符串的行? 这则技巧是在UltraEdit的帮助文件里提到.CTRL+R 调出来替换(Replace)窗口,选中"使用正则表达式&q ...

  2. 【Swift】沙盒缓存

    本地sandbox缓存目录     沙盒の 主目录: po NSHomeDirectory()   /Users/SpongeBob/Library/Developer/CoreSimulator/D ...

  3. C#中四个判等函数的认识

    donet提供了四个判等函数,分别是referenceEqual,静态Equal,具体类型Equal,和==. 首先来说,object.referenceEqual和静态Equal public st ...

  4. ftk学习记录(button一片)

    [ 声明:版权所有所有.欢迎转载,请勿用于商业用途.  联系信箱:feixiaoxing @163.com] 前面,我们说到了label,这里能够看一下label执行的效果是怎么样的. waterma ...

  5. <<Python基础课程>>学习笔记 | 文章13章 | 数据库支持

    备注:本章介绍了比较简单,只是比较使用样品,主要假设是把握连接,利用数据库.和SQLite做演示样本 ------ Python数据库API 为了解决Python中各种数据库模块间的兼容问题,如今已经 ...

  6. Ronco创投原则 - 硅谷创业教父Paul Graham文摘

    (天地会珠海分舵注:虽然已经尽力翻译,还是担心会和大师的原意有偏差,所以这里保留英文原文给大家作参考) Ronco创投原则 No one, VC or angel, has invested in m ...

  7. Java之IO流基础流对象

    输入流和输出流是相对于内存设备而言 即将外设中的数据读取到内存中就是输入    将内存中的数据写入到外设中就是输出   字符流的由来:     其实就是:字节流读取文字字节数据后,不直接操作而是先查指 ...

  8. dom03

    鼠标事件: 键盘事件: //通过class获取元素,封装一个通过class获取元素的方法 //IE10以下不支持document.getElementByClass() function getByC ...

  9. [SQL]死锁处理语句

    原文:[SQL]死锁处理语句 引言 今天在群里看到分享的解决死锁的sql语句,就想着这东西以后肯定用的着,就下载下来,在这里记录一下,以后查找也方便. SQL SET QUOTED_IDENTIFIE ...

  10. MVC多模板支持

    参考: ASP.NET MVC:多模板支持