发现一个有意思的bbs网站,发现一个Waves开源项目

简介: 本文的原文连接是: http://blog.csdn.net/freewebsys/article/details/51619608 未经博主允许不得转载。 博主地址是:http://blog.csdn.net/freewebsys1,页面样式和google风格的样式,并且在页面加载完成之后还会有顶部的颜色条变换,非常好看。 下拉菜单也很好看。 ht

本文的原文连接是: http://blog.csdn.net/freewebsys/article/details/51619608 未经博主允许不得转载。
博主地址是:http://blog.csdn.net/freewebsys

1,页面样式


和google风格的样式,并且在页面加载完成之后还会有顶部的颜色条变换,非常好看。
下拉菜单也很好看。
https://bbs.gitlab.cc/

上面有过开关,能够把菜单固定住

2,查看了下css


从里面刨出来两个项目。
一个叫waves不知道和google的wave啥关系。
https://github.com/fians/Waves
是个nodejs 写的项目,加星还挺高的。但是没有环境。也没试验下。

另外一个项目是各种特效:
https://github.com/daneden/animate.css
项目的演示在:
http://daneden.github.io/animate.css/


各种特效都在里面,可以通过下拉框选择。
挺好玩大,还有按照x,y,z轴旋转的。

还有一个项目:
https://github.com/h5bp/html5-boilerplate
不知道是啥项目

之前发现的一个框架:
https://github.com/driftyco/ionic
项目还有demo演示:
http://codepen.io/ionic/public-list
里面有好多有意思的项目呢
http://codepen.io/Mamboleoo/pen/JKYXGr

这个玩意居然会动呢。还挺漂亮的。

3,安装测试下


yum -y install gem npm
gem install sass
npm install situs -g
cd /data
git clone https://github.com/fians/Waves.git
npm install
npm install -g grunt-cli
grunt build
ERROR:  Could not find a valid gem 'sass' (>= 0), here is why:
          Unable to download data from https://rubygems.org/ - Errno::ECONNRESET: Connection reset by peer - SSL_connect (https://rubygems.org/latest_specs.4.8.gz)

这个好奇怪啊,为啥子不能下载呢。明明网页可以访问呢。
原来被封了。好吧。

安装nodejs
上官网下载tar.gz 安装。
https://nodejs.org/
https://nodejs.org/en/download/current/
偷懒的办法了,直接使用fredora的原吧。

wget http://dl.fedoraproject.org/pub/epel/7/x86_64/e/epel-release-7-6.noarch.rpm
rpm -ivh epel-release-7-6.noarch.rpm
#同时还能安装sass,不用使用gem安装了,解决问题了。
yum install -y rubygem-sass

然后是吓人的一大坨东西安装。堪比java的jar包了。
这里写图片描述
但是每一个文件都比较小。
再执行:

npm install situs -g
cd Waves
npm install
npm install -g grunt-cli
grunt build

最后执行 situs server 启动服务器:端口 4000
收获:重要跑起来了,非常不错的效果:

还有漂亮的按钮:非常靓丽。

同时支持多种浏览器。

貌似和bootstarp类似的项目吧。

4,总结


技术的学习真的是永无止境啊。
遇到点啥东西都想研究下,好奇人家是怎么做的,看看能够学到点啥。
然后写写技术博客分享给大家。一起学习一起进步。

本文的原文连接是: http://blog.csdn.net/freewebsys/article/details/51619608 未经博主允许不得转载。
博主地址是:http://blog.csdn.net/freewebsys

目录
相关文章
|
3月前
|
域名解析 JavaScript 前端开发
用织梦实现一个从零到可以正常访问的网站--第一章
用织梦实现一个从零到可以正常访问的网站--第一章
24 0
|
7月前
|
安全 数据库连接 PHP
中文版Pikachu web靶机平台搭建指南,英语小白的福音
中文版Pikachu web靶机平台搭建指南,英语小白的福音
325 0
|
程序员
程序员之路:为github项目建立网页
程序员之路:为github项目建立网页
214 0
|
前端开发 搜索推荐 数据库
开发人员,怎能没有个人博客!前人所创经典Typecho!
开发人员,怎能没有个人博客!前人所创经典Typecho!
200 0
开发人员,怎能没有个人博客!前人所创经典Typecho!
|
Java 开发工具
JavaWeb学习之路(3)--网站与网页
本文目录 1. 什么是网站 2. 什么是网页 3. 网页是怎么开发的 4. 小结
100 0
|
Web App开发 缓存 前端开发
Yahoo网站性能优化指南之内容篇
Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践。他们为此进行了一系列的实验、开发了各种工具、写了大量的文章和博客并在各种会议上参与探讨。最佳实践的核心就是旨在提高网站性能。
162 0
Yahoo网站性能优化指南之内容篇
|
设计模式 缓存 负载均衡
推荐一份Web 工程师的前端书单
推荐一份Web 工程师的前端书单
推荐一份Web 工程师的前端书单
|
数据采集 Python Web App开发
带你读《Python网络爬虫从入门到实践(第2版)》之三:静态网页抓取
使用Python编写网络爬虫程序获取互联网上的大数据是当前的热门专题。本书基础部分(第1~7章)主要介绍爬虫的三个步骤——获取网页、解析网页和存储数据,并通过诸多示例的讲解,让读者能够从基础内容开始系统性地学习爬虫技术,并在实践中提升Python爬虫水平。进阶部分(第8~13章)包括多线程的并发和并行爬虫、分布式爬虫、更换IP等,帮助读者进一步提升爬虫水平。项目实践部分(第14~17章)使用本书介绍的爬虫技术对几个真实的网站进行抓取,让读者能在读完本书后根据自己的需求写出爬虫程序。
|
SEO
业余草(www.xttblog.com)告诉你如何让网站网址实现百度秒收录
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xmt1139057136/article/details/82735751 一个网站要想关键词有排名,必须先收录!同样的一篇文章,收录快的网站,排名一般好于收录慢的网站(也有特别特殊情况)。
1446 0