【笔记】layoutit尝试——失败品

Published on:

一、模板制作

layouit官网,一个可视化布局系统。

layoutit中文网

要模仿的网站:Nextoffer,用Nic师兄的直播教程成品做测试。

1、步骤:制作——预览——下载zip(附视频教程

二、替换HTML

1、解压并打开下载的html文件(html、css、js用atom或xcode打开)

2、完全替换原来的HTML

路径:app/views/welcome/index.html.erb,把原代码清空,粘贴刚刚复制的代码。保存刷新如下图:

3、加入CSS代码

①用xcode打开文件

②先加入bootstrap.theme.min.css,到app/assets/stylesheets/application.scss

③再加入bootstrap.min.css,到app/assets/stylesheets/application.scss

4、加入js代码

①用xcode打开文件

②加入bootstrap.min.js,到app/assets/javascripts/application.js

③加入jquery.min.js,到app/assets/javascripts/application.js

三、小结

综上,发现改动css和js变化非常小,因此暂时放弃这两部分的代码。

四、替换文字

效果如下:

五、替换图片

遇到问题:1、svg矢量图如何用?2、图片的位置通过什么代码来调整?

Comments

comments powered by Disqus