忘掉你所知道的一切吧 第十五周周记

2016-11-07 10:58:27来源:作者:全栈工程师成长记人点击

第七城市
周一、写页面

技巧:修改页面内容显示宽度

在 bootstrap 中,如果想要全屏展示页面内容, 使用 .container-fluid class,居中显示使用 .container class。

通常页面内容宽度在 960px 到 1280px 左右,如果导航栏使用 .container-fluid class ,则在浏览器显示宽度超过页面内容宽度(比如前面说的 1280px) 之后,导航栏的内容会被拉伸到和浏览器窗口同样的宽度,就会变得和页面内容不对齐,因此可以根据页面内容的样式改用 .container 或者重新给导航栏定义一个适合宽度的 class。

说到导航栏,如果给导航栏使用 .navbar-default class,默认的颜色是 #f8f8f8 ,把 #f8f8f8 换成自己想要的颜色值,就可以给导航栏“变脸”了,如果要把它变成透明色,改为 transparent 即可 :

.navbar-default { background-color: transparent;}

又,假设在网页的顶部设置了大面积的背景图,想要让导航栏和这个背景图融为一体,最简单的实现方法是将整个 navbar 的代码都移动(或者通过 renden 的方式)到这个背景图的 div 里即可。

周二、写页面

技巧:消除图片排列间距

症状:水平排列图片的时候,默认会出现一个空白间距,如果不想要这个间距的话,使用图片本身的 margin 是不行的,哪怕负数也不起作用。那该如何去除呢?

解法:假设将这些图片排在一个 div 里,设置一个 class,代码如下:

.no-spacing { letter-spacing: -8px;}

然后在图片的父级 div 使用上面的 .no-spacing class 即可。

效果:

参考及延伸阅读: 如何解决inline-block元素的空白间距

周三、写页面 技巧:将 CarrierWave 上传的图片按比例裁切

CarrierWave 配置文件默认的图片裁切方式是 resize_to_fit ,只需改为 resize_to_fill 即可将图片按照设定的比例裁剪,这样做虽然会导致部分图片内容被裁掉,但是可以保证图片不会变形。

app/uploaders/image_uploader.rb version :thumb do- process :resize_to_fit => [200, 200]+ process :resize_to_fill => [200, 200] end 周四、完善用户资料功能 技巧:套用 layout 针对单个 action: app/controllers/groups_controller.rb def index @groups = Group.all+ render layout: "you_layout" end 针对单个 controller: app/controllers/groups_controller.rb class GroupsController < ApplicationController+ layout "you_layout" def index @groups = Group.all end 针对一系列的 controller,在父级 controller 使用一次即可: app/controllers/admin_controller.rb class AdminController < ApplicationController+ layout "you_layout"

因为子级 controller 会自动继承 class Admin::UsersController < AdminController 。

针对 devise ,则需要修改 config/initializers/devise.rb : config/initializers/devise.rb Devise.setup do |config|略…… + Rails.application.config.to_prepare do + Devise::SessionsController.layout "you_layout" + Devise::RegistrationsController.layout "you_layout" + endend 周五、文案及细节调整

技巧:给不同的用户身份做不同的登录后重定向

之前有说过 如何自定义 devise 的 redirect_to ,现在假设普通用户登录之后给他重定向到用户中心页面,而给管理员重定向到网站后台管理页面,只要在前面的基础上做一小小的判断即可:

app/controllers/registrations_controller.rb def after_sign_in_path_for(_user) if current_user.is_admin? admin_path #管理员路径 else account_path #用户路径 end end 周六、初学 Sketch

跟着一个 Sketch 教程 实作,通过重复的小套路,只要两个小时就能做出一个和教程一样的营销邮件,实现了 Sketch 从新手到入门的跨越。

掌握了几个基本工具的使用:

矩形(调整背景色、边框、大小) 文本(换字体、大小、颜色) 分组(组合、排序、命名、重复使用)

同时还学会:

画布的建立、大小、背景色调整 参考线的建立、拖动与删除 建立可复用的符号 建立可复用的文本样式 文件的导出 忘掉你所知道的一切吧

“忘掉你所知道的一切吧”——出自 《奇异博士》 电影台词,这句话是莫度男爵对想要学习魔法却又傲慢的主角斯蒂芬医生说的,翻译成 xdite 老师的话就是“ 放下你的无效学习方式 ”,嗯,就是这样。

第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台