项目过去个把月了,一直没有写些东西总结下,这次借着年后的空隙,将当时记录下来的几个点回顾一下。
今明的布局: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. VS2010-使用“预先生成事件命令行”和“后期生成事件命令行”功能

    原文:VS2010-使用"预先生成事件命令行"和"后期生成事件命令行"功能 xcopy /r /y $(TargetPath) $(ProjectDir)..\ ...

  2. 【高德地图API】从零开始学高德JS API(三)覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物

    原文:[高德地图API]从零开始学高德JS API(三)覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物 摘要:覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的地图.在 ...

  3. HQL语句大全

    第 15 章 HQL: Hibernate查询语言 Hibernate配备了一种很强大的查询语言,这样的语言看上去很像SQL.可是不要被语法结构 上的类似所迷惑,HQL是很有意识的被设计为全然面向对象 ...

  4. Exception dispatching input event. use XlistView

    今天上午解决Bug,一个上午的时间: log: 11-01 14:49:14.826: E/InputEventReceiver(30810): Exception dispatching input ...

  5. Hibernate 一对多注解 mappedby 作用

    package oneToMany; import java.util.Set; import javax.persistence.*; /* 注意导入时,是导入:import javax.persi ...

  6. C#函数式编程-高阶函数

    随笔分类 -函数式编程 C#函数式编程之标准高阶函数 2015-01-27 09:20 by y-z-f, 344 阅读, 收藏, 编辑 何为高阶函数 大家可能对这个名词并不熟悉,但是这个名词所表达的 ...

  7. C语言语法笔记 – 高级用法 指针数组 指针的指针 二维数组指针 结构体指针 链表 | IT宅.com

    原文:C语言语法笔记 – 高级用法 指针数组 指针的指针 二维数组指针 结构体指针 链表 | IT宅.com C语言语法笔记 – 高级用法 指针数组 指针的指针 二维数组指针 结构体指针 链表 | I ...

  8. android简单的计算器

    所使用的算法:表达式求值(中缀表达式转后缀表达式,后缀表达式求值值) 不如何设计接口,有时间来美化! MainActivity.java package com.example.calculator; ...

  9. 浅谈我对几个Web前端开发框架的比较

    强调一下,这篇日志主要还是针对想学前端开发的新朋友写的,不是说我有什么独特见解,而是比较客观的状态,就各种框架的异同和应用场合,需要注意的地方做简单描述,不做具体深入分析,有的地方比较抽象,对于抽象之 ...

  10. sql语句 面试题

    ql语句 面试题   自动编号   学号   姓名 课程编号 课程名称 分数 1        2005001  张三  0001      数学    69 2        2005002  李四 ...