rails 静态网页续

lihaoningxia

2015-05-18

上一篇的网页虽然体现了基本的功能但是它还不能算是一个网页，下面我们继续来做，看视频学习虽然好但是特点就是有的东西当时记住了但是过一段时间会忘记，在这里记下笔记以便于以后的使用把。下面就在网页的主页中添加一个图片：

<body>

+ <img src="images/home-banner-bg.jpg" alt="home-banner"> </body>

但是呢这样子页面在缩进以后会变得很难看，下面解决这个问题

创建一个插件库专门的放置这些我们用到的插件public/js/目录

wget https://raw.githubusercontent.com/danmillar/jquery-anystretch/master/jquery.anystretch.min.js

在index中添加

在body上方添加

<script>
  $('.home-banner').anystretch();
</script>

然后index.css中设置以下div的高度

.home-banner {
  height: 600px;
}

这样大的背景图就设置好了

拷贝index.html的文件过来然后body部分修改一下

<h1>about</h1>

<body> 标签，改为 <body class="index"> 这样让这个 header 变成透明色。

.index .navbar {
  background: transparent;
}

而 about 页面的 navbar 依然是黑的。

好了这样子一个静态页面基本算是初步的完成了，样式可以留下自己研究修改颜色以及宽度边框等，看自己的喜好了，以后还会记录自己在ralis 的路上所遇到的问题，和好的解决方案，记录自己的点滴，再次感谢peter 的视频教学，对于新手而言是非常的不错，简单易懂，循序渐进。