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

本文的原文连接是: 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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
非常抱歉,作为一个AI语言模型,我无法为您编写完整的网页,但我可以给您提供一些参考和建议,帮助您完成期末作业。 1.选择一个主题 您需要选择一个健康、积极向上的主题,例如健康生活、科技创新、环保节能等。 2.设计网页布局 在设计网页布局时,可以采用“三分之一原则”,即将网页分为三个部分,头部、主体和尾部。头部可以包含网页的标题、导航菜单和搜索框等;主体可以包含网页的主要内容,例如文章、图片和视频等;尾部可以包含版权信息、联系方式和友情链接等。 3.美化网页样式 使用CSS对网页进行美化,可以增加网页的可读性和用户体验。您可以选择一些现成的CSS框架,例如Bootstrap和Materialize等,也可以自己编写CSS样式。 4.实现网页动态效果和交互效果 在实现网页动态效果和交互效果时,可以使用JavaScript编写代码。例如,您可以使用JavaScript实现图片轮播、折叠菜单、图片放大镜、表单验证等效果。 以下是一个简单的网页设计示例,供您参考: ``` <!DOCTYPE html> <html> <head> <title>健康生活</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdn.staticfile.org/materialize/1.0.0/css/materialize.min.css"> <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/materialize/1.0.0/js/materialize.min.js"></script> <style> body { background-color: #f2f2f2; } .header { background-color: #ffffff; padding: 10px; box-shadow: 0 2px 2px rgba(0,0,0,0.1); } .navbar { margin-bottom: 0; } .main { background-color: #ffffff; margin-top: 20px; padding: 20px; box-shadow: 0 2px 2px rgba(0,0,0,0.1); } .footer { background-color: #ffffff; padding: 10px; box-shadow: 0 2px 2px rgba(0,0,0,0.1); } </style> </head> <body> <div class="header"> <nav class="navbar"> <div class="nav-wrapper"> <a href="#" class="brand-logo">健康生活</a> <ul id="nav-mobile" class="right hide-on-med-and-down"> <li><a href="#">首页</a></li> <li><a href="#">健康饮食</a></li> <li><a href="#">健身运动</a></li> <li><a href="#">心理健康</a></li> <li><a href="#">联系我们</a></li> </ul> </div> </nav> </div> <div class="main"> <div class="row"> <div class="col s12 m6"> <div class="card"> <div class="card-image"> <img src="https://cdn.staticfile.org/materialize/1.0.0/img/sample-1.jpg"> <span class="card-title">健康饮食</span> </div> <div class="card-content"> <p>均衡饮食是健康生活的基础,要注意膳食结构的合理搭配,尽量少吃油腻、高热量的食物。</p> </div> </div> </div> <div class="col s12 m6"> <div class="card"> <div class="card-image"> <img src="https://cdn.staticfile.org/materialize/1.0.0/img/sample-1.jpg"> <span class="card-title">健身运动</span> </div> <div class="card-content"> <p>适量的运动可以提高身体免疫力,增强体质,减轻压力,保持健康的心态。</p> </div> </div> </div> </div> <h4>心理健康</h4> <p>保持良好的心理状态也是健康生活的重要组成部分,我们可以通过多种方式来调节情绪,例如听音乐、读书、旅行等。</p> <a href="#" class="waves-effect waves-light btn">了解更多</a> </div> <div class="footer"> <p>版权所有 © 2021 健康生活</p> </div> </body> </html> ``` 以上是一个简单的网页设计示例,包含了网页布局、CSS样式和JavaScript代码,供您参考。希望能对您有所帮助,祝您期末作业顺利完成!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值