在 做程序的时候边做别学习了 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在做,但是实际自己动手的时候还是会遇到一些视频中没有出现的问题,没关系,自己慢慢尝试着的解决,也是一种乐趣哦。
相关推荐
Stout 是一个可靠的静态网站部署工具。用它将网站上传到 S3 比用其它工具更加可靠。它可以替代支付服务如 Divshot ,动态 web 服务器 Rails,或者手动上传您的网站到S3 或 FTP服务器。Features版本脚本和样式文件,...
脱轨器Derailer 是 Rails 应用程序的静态分析工具。 它生成一个图表,显示您的应用程序允许数据从数据库流到用户看到的呈现网页的条件。 此图的目标是帮助用户发现可能代表安全漏洞的意外数据流。安装将这些行添加到...
开始静态文件的实时编译 cd front npm install node_modules/.bin/gulp watch 并在其他控制台中启动Rails服务器: cd ../back bundle install rails s open http://localhost:3000 这些伟大的技术恭候您的光临: ...
该项目是通过引导的。 您将在下面找到一些有关如何执行...Ruby on Rails 在开发中代理API请求 配置代理后出现“无效的主机头”错误 手动配置代理 配置WebSocket代理 在开发中使用HTTPS 在服务器上生成动态<met
分叉或克隆此存储库运行> npm install 运行> npm运行构建浏览器中的opne ./dist/index.html特征静态生成的网页屏幕截图家 接触 菜单建于用Ruby on Rails构建的项目CSS3 ES6 使用的其他软件包引导程序v4.0接触...
前端技术: HTML:用于定义网页结构的标记语言。 CSS :用于设计网页外观和样式的样式表语言。 JavaScript:用于在网页上实现交互性和...Ruby on Rails:一个基于Ruby编程语言的Web应用框架,提供了高效的开发工具。
该存储库包含位于的站点的静态网页。 要更新此网站的内容,请使用GitHub Wiki: 要更改布局和设计,请在railsapps.github.io.wiki存储库中编辑_Layout.html文件以及CSS和Javascript。 然后,使用位于gem从Wiki...
它可以按原样用于静态Web项目,也可以将CSS文件夹复制到现有框架(例如Rails)中。产品特点使用SCSS局部函数帮助构建CSS。 响应式的12列网格系统可在所有设备上工作。 对图标使用Font Awesome图标字体。 使用规范化...
NOKWOK Labs网站的登录... 该站点完全是静态的,不需要外部工具(例如Node.js的Express.js或Ruby on Rails)即可运行,尽管它可以与上述软件一起使用。 该网站完全由Figma设计,然后手工使用导出CSS和HTML重新创建。
埃奇尔斯德巴奇里拉托中心网页此存储库将在以后增长,因为CEB需要一个更具迭代性的应用程序,目前它仅包含静态页面Ruby版本:2.7.2 Rails版本:6.1.3 系统依赖关系:Postgresql,Pry 配置数据库创建:$ rails db:...