rails 静态网页

阅读更多

在 做程序的时候边做别学习了 rails ，这个框架想得好用 但是对于新手 在学习的时候还需要注意许多问题。使用的是rubymine7.1工具。

这里整理的是在 好多视频网 上学习的，作者是peter，都说最好的崇拜就是模仿了，现在新手的我们可以在模仿中学习 rails 是用来做 web 应用的，功能多，使用的技术手段也多。在真正着手学习 rails 之前，建议你可以多多动手做一些静态网页，也就是多写写三种代码 html css 和 javascript ，然后再来接触 rails 程序，会发现其中一部分知识你已经清楚了，就不会因为一下子暴露在太多知识点之下而感到恐怖了。

首先写下标准的h5网页，命名为index.html

 

 

 来到 head 之中，添加对 css/common.css 的引用

 

 再来创建 css/common.css 文件

 

 

body {
  font-family: sans-serif;
  margin: 0;
  font-size: 14px;
  color: #666;
}

.container {
  width: 1170px;
  margin: 0 auto;
}

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

 在 index.html 中添加页首导航栏

 

 

  

    
      Meetup
    
    

      
About
      
placeholder
    
    

      
login
      
signup
    
  

再到 index.css 之中，添加相应的样式：

 

 

.navbar {
  background: #222;
  position: relative;
  z-index: 1000;
}
.navbar a {
  color: #fff;
}
.navbar a:hover {
  color: #c0865e;
}
.navbar-brand {
  float: left;
  padding-left: 0;
  line-height: 80px;
  font-size: 40px;
}
.nav.left {
  float: left;
  margin-left: 40px;
  font-size: 15px;
}
.nav.right {
  float: right;
}
.nav  li {
  float: left;
}
.nav  li  a {
  display: block;
  font-size: 1.1em;
  line-height: 40px;
  padding: 5px 10px;
  margin: 15px 10px;
}
.nav  li  a:hover {
  color: #000;
  background: #fff;
}

  到页面中发现美中不足的是链接是有下划线的，为了修正这个问题，到 common.css 之中，添加

 

 

a {
  text-decoration: none;
  color: #c0865e;
}
a:hover {
  color: #845534;
}

 这样 header 部分就有了，现在如法炮制，来添加 footer 。index.html 中添加

 

 

  

    footer
  

再来到 index.css

 

.footer {
  border-top: 1px solid #c5c5c5;
  min-height: 200px;
  margin: 3em 0;
  padding-top: 3em;
  padding-bottom: 3em;
  background: #f8f5f0;
}

  header 和 footer，页面的头和脚都有了，这样子就看起来像一个网页了呢，虽然基本都是跟着peter在做，但是实际自己动手的时候还是会遇到一些视频中没有出现的问题，没关系，自己慢慢尝试着的解决，也是一种乐趣哦。