By

文章目录
  1. 1. 课程目标
  2. 2. 课程复盘
    1. 2.1. 1. 最简单的landingpage，立取可用
      1. 2.1.1. Step 0: 把 welcome/index 设为首页
      2. 2.1.2. Step 1: 在首页加个头图
      3. 2.1.3. Step 2: 在头图下方加入其他信息
    2. 2.2. 2. 管理员后台简单美化
      1. 2.2.1. Step 1:更改按钮样式
      2. 2.2.2. Step 2: 更改表格样式
    3. 2.3. 3. 利用工具来选色
    4. 2.4. 4. 修改导航栏
      1. 2.4.1. Step 0：让导航栏真正的全屏
      2. 2.4.2. Step 1：给导航栏替换不同的颜色
      3. 2.4.3. step 2：去掉导航栏的圆角
      4. 2.4.4. step 3：修改 Logo 字体颜色和对齐样式
      5. 2.4.5. step 4：修改导航栏链接颜色
      6. 2.4.6. step 5：给导航栏 Logo 加图标
        1. 2.4.6.1. 方法一：用 FontAwesome
        2. 2.4.6.2. 方法二：用图片
      7. 2.4.7. step 6：给网站加 Favicon（收藏书签时显示的小图标）
        1. 2.4.7.1. 方法一：用 FontAwesome
        2. 2.4.7.2. 方法二：用图片
    5. 2.5. 5.修改首页大图
      1. 2.5.1. step 0：请使用正版授权的付费或免费图片
      2. 2.5.2. step 1：让大图满屏显示
      3. 2.5.3. step 2：修改文字对齐/背景
      4. 2.5.4. step 3：替换按钮颜色
      5. 2.5.5. step 4：修改按钮大小
    6. 2.6. 6. 制作登录弹窗
      1. 2.6.1. step1 修改 application.js 文件，加入 modal 的 js 效果
      2. 2.6.2. step2 修改 navbar 文件，加入弹窗页面代码，将注册/登入链接与弹窗连接起来
      3. 2.6.3. step3 修改 helper 文件，让弹窗能够正常使用
      4. 2.6.4. step4 在 application.scss 文件中添加以下 css 代码，设置弹窗样式

课程目标

迁移 Rasils: 招聘网站。

课程复盘

1. 最简单的landingpage，立取可用

Step 0: 把 welcome/index 设为首页

routes.rb
1
2
- root 'jobs#index'
+ root 'welcome#index'

Step 1: 在首页加个头图

welcome/index.html.erb
1
2
3
4
5
6
7
8
9
10
11
12
- <h1> Hello World! <h1>
+  <div class="jumbotron">
+    <h1 class="title">18K Offer</h1>
+    <p class="slogan">18K Offer 是一个提供18K薪水工作机会的求职网站。
+    <br>
+    我们希望藉由这个网站，能让大家找到且应征上高薪且优质的工作。
+    <br>
+     凭借自己的努力和天份也会变 Winner
+    </p>
+    <p class="lead"><a class="btn btn-lg btn-danger" href="/jobs">马上应征</a></p>
+  </div>
app/assets/stylesheets/application.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.jumbotron {
  background-image:url('http://fullstack-public.oss-cn-qingdao.aliyuncs.com/2017-04-15-542213.png');
  background-repeat: no-repeat;
  background-size: cover;
  padding-bottom: 110px;
}
.title {
  font-family: "Helvetica Neue", "Microsoft Yahei", 微软雅黑;
  text-align: center;
  margin-top: 200px;
  margin-bottom: 80px;
}
.slogan {
  margin-top: 10px;
  margin-bottom: 50px;
  text-align: center;
  color: white;
  top: 12px;
}
.lead {
  margin-bottom: 60px;
  text-align: center;
  color: white;
}

Step 2: 在头图下方加入其他信息

welcome/index.html.erb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<section id="company">
  <div class = "container-fluid">
    <div class="row">
      <div class="col-sm-4 ">
        <div class="thumbnail">
          <img src="http://fullstack-public.oss-cn-qingdao.aliyuncs.com/2017-04-15-Screenshot%20at%20Apr%2015%2021-43-31.png" alt="search" class = "img-thumbnail">
          <div class="caption">
            <h3>北京朝阳建外SOHO</h3>
          </div>
        </div>
      </div>
      <div class="col-sm-4 ">
        <div class="thumbnail">
          <img src="http://fullstack-public.oss-cn-qingdao.aliyuncs.com/2017-04-15-Screenshot%20at%20Apr%2015%2021-43-48.png" alt="bid" class = "img-thumbnail">
          <div class="caption">
            <h3>info@18koffer.com</h3>
          </div>
        </div>
      </div>
      <div class="col-sm-4 ">
        <div class="thumbnail">
          <img src="http://fullstack-public.oss-cn-qingdao.aliyuncs.com/2017-04-15-Screenshot%20at%20Apr%2015%2021-44-00.png" alt="heart" class = "img-thumbnail">
          <div class="caption">
            <h3>010-12344321</h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
app/assets/stylesheets/application.scss
1
2
3
4
5
6
7
8
9
10
11
.caption {
  margin: 30px;
  text-align: center;
  top: 20px;
}
.thumbnail {
    border: 0 none;
    box-shadow: none;
    margin-top: 60px;
}

2. 管理员后台简单美化

Step 1:更改按钮样式

app/views/admin/jobs/index.html.erb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<td>
-    <%= link_to("Edit", edit_admin_job_path(job)) %>
-    | 
-    <%= link_to("Destroy", admin_job_path(job), :method => :delete, :class => "btn btn-xs btn-default info", :data => { :confirm => "Are you sure?" }) %>
-    |
+    <%= link_to("Edit", edit_admin_job_path(job), :class => "btn btn-xs btn-info") %>
+    <%= link_to("Destroy", admin_job_path(job), :method => :delete, :class => "btn btn-xs btn-danger", :data => { :confirm => "Are you sure?" }) %>
     <% if job.is_hidden %>
-      <%= link_to("Publish", publish_admin_job_path(job) , :method => :post, :class => "btn btn-xs btn-default ") %>
+        <%= link_to("Publish", publish_admin_job_path(job) , :method => :post, :class => "btn btn-xs btn-success") %>
     <% else %>
-        <%= link_to("Hide", hide_admin_job_path(job), :method => :post,  :class => "btn btn-xs btn-default") %>
+        <%= link_to("Hide", hide_admin_job_path(job), :method => :post,  :class => "btn btn-xs btn-warning") %>
     <% end %>
</td>

Step 2: 更改表格样式

app/views/admin/jobs/index.html.erb
1
2
- <table class="table table-boldered" >
+ <table class="table table-boldered table-striped custab" >
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.custab{
  border: 1px solid #ccc;
  padding: 5px;
  margin: 5% 0;
  box-shadow: 3px 3px 2px #ccc;
  transition: 0.5s;
}
.custab:hover{
  box-shadow: 3px 3px 0px transparent;
  transition: 0.5s;
}

3. 利用工具来选色

打开 https://www.materialui.co/colors

4. 修改导航栏

Step 0：让导航栏真正的全屏

修改 app/views/layouts/application.html.erb

app/views/layouts/application.html.erb
1
2
3
4
- <%= render "common/navbar" %>
+ <div class="row">
+   <%= render "common/navbar" %>
+ </div>

说明：这是因为我们的 layout 里用到了 container-fluid 这个 class，它默认会把左右两边的 padding 撑开15px，而 row 这个 class 则是带有左右 负 15px 的 margin，这样就可以抵消掉外面的两个 padding 了。

Step 1：给导航栏替换不同的颜色

修改 app/assets/stylesheets/application.scss
在最底部回车换一个空行，填入

app/assets/stylesheets/application.scss
1
2
3
4
5
6
7
8
...略
+ .navbar-default {
+     background-color: #212121;  //背景颜色
+     border-color: #212121; //边框色
+     margin-bottom: 0; //底部 margin 不撑开距离
+ }

说明：因为本文举例主要修改的是网站首页，而它默认用的是 application layout，application.scss 负责控制 application layout 的样式，所以本文所有的 css 都是在这个 scss 文件里面改。

step 2：去掉导航栏的圆角

更换背景色之后导航栏四边有圆角，我们来把它去掉，增加 css 代码

app/assets/stylesheets/application.scss
1
2
3
4
5
6
...略
+ @media (min-width: 768px) {
+   .navbar {
+     border-radius: 0; //圆角为0
+   }
+ }

step 3：修改 Logo 字体颜色和对齐样式

增加代码

app/assets/stylesheets/application.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
...略
+ .navbar-default .navbar-brand {
+   color: #EF6C00; //字体颜色
+   padding: 10px 15px; //上下10px，左右15px
+   line-height: 30px; //文字行高
+ }
+ .navbar-default .navbar-brand:hover,
+ .navbar-default .navbar-brand:focus {
+   color: #FF6F00; //鼠标放置在链接上的文字颜色
+   background-color: transparent; //鼠标放置在链接上的背景颜色，这里设为透明
+ }

step 4：修改导航栏链接颜色

增加代码（本段代码不做注释说明，请参考step3）

app/assets/stylesheets/application.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
...略
+ .navbar-default .navbar-nav > li > a{
+   color: #EF6C00;
+ }
+ .navbar-default .navbar-nav > li > a:hover,
+ .navbar-default .navbar-nav > li > a:focus {
+   color: #FF6F00;
+   background-color: transparent;
+ }
+ .navbar-default .navbar-nav > .active > a,
+ .navbar-default .navbar-nav > .active > a:hover,
+ .navbar-default .navbar-nav > .active > a:focus {
+   color: #FF6F00;
+   background-color: #FFE0B2;
+ }
+ .navbar-default .navbar-nav > .open > a,
+ .navbar-default .navbar-nav > .open > a:focus,
+ .navbar-default .navbar-nav > .open > a:hover {
+   background-color: #FFE0B2;
+   color: #212121;
+ }

step 5：给导航栏 Logo 加图标

方法一：用 FontAwesome
app/views/common/_navbar.html.erb
1
2
3
...略
- <a class="navbar-brand" href="/">Job Listing </a>
+ <a class="navbar-brand" href="/"><i class="fa fa-diamond" aria-hidden="true">真·24K Offer</i></a>
方法二：用图片

① FontAwesome 的图标数量毕竟有限，而且适合用的也不多，我们也可以用普通图片格式
② 去 http://www.flaticon.com 选一个合适的小图片并以 png 的格式下载，把下载后的图片命名为 logo.png
③ 在 job-listing/public 目录里新建一个 images 文件夹，把 logo.png 复制到images 文件夹里
④ 打开app/views/common/_navbar.html.erb

app/views/common/_navbar.html.erb
1
2
3
...略
- <a class="navbar-brand" href="/">Job Listing </a>
+ <a class="navbar-brand" href="/"><img src='<%= image_url 'logo.png' %>' >真·24K Offer</a>

⑤ 再给 application.scss 加一小段logo图片的样式定义

app/assets/stylesheets/application.scss
1
2
3
4
5
6
7
...略
+ .navbar-brand > img {
+     display: inline-block; //图片和链接文字显示在同一行
+     margin-right: 10px; //图片和链接文字拉开一点距离
+     width: 32px; //定制图片宽度
+     height: 32px; //定制图片高度
+ }

step 6：给网站加 Favicon（收藏书签时显示的小图标）

方法一：用 FontAwesome

① 打开 http://paulferrett.com/fontawesome-favicon ，把 step5方法一 用到的 fa-diamond 转换成 ico 格式并下载，重命名 ico 文件为 favicon.ico
② 在job-listing/public目录里新建一个 images 文件夹，把 favicon.ico 复制到 images 文件夹里
③ 在 app/views/layouts/application.html.erb 中加入一行代码，如下图

app/views/layouts/application.html.erb
1
2
3
...略
  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
+ <link rel="shortcut icon" href="/images/favicon.ico">
方法二：用图片

① 打开 http://www.png2ico.com ，把 step5方法二 用到的 logo.png 拖动上传并转换成 ico 文件
② 下载 ico 文件，按照step5方法二的方法重命名、放入文件夹、引用。

5.修改首页大图

step 0：请使用正版授权的付费或免费图片

付费 https://www.shutterstock.com

免费 https://picjumbo.com
免费 https://unsplash.com
免费 https://pixabay.com

step 1：让大图满屏显示

修改 app/assets/stylesheets/application.scss

app/assets/stylesheets/application.scss
1
2
3
4
5
+ .container-fluid .jumbotron{
+   padding-bottom: 110px;//内部的底部边距，这样按钮不会很靠近底部了
+   margin: 0 -15px 20px;//顶部margin为0，因此可以直接接着导航栏；左右margin为负15，因此可以顶到浏览器的边缘（抵消 container-fluid 的 15px 左右padding);底部margin为20，会跟下面的内容撑开距离
+   border-radius: 0;//圆角为0
+ }

step 2：修改文字对齐/背景

本例背景图的主体位于右侧，因此需要把文字的显示对齐改为左对齐。
我们顺便试着给文字区域加一点带透明度的背景色。

app/assets/stylesheets/application.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.title {
-  font-family: "Helvetica Neue", "Microsoft Yahei", 微软雅黑;
-  text-align: center;
-  margin-top: 200px;
-  margin-bottom: 80px;
  
+  background-color: rgba(250, 250, 250, 0.39);//背景颜色含透明度
+  max-width: 500px;//最大宽度
+  margin-top: 200px;//和顶部拉开距离
+  margin-bottom: 0;//这样就可以紧接息面的描述文字
+  border-top-right-radius: 3px;//右上角圆边
+  border-top-left-radius: 3px;//左上角圆边
}
+ .jumbotron h1, .jumbotron .h1 {
+     text-align: left;//文字左对齐
+     color: #222;  //字体颜色
+     padding: 50px 20px 0;//上50px，左右20px，下0
+ }
+ .jumbotron p {
+     margin: 0;//上下左右margin为0
+     font-size: 26px;//字体大小
+     max-width: 500px;//最大宽度
+     background-color: rgba(250, 250, 250, 0.39);//背景颜色含透明度
+     padding: 20px;//上下左右padding为20px
+     text-align:left;//文字左对齐
+     color: #222;//字体颜色
+     border-bottom-right-radius: 3px;//右下角圆边
+     border-bottom-left-radius: 3px;//左下角圆边
+ }

step 3：替换按钮颜色

到这一步，我们发现按钮的颜色会不会跟别人的太千篇一律了，以迷你教程使用 btn-danger 为例，我们来重新复写这个 class 的颜色。

app/assets/stylesheets/application.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
+ .btn-danger {
+     color: #fff;//字体颜色
+     background-color: #EF6C00;//背景颜色
+     border-color: #EF6C00;//边框颜色
+ }
+ .btn-danger:hover {
+     background-color: #E65100;//鼠标放置在btn上的背景颜色
+     border-color: #E65100;//鼠标放置在btn上的边框颜色
+ }

其他的 btn-default、btn-info、btn-success 等依样画葫芦修改即可。

step 4：修改按钮大小

虽然改了颜色，但按钮大小还是可以再做调整，以 btn-lg 为例。

app/assets/stylesheets/application.scss
1
2
3
4
5
6
7
+ .btn-lg, .btn-group-lg > .btn {
+     padding: 8px 16px;//通过padding来决定btn的大小
+     font-size: 20px;//btn文字大小
+     letter-spacing: 3px;//调整文字间距
+     border-radius: 3px;//btn圆角
+     width: 200px;//这里用指定宽度把btn拉得更长
+ }

说明：默认有 btn-xs、btn-sm、btn-lg 对应不同的按钮尺寸。

最后成果图：

6. 制作登录弹窗

step1 修改 application.js 文件，加入 modal 的 js 效果

app/assets/javascripts/application.js
1
2
+//= require bootstrap/modal
//= require_tree .

step2 修改 navbar 文件，加入弹窗页面代码，将注册/登入链接与弹窗连接起来

app/views/common/_navbar.html.erb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
略...
+<li><a href="#" data-toggle="modal" data-target="#signup-modal">注册</a></li>
+<li><a href="#" data-toggle="modal" data-target="#login-modal">登入</a></li>
-<li><%= link_to("注册", new_user_registration_path) %> </li>
-<li><%= link_to("登入", new_user_session_path) %></li>
略...
<!-- 以下代码添加在最后 -->
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
  <div class="modal-dialog" role="document">
    <div class="loginmodal-container">
       <h2>Log in</h2>
       <%= simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
         <div class="form-inputs">
           <%= f.input :email, required: false, autofocus: true %>
           <%= f.input :password, required: false %>
           <%= f.input :remember_me, as: :boolean if devise_mapping.rememberable? %>
         </div>
         <div class="form-actions">
           <%= f.button :submit, "Log in" %>
         </div>
       <% end %>
    </div>
  </div>
</div>
<div class="modal fade" id="signup-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
  <div class="modal-dialog">
    <div class="loginmodal-container">
      <h2>Sign up</h2>
        <%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
        <%= f.error_notification %>
        <div class="form-inputs">
          <%= f.input :email, required: true, autofocus: true %>
          <%= f.input :password, required: true, hint: ("#{@minimum_password_length} characters minimum" if @minimum_password_length) %>
          <%= f.input :password_confirmation, required: true %>
        </div>
        <div class="form-actions">
            <%= f.button :submit, "Sign up" %>
        </div>
      <% end %>
    </div>
  </div>
</div>

step3 修改 helper 文件，让弹窗能够正常使用

app/helpers/application_helper.rb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
module ApplicationHelper
  def resource_name
    :user
  end
  def resource
      @resource ||= User.new
  end
  def resource_class
      User
  end
  def devise_mapping
      @devise_mapping ||= Devise.mappings[:user]
  end
end

step4 在 application.scss 文件中添加以下 css 代码，设置弹窗样式

app/assets/stylesheets/application.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
@import url(http://fonts.googleapis.com/css?family=Roboto);
/****** LOGIN MODAL ******/
.loginmodal-container {
  padding: 30px;
  max-width: 350px;
  width: 100% !important;
  background-color: #F7F7F7;
  margin: 0 auto;
  border-radius: 2px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  font-family: roboto;
}
.loginmodal-container h1 {
  text-align: center;
  font-size: 1.8em;
  font-family: roboto;
}
.loginmodal-container input[type=submit] {
  width: 100%;
  display: block;
  margin-bottom: 10px;
  position: relative;
}
.loginmodal-container input[type=text], input[type=password] {
  height: 44px;
  font-size: 16px;
  width: 100%;
  margin-bottom: 10px;
  -webkit-appearance: none;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-top: 1px solid #c0c0c0;
  /* border-radius: 2px; */
  padding: 0 8px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.loginmodal-container input[type=text]:hover, input[type=password]:hover {
  border: 1px solid #b9b9b9;
  border-top: 1px solid #a0a0a0;
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.loginmodal {
  text-align: center;
  font-size: 14px;
  font-family: 'Arial', sans-serif;
  font-weight: 700;
  height: 36px;
  padding: 0 8px;
/* border-radius: 3px; */
/* -webkit-user-select: none;
  user-select: none; */
}
.loginmodal-submit {
  /* border: 1px solid #3079ed; */
  border: 0px;
  color: #fff;
  text-shadow: 0 1px rgba(0,0,0,0.1);
  background-color: #4d90fe;
  padding: 17px 0px;
  font-family: roboto;
  font-size: 14px;
  /* background-image: -webkit-gradient(linear, 0 0, 0 100%,   from(#4d90fe), to(#4787ed)); */
}
.loginmodal-submit:hover {
  /* border: 1px solid #2f5bb7; */
  border: 0px;
  text-shadow: 0 1px rgba(0,0,0,0.3);
  background-color: #357ae8;
  /* background-image: -webkit-gradient(linear, 0 0, 0 100%,   from(#4d90fe), to(#357ae8)); */
}
.loginmodal-container a {
  text-decoration: none;
  color: #666;
  font-weight: 400;
  text-align: center;
  display: inline-block;
  opacity: 0.6;
  transition: opacity ease 0.5s;
}
.login-help{
  font-size: 12px;
}

文章目录
  1. 1. 课程目标
  2. 2. 课程复盘
    1. 2.1. 1. 最简单的landingpage，立取可用
      1. 2.1.1. Step 0: 把 welcome/index 设为首页
      2. 2.1.2. Step 1: 在首页加个头图
      3. 2.1.3. Step 2: 在头图下方加入其他信息
    2. 2.2. 2. 管理员后台简单美化
      1. 2.2.1. Step 1:更改按钮样式
      2. 2.2.2. Step 2: 更改表格样式
    3. 2.3. 3. 利用工具来选色
    4. 2.4. 4. 修改导航栏
      1. 2.4.1. Step 0：让导航栏真正的全屏
      2. 2.4.2. Step 1：给导航栏替换不同的颜色
      3. 2.4.3. step 2：去掉导航栏的圆角
      4. 2.4.4. step 3：修改 Logo 字体颜色和对齐样式
      5. 2.4.5. step 4：修改导航栏链接颜色
      6. 2.4.6. step 5：给导航栏 Logo 加图标
        1. 2.4.6.1. 方法一：用 FontAwesome
        2. 2.4.6.2. 方法二：用图片
      7. 2.4.7. step 6：给网站加 Favicon（收藏书签时显示的小图标）
        1. 2.4.7.1. 方法一：用 FontAwesome
        2. 2.4.7.2. 方法二：用图片
    5. 2.5. 5.修改首页大图
      1. 2.5.1. step 0：请使用正版授权的付费或免费图片
      2. 2.5.2. step 1：让大图满屏显示
      3. 2.5.3. step 2：修改文字对齐/背景
      4. 2.5.4. step 3：替换按钮颜色
      5. 2.5.5. step 4：修改按钮大小
    6. 2.6. 6. 制作登录弹窗
      1. 2.6.1. step1 修改 application.js 文件，加入 modal 的 js 效果
      2. 2.6.2. step2 修改 navbar 文件，加入弹窗页面代码，将注册/登入链接与弹窗连接起来
      3. 2.6.3. step3 修改 helper 文件，让弹窗能够正常使用
      4. 2.6.4. step4 在 application.scss 文件中添加以下 css 代码，设置弹窗样式