淘宝移动端首页静态开发

这是最初做完淘宝pc页面布局之后顺手做了个移动端的淘宝首页，辛亏有做笔记这个习惯，要不都不记得那时候的心路历程了
点击这里预览效果

开发耗时

2017-9-17 10:00~6:00（约6小时）

开发中遇到的问题及解决方案

问题一：文本溢出
①　“热门市场”模块的商品说明设置单行文本溢出省略号显示未生效
解决方案：检查发现overflow:hidden;text-overflow:ellipsis;white-space: nowrap;三个条件均满足。问题在与包裹文字的标签为内联标签span，并不支持宽高，因此设置的宽度未生效。对span添加display:block，以块级元素显示即可解决。

②　“猜你喜欢”模块商品说明两行文字溢出省略号显示未生效
解决方案：处理包裹文字的标签，删除white-space: nowrap，修改css代码如下：
{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; //显示2行
-webkit-box-orient: vertical;//设置伸缩盒对象的子元素从上到下纵向排列
}

[1] 参考资料：
-webkit-line-clamp 是一个不规范的属性（unsupported WebKit property）它没有出现在 CSS 规范草案中。限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他外来的WebKit属性。
常见结合属性：
text-overflow：可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。
display: -webkit-box：必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient：必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。
默认是水平的，当值设为vertical时为垂直排列
-webkit-line-clamp：<number number用于显示的行数

问题二：淘宝图标列表布局
①　采用两个样式相同ul标签的方式实现换行，虽然处理方便，但并没有很好的发挥ul的作用
解决方案：改变结构，用一个ul标签包裹所有的图标，使结构简单清晰
问题三：图标背景图缩放
①　在模拟器用不同机型测试发现图标背景图大小不能跟随容器大小改变
解决方案：为设置背景图的容器添加background-size:100%;

从项目中学到的经验和技巧

相比PC端页面布局，移动端布局简单很多，合理使用弹性盒模型布局提高了开发效率，它是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式，非常适合移动端页面开发。实践之后再看一些资料，使我对弹性盒模型有了更深入的理解认知。
首次使用less开发，Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，有效降代码量，也便于后期修改css代码。经历了之前很长时间的纯手工书写代码，这次用less明显感觉到工作量降低，书写代码结构清晰，便于扩展。less可以方便地封装对浏览器语法差异的重复处理，减少无意义的机械劳动。还可以轻松实现多重继承，无论父类有什么改动子类都会同步更新。由此可见，掌握基础之后再去合理使用开发工具会有事半功倍的效果。
在淘宝移动端网页上交互并不多，看到有个淘抢购模块有个倒计时功能，很感兴趣，就花点时间思考一下这个小逻辑。首先做布局，倒计时分为时分秒三个部分，因此我用三个span标签来存放三个值，分别设置id为“h”，“m”，“s”，模仿淘宝首页做好了三个倒计时模块的样式。接下来考虑实现，倒计时的原理并不复杂，设定一个未来时间，再获取当前时间，计算两个时间的差值，处理这个值获得具体时、分、秒的值，分别对时、分、秒进行判断，确定最终要显示在html中的值。不过代码实现部分我用的还是很原始的js写法，继续学习用更好的方法去实现类似的小逻辑。

代码放在我的仓库里啦，感兴趣可以看看~传送门