`
任清宇
  • 浏览: 21571 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

rails 静态网页 续

    博客分类:
  • ruby
 
阅读更多

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

<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中添加

 

<link rel="stylesheet" href="css/common.css"> + <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>+ <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>+ <script src="js/jquery.anystretch.min.js"></script> </head>

在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 的视频教学,对于新手而言是非常的不错,简单易懂,循序渐进。

 

 

 

分享到:
评论

相关推荐

    Rails101_by_rails4.0

    Rails(Ruby on Rails)是一个采用Ruby语言编写的开源Web应用框架,它遵循模型-视图-控制器(MVC)的架构模式,设计用来快速开发数据库驱动的动态网页。随着Rails版本的更新迭代,此书聚焦于一个特定的版本,帮助...

    rails指南 中文版

    8. **Asset Pipeline**:Rails的资产管道处理JavaScript、CSS和图像等静态资源,可以进行压缩、合并、版本控制,提升页面加载速度。 9. **ActiveJob**:Rails的后台任务处理框架,可以配合各种队列服务(如Resque、...

    Rails项目源代码

    Ruby on Rails,通常简称为Rails,是一个基于Ruby编程语言的开源Web应用框架,遵循MVC(Model-View-Controller)架构模式。这个“Rails项目源代码”是一个使用Rails构建的图片分享网站的完整源代码,它揭示了如何...

    Ruby-HighVoltage容易在Rails应用程序中包含静态页面

    High Voltage 是一个Ruby on Rails的gem,它使得在Rails应用中管理和展示静态页面变得极其简单。这个库主要针对那些需要在Rails环境中创建和维护非数据库驱动的静态内容的开发者。High Voltage提供了一个优雅的方式...

    rails 项目起步示例

    Rails是Ruby语言的一个著名Web开发框架,全称为Ruby on Rails,它遵循MVC(Model-View-Controller)架构模式,旨在提高开发效率和代码可读性。本示例"rails项目起步示例"是一个购物系统,非常适合初学者入门学习。 ...

    关于rails 3.1 cucumber-rails 1.2.0

    Rails 3.1 和 Cucumber-Rails 1.2.0 是两个在Web开发领域非常重要的工具,尤其对于Ruby on Rails框架的测试和自动化流程。本文将深入探讨这两个组件,以及它们如何协同工作来增强软件开发的效率和质量。 首先,...

    rails4.0.0

    Rails 4中的Asset Pipeline进行了优化,提升了静态资源如CSS、JavaScript的处理速度。这个功能允许开发者合并、压缩和版本化静态资源,以减少HTTP请求并提高页面加载速度。 6. **Strong Parameters** 为了解决...

    Rails

    标题 "Rails" 指的是 Ruby on Rails,一个开源的Web应用程序框架,它基于Ruby编程语言,遵循MVC(模型-视图-控制器)架构模式。Rails由David Heinemeier Hansson在2004年创建,其设计理念是强调代码的简洁性、DRY...

    rails2-sample

    从给定的文件信息来看,我们正在探讨的是一本关于Ruby on Rails的书籍,书名为《Simply Rails2》,作者是Patrick Lenz。本书旨在为初学者提供深入理解Ruby on Rails框架的指南,从基础概念到高级主题均有涵盖,是...

    Rails进行敏捷Web开发(所有版本的源码rails3.0-4.0)

    2. Rails 3.1: 这个版本引入了Asset Pipeline,它管理应用程序的CSS、JavaScript和其他静态资源,提高了加载速度并支持压缩和合并。另外,它还引入了CoffeeScript和Sass作为默认的JavaScript和CSS预处理器,提升了...

    Rails 3 in Action

    - **Asset Pipeline**:Rails 3.1引入了Asset Pipeline,将CSS、JavaScript、图片等静态资源管理整合到一个统一的流程中,提高了页面加载速度。 - **CoffeeScript**:默认使用CoffeeScript作为JavaScript的预...

    使用Aptana+Rails开发Rails Web应用(中文)

    在开发Web应用时,Ruby on Rails(简称Rails)框架因其高效、简洁的代码风格和强大的社区支持而备受青睐。Aptana是一款强大的集成开发环境(IDE),尤其适用于Rails项目的开发,它提供了丰富的特性来提升开发效率。...

    Ruby on Rails安装指南(Ruby 1.8.6+Rails 2.0.2)

    Ruby on Rails 安装指南 Ruby on Rails 安装指南是指安装 Ruby 1.8.6 和 Rails 2.0.2 的详细步骤。首先,需要下载 Ruby One-Click Installer 版本,并安装 Ruby。然后,下载 Rails 2.0.2 版本,并安装。接下来,...

    rails 2.3.2离线安装rails 2.3.2离线安装

    rails 2.3.2离线安装rails 2.3.2离线安装rails 2.3.2离线安装rails 2.3.2离线安装rails 2.3.2离线安装rails 2.3.2离线安装rails 2.3.2离线安装rails 2.3.2离线安装rails 2.3.2离线安装rails 2.3.2离线安装rails ...

    rails向导打包

    6. **Asset Pipeline**: Rails 的 Asset Pipeline 提供了一种管理应用程序静态资源(如 CSS、JavaScript 和图片)的方式。它会讨论预处理(如 SASS 和 CoffeeScript)、组合和压缩资产,以及如何配置 pipeline。 7....

    Rails recipes

    Rails Recipes是一本针对Ruby on Rails框架的实用书籍,它收集了一系列高效解决问题的技巧和方法,也被称为“Rails开发者的宝典”。作者们通过分享自己的经验和见解,为Rails程序员提供了一本既有实际操作指导又有...

    rails2.3.2

    标题 "rails2.3.2" 指的是 Ruby on Rails 框架的一个特定版本,即 2.3.2。Ruby on Rails(通常简称为 Rails)是一个基于 Ruby 语言的开源 Web 应用程序框架,它遵循 Model-View-Controller (MVC) 设计模式,用于构建...

    配置高可用的rails

    优化rails应用的响应时间可以从数据库查询优化、视图渲染优化、静态资源服务优化等多方面着手。 - Web框架基准测试:了解不同Web框架的性能基准,可以帮助我们选择合适的工具和优化手段。基准测试能够提供不同框架...

Global site tag (gtag.js) - Google Analytics