Electronic Joint Business

Solution for E-Business

mixin

初识 Sinatra (四)

文章评价:

这是本系列文章的最后一部分。本教程的目标是带领从未用过 Sinatra 的用户从头开始创建一个应用,并将之最后发布。

到前三部分结束时,我们已经完成了 To Do List 应用的大部分功能。在本系列的最后一部分,我们将先看看如何用 Sass 来编写 CSS ,之后将本应用发布到 Heroku 云服务上。

Logo
每个上点档次的应用都应有一个 logo,所以我创建了一个简单的“tick” logo,你可以在 Github 上找到。我们用它来作为本应用的头条的背景图片。打开 Styles.css 并添加下列 CSS:

h1.logo{
  font-family: helvetica,arial,sans-serif;
  font-size: 24px;
  color: white;
  padding: 64px 0 0;
  margin: 0 auto;
  text-transform: uppercase;
  text-align: center;
  font-weight: normal;
  letter-spacing: 0.3em;
  background: transparent url(/logo.png) 50% 0 no-repeat;
  }

(注意 – 也许你还发现,你需要为 layout.slim 的 h1 元素添加一个 ‘logo’ 类,这段 CSS 才会起作用。)

>>> 阅读全文

 

, , , , , , , ,