Oh yeah,网站终于上线了。从开始制作到正式上线差不多用了一个月左右的时间,中间遇到了很多的问题,但是总体来说实验还是很成功的。
网站制作目的:测试横屏网站的可行性以及制作成本
制作时间:预计一个月,实际差不多也就用了一个月吧
主要实现的目标:
- 后台的图片上传组件的编写,包括上传,裁切图片,上水印
- 后台二维码生成,附带水印功能(使用了ThoughtWorks.QRCode.dll)
- 制作了tag标签系统
- 前台全页面横向滚动显示,目的是提高页面使用效率,提高预读体验
- 缩放自适应浏览器大小,保持高度100%
- 手机端自适应
- 异步加载更多列表
- 图片lazyload(感觉没用,放弃掉了)
- 文章的横向显示(比想象的容易太多了)
实际实现的目标基本上全部实现了,我感觉最难的文章横向显示实际操作中比想象的容易很多
直接利用css3的 column 属性就可以实现,然后同步计算document的宽度给body赋个宽度即可,相对列表页的计算量来说还是小了很多,只需要算高度即可,比想象的简单太多。最早的设计方案是根据body的高度叠加分列的数量,实际上没用到这段代码(虽然写了)
尚未完成的部分:
- LOGO,白白和凯东求给力啊!我的棒棒糖啊
- 文章页面点击图片弹出放大图(懒的要死,这两天做好吧)
- 手机搜索页继续适配
- 搜索列表页的重新制作(现在偷懒直接用的list页的布局,无法凸显搜索内容)
- 加入一些表情
- 文章内容tag高亮
- 暂时还没想到
总结一下:
横向页面很好做。。。。真的不难。。。。主要还是利用css3和html5的便利(也就是说本站不支持ie6-8,部分支持9,xp用户再见)
横向页面虽然在浏览上我觉得更舒服了,但是最大的缺点就是。。。。。长图片显示出来就跟面条似的。。。需要切分,不过长图片浏览起来也不友好,而且一般 都是长微博转过来的,实际上文章的话横向浏览还是优势很大的。
宽图片支持好像也就那样,因为我设置的列宽是720,其实一般的图片都够放了。。。比720还宽放他干啥,传统网站模式估计也要缩小的(960-240=720 我还没算中间的10margin呢)
好了 基本就这些,庆祝一下上线好了
撒花~