【总结】2016.12.21-2016.12.22
2016-12-23 本文已影响0人
I_am_Cynthia
计划的任务
- 黑xx 页面与交互KO
实际完成
- 黑xx 模板与接口修正
- 黑xx 播放
- 黑xx 支付
- 黑xx 自测与修改小问题
总结
- 基本上页面都完成了，测试过两遍。
- input 当为button的时候，value“加载更多”文字没有居中。找了下解决，align:middle只是配合图片素材时使用的。错误原因是之前用div做的，单行盒布局的属性没有删除，当改为用input的时候还残留了一些class，这些class使得input的样式在IOS下变了样（奇怪，在安卓上没问题），后来用非常纯净的
<input type="button" value="加载更多"/>标签再加点样式，就是默认居中的。当时为什么由div改用了input呢？是因为防止用户多次点击“加载更多”，在一次点击后，我先把input 的值设为disabled，再去请求数据，完成了再设置disabled为false。利用这个来进行控制,但是没有把弹性盒布局的属性拿掉。 - 滚动条。一个div的若设置
overflow:scroll，在页面内容比较少（不足以使用滚动）的情况下，在安卓机上还是会有滚动条的存在。而设置为overflow:auto;则内容少时无滚动条，多时才会出现。算比较人性化的...原来滚动条可以设置样式的，用::-webkit-scrollbar属性。 - float。对浮动似乎还不太理解。用的是
float:left;,可是最后一个C#标签问什么会在一行的最右呢？
173076220036507694.jpg
原来是float浮动会选择卡位式的占据。我的理解就是在高度上，只要有一点的空隙，div就不会出现在下一行而是出现在高度相对较小的地方。
Paste_Image.png
有了这个前提，在看看为什么最后一个C#标签。把标签都弄成矩形再出去边际，会看得清楚一点。明显 C#后面的asp似乎高度没有旁边的java后台开发的标签高。用chrome鼠标选择看到，确实高度不一样。原来是中英文字体高度不同。在div随字体宽高自由撑起的情况下，div都是不同高度的。
725992038229290051.jpg
只要把高度定好，就不会出现这种问题了。另外还可以用弹性盒布局+换行来处理这些标签。
Paste_Image.png
