在rails中使用bootstrap

by 小赓赓。 at over 8 years ago, last updated at over 8 years ago

W

1.在Gemfile中增加 gem 'bootstrap-sass', '~> 3.3.5.1'

2.bundle install

3.把assets/stylesheets/application.css重命名为application.css.scss

4.在这个文件中增加：

  @import "bootstrap-sprockets";
  @import "bootstrap";

5.在assets/javascriptsheets/application.js中增加：//= require bootstrap-sprockets

0 赞

Rails配置和新建第一个rails项目

by 小赓赓。 at over 8 years ago, last updated at over 8 years ago

W

1.更新apt-get：

 sudo apt-get update
 sudo apt-get upgrade

2.安装curl,我们需要用它来装rvm：

 sudo apt-get install curl

3.安装rvm：

 curl -L get.rvm.io | bash -s stable
 source ~/.rvm/scripts/rvm
 rvm -v

4.查看需要安装的包：

 rvm requirements

5.安装第三方包：

 sudo apt-get install build-essential openssl libreadline6 libreadline6-dev curl git-core zlib1g zlib1g-dev libssl-dev libyaml-dev libsqlite3-dev sqlite3 libxml2-dev libxslt-dev autoconf libc6-dev ncurses-dev automake libtool bison subversion

6.安装ruby：用rvm安装ruby：

 rvm install ruby 
 rvm install 2.2.3
 rvm 2.2.3 --default

7.国内可以更改为taobao的Gems源：

gem source -r https://rubygems.org/
gem source -a https://ruby.taobao.org/

8.安装rails：

 gem install rails
 rails -versions

确保安装数据库；

 sqlite3 --version
#若没有安装，使用apt-get install sqlite3 安装

9.创建第一个rails项目： Rails 提供了多个被称为“生成器”的脚本，可以简化开发，生成某项操作需要的所有文件。其中一个是新程序生成器，生成一个 Rails 程序骨架，不用自己一个一个新建文件。

打开终端，进入有写权限的文件夹，执行以下命令生成一个新程序：

 rails new blog
 cd blog

bundle install 其实，还是调用gem，执行前，请检查gem源为淘宝源

 gedit Gemfile #更改为ruby.taobao

bundle这个工具可以帮助我们检查以及安装这个rails应用程序所有依存的套件

 bundle install #每次修改Gemfile中的程序，都需要执行一次

安装js编译器：

gem install execjs
gem install therubyracer
sudo apt-get install nodejs

启动server

 rails server -p 8080

在浏览器中打开http://localhost:8080查看网站

1 赞

http协议get方法和post方法的区别

by zy at over 8 years ago, last updated at over 8 years ago

R

首先要有一个概念，无论是get方法还是post方法都是浏览器向服务器端请求数据的一种方法，无非get方法用来获取数据，而post方法大多用来提交数据，这是一般大家需要遵守的协议。

get和post一般有以下三个方面的不同：

get方法请求的数据会在浏览器有缓存，而post方法是没有的
get方法传递的参数一般在url地址中，post则会把数据封装在body中，参数放置的地方不同
get方法传递的参数有字符串大小的限制，目前最大支持4kb,而post方法传递参数则没有这样的限制

0 赞

html <meta> 标签

by Mafeng at over 8 years ago, last updated at over 8 years ago

G

meta:

meta元素可以提供有关页面的元信息，它是html语言head区的一个辅助性标签，应用有很多:搜索引擎优化（SEO），定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲等。

meta标签的组成：

meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

1.name属性:

meta标签的name属性语法格式:

<meta name="参数" content="具体参数">

name属性常用参数:
(1).keywords: 用来告诉搜索引擎该网页的关键字
(2).description: 用来告诉搜索引擎该网站的主要内容
其他参数：robots，author，generator，COPYRIGHT，revisit-after

2.http-equiv属性:

http-equiv 相当于http的文件头作用，可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值.
meta标签的http-equiv属性语法格式是:

<meta http-equiv="参数" conter="参数变量值">

http-equiv的常用参数:
(1).expires 用于设定网页的到期时间，若是网页过期，必须到服务器上重新传输.
(2).Refresh 自动刷新并指向新页面

<meta http-equiv="Refresh"content="2;URL=http://www.haorooms.com">

ps:注意后面的引号，分别在秒数的前面和网址的后面,其中的2是指停留2秒钟后自动刷新到URL网址.
(3).Set-cookie 如果网页过期，那么存盘的cookie将被删除.

<meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/">

(4). content-Type 设定页面使用的字符集

<meta http-equiv="content-Type" content="text/html;charset=utf-8">

0 赞

Learn 13 简单的div布局

by zy at over 8 years ago, last updated at over 8 years ago

R

一个简单的利用div+css的简单的上中下结构的网页布局

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>上中下板式布局</title>
    <style type="text/css">
        *{
            margin: 0 auto;
        }
        body{
            padding: 0px;
            background: green;
            text-align: center;
        }
        div{
            border: 1px solid yellow;
        }
        #main{
            width: 90%;
            min-width: 900px;
            max-width: 1200px;
        }
        #header{
            height: 100px;
            width:  900px;
            background-color: red;
        }
        #content{
            width: 900px;
            height: 300px;
        }
        #footer{
            width: 900px;
            height: 100px;
            background-color: gray;
        }
        #leftcontent{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            float: left;
            background-color: blue;
        }
        #rightcontent{
            width: auto;
            height: 300px;
            float: center;
            border: 1px solid yellow;
            background-color:  orange;
        }
    </style>
<body>
    <div id="main">
      <p><b>全局层</b></p>
    <div id="header">
          <p><b>标题层</b></p>
    </div>
    <div id="content">
    <div id="leftcontent">左侧栏</div>
    <div id="rightcontent">右侧栏</div>
    </div>
    <div id="footer">
      <p><b>注脚层</b></p>
    </div>
    </div>
</body>
</head>

0 赞

Learn 12 CSS的使用方法

by zy at over 8 years ago, last updated at over 8 years ago

R

根据CSS在HTML中的使用方法和作用范围，CSS的使用方法分为四类

行内样式

直接在html元素中加入style属性，然后把CSS代码直接写入其中。

<!DOCTYPE html>
<html>
  <head>
    <title>山村咏怀</title>
  </head>
  <body style="background-color: #AADD66">
     <h2 style="text-align: center;">山村咏怀</h2>
      <p style="font-size: 25px;line-height: 30px;text-align: center;">
      一去二三里，<br/>
      烟村四五家。<br/>
      亭台六七座，<br/>
      八九十枝花。<br/>   
      </p>
</body>
</html>

内嵌样式

内嵌样式将样式写在页面头部，并且用元素声明。

<!DOCTYPE html>
<html>
  <head>
    <title>山村咏怀</title>
    <style type="text/css">
     p{
        line-height: 30px;
    font-size: 24px;
        text-align: center;
      }
     body{
    background-color: #AADD66;
      }
      h2{
        text-align: center;
      }
    </style>
  </head>
  <body>
     <h2>山村咏怀</h2>
      <p>
      一去二三里，<br/>
      烟村四五家。<br/>
      亭台六七座，<br/>
      八九十枝花。<br/>   
      </p>
</body>
</html>

链接外部样式

基本语法

<!DOCTYPE html>
<html>
  <head>
    <title>山村咏怀</title>
    <link href="1.css" rel="stylesheet"type="text/css">
  </head>
  <body>
     <h2>山村咏怀</h2>
      <p>
      一去二三里，<br/>
      烟村四五家。<br/>
      亭台六七座，<br/>
      八九十枝花。<br/>   
      </p>
</body>
</html>

     p{
        line-height: 30px;
    font-size: 24px;
        text-align: center;
      }
     body{
    background-color: #AADD66；
      }
     h2{
        text-align: center;
      }

导入外部样式

基本语法 @imput url("样式表路径")

<!DOCTYPE html>
<html>
  <head>
    <title>山村咏怀</title>
    <style type="text/css">
     @import url(1.css);
    </style>
  </head>
  <body>
     <h2>山村咏怀</h2>
      <p>
      一去二三里，<br/>
      烟村四五家。<br/>
      亭台六七座，<br/>
      八九十枝花。<br/>   
      </p>
</body>
</html>

     p{
        line-height: 30px;
    font-size: 24px;
        text-align: center;
      }
     body{
    background-color: #AADD66；
      }
     h2{
        text-align: center;
      }

0 赞

HTML&CSS练习

by 卡布卡布 at over 8 years ago, last updated at over 8 years ago

S

Step1: 在网页上放一个div，id为#label

Step2: 设置div的宽度为1200px,高度为336px,背景图片为coke-label.jpg。使背景仅水平平铺

Step3: 此时浏览页面，横向滚动页面，发现背景随滚动而滚动

Step4: 设置背景固定

Step5: 此时浏览页面，发现背景不随页面滚动而滚动

Step6: 将body宽度改为1500px，将label宽度改为与可乐瓶图片等宽194px，使用设置body的padding-left，将label向右推800px

Step7: 此时浏览页面，滚动页面，就是背景始终固定，而小前景视窗移动，产生错位效果

Step8: 在label元素中添加img元素将可乐瓶图片挂到label中，在css中添加样式，设置其宽度和高度与可乐瓶图片一样

Step9: 再次浏览，转动效果出来了。

Step10: 发现可乐瓶底部，有约16px的背景空白，我们将label的背景向下移动16px,弥补空白区域

<!DOCTYPE html>
<html> 
<head>
    <meta charset="UTF-8" />
    <title>Pure CSS Coke Can</title>
    <link rel="Stylesheet" href="index.css"/>
</head>
<body>  
  <div id="label">
    <img src="coke-can.png"/>
  </div>
</body>
</html>

CSS代码

#label{
  height: 336px;
  width: 194px;
  background-image: url("coke-label.jpg");
  background-repeat: repeat-x;
  background-attachment:fixed;
  background-position: 0 16px;
}
body{
  width: 1500px;
  padding-left: 800px
}

将两个不一样颜色的div水平并排。

<!DOCTYPE html>
<html>
<head>
  <title>111</title>
  <link rel="Stylesheet" href="html111.css"/>
</head>

<body>
  <div id="one">
  </div>
  <div id="two">
  </div>>
</body>
</html>

CSS文件


#one{
  height: 100px;
  width: 100px;
  background-color: red;
  float:left
}
#two{
  height: 100px;
  width: 100px;
  background-color: blue;
  float:left
}

0 赞

html&css

by Mafeng at over 8 years ago, last updated at over 8 years ago

G

关于html和css，就想找一下实例去练习。

简单的导航栏：

<!DOCTYPE html>
<html>
<head>
  <title>The navigation bar</title>
  <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
  <div class="nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Other</a></li>
      <li><a href="#">Connect</a></li>
      <li><a href="#">Back</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </div>
</body>
</html>

.nav ul {
    width: 980px;
    border: 1px solid #000;
    margin: 0px auto 0px auto;
}
.nav ul li {
    float: left;
    list-style-type: none; 
}
.nav ul li a {
    width: 80px;
    height: 28px;
    line-height: 28px;
    background: blue;
    margin: 5px 10px;
    font-size: 12px;
    display: block;
    text-align: center;
    text-decoration: none;
}
.nav ul li a:hover {
    width: 78px;
    height: 26px;
    line-height: 28px;
    border: 1px solid yellow;
    color: blue;
    background: #FFF;
}

当鼠标移动的时候会变色

0 赞

Learn 11

by zy at over 8 years ago, last updated at over 8 years ago

R

今天开始接触了前端的入门级介绍，主要就是Html5和CSS3的大概了解。这也意味着Ruby 的学习截止到目前为止告了一个段落。虽然课程告告了一个段落，但是感觉要学的东西还有很多，只能在以後的学习中慢慢加深理解了，语言作为一种工具，能熟练运用才是最重要的。继续加油~

0 赞

each/collect/map/inject的一些异同

by 小赓赓。 at over 8 years ago, last updated at over 8 years ago

W

先看一下如下代码：

a = [1,2,3]

a1 = a.each{ |x| puts x}#=>1 2 3
puts a1#=>1 2 3
puts a#=>1 2 3

a2 = a.collect{ |x| [x,x*2]}
puts a2#=>1 2 2 4 3 6
puts a#=>1 2 3


a3 = a.map{ |x| x*3}
puts a3#=>3 6 9
puts a#=>1 2 3

a4 = a.inject{ |sum,item| sum+item}
puts a4#=>6

a5 = a.map!{ |x| x*3}
puts a5#=>3 6 9
puts a#=>3 6 9

each---连续访问数组或String中的所有元素。而且each返回原数组，遍历内对元素的更改不会保存：如上a1#=>1 2 3 a#=>1 2 3

collect---从数组或String中传递各个元素到block中，block返回的结果生成新的数组或String;而且返回更改后的数组，遍历后的数组对元素的更改不会改变：如puts a2#=>1 2 2 4 3 6 puts a#=>1 2 3

map---与collect相同

map!---与collect相同，但是map！返回更改的数组，而且遍历后的数组对元素的更改也会改变：如puts a5#=>3 6 9 puts a#=>3 6 9

inject---遍历数组或String中的各个元素，把各个元素积累返回一个值

1 赞

博客

get和post一般有以下三个方面的不同：

meta:

meta标签的组成：

1.name属性:

2.http-equiv属性:

根据CSS在HTML中的使用方法和作用范围，CSS的使用方法分为四类

行内样式

内嵌样式

链接外部样式

导入外部样式

each---连续访问数组或String中的所有元素。而且each返回原数组，遍历内对元素的更改不会保存：如上a1#=>1 2 3 a#=>1 2 3

collect---从数组或String中传递各个元素到block中，block返回的结果生成新的数组或String;而且返回更改后的数组，遍历后的数组对元素的更改不会改变：如puts a2#=>1 2 2 4 3 6 puts a#=>1 2 3

map---与collect相同

map!---与collect相同，但是map！返回更改的数组，而且遍历后的数组对元素的更改也会改变：如puts a5#=>3 6 9 puts a#=>3 6 9

inject---遍历数组或String中的各个元素，把各个元素积累返回一个值