8. 完成辅助页面的样式

项目的 Demo 在 http://juy.fm

相比起结构设计和逻辑设计,写样式并没有什么值得介绍的技术,加上我的审美也还停留在程序员这个层次上,目前想把样式做好实在是有点「有心无力」的感觉,只能尽量遵循最最基础的设计最佳实践,同时辅以一个 UI 框架降低门槛(我选用的是 Semantic-UI)。

样式编写中用到的几个技巧多是现在颇为常见的:

  • 利用 position: absolute 做垂直居中,top 设为 50%,margin-top 设为 - height / 2;
  • 鼠标 hover 到「关闭」按钮上有放大动画,利用了 CSS3 的 transition 和 transform 属性;
  • 本来还想利用 jQuery.animate() 实现两个简单的动画效果,后来想想,意义不大,还是注释掉了。

明天就要引入 turn.js 的部分了,后续会越来越精彩!

Github 地址:完成辅助页面的样式

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,676评论 25 709
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,357评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,833评论 0 2
  • 1. 背景 一个新版本的代码,在4.x版本进入某个页面的时候,必现crash。看到必现,心情就放松了一半。大致的c...
    nothingwxq阅读 1,905评论 1 4
  • 文/赵晓璃 面对生活,我们无法保证自己不向其妥协,有时候甚至会委屈自己。 是什么让你无法过上自己想要的生活?理想的...
    赵晓璃阅读 1,467评论 3 22