rails 静态网页

任清宇

浏览: 21640 次
性别:
来自: 北京

最近访客更多访客>>

Haaient

scholltop

jhon_brucey

Baby真卑鄙

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ruby

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

</body>
</html>

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

<link rel="stylesheet" href="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 中添加页首导航栏

<div class="navbar clearfix">
  <div class="container">
    <a class="navbar-brand" href="/">
      Meetup
    </a>
    <ul class="nav left">
      <li><a href="/#about">About</a></li>
      <li><a href="#">placeholder</a></li>
    </ul>
    <ul class="nav right">
      <li><a href="#">login</a></li>
      <li><a href="#">signup</a></li>
    </ul>
  </div>
</div>

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

<div class="footer">
  <div class="container">
    footer
  </div>
</div>

再来到 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在做，但是实际自己动手的时候还是会遇到一些视频中没有出现的问题，没关系，自己慢慢尝试着的解决，也是一种乐趣哦。

分享到：

rails 静态网页续 | rails2

2015-05-18 22:39
浏览 595
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论