自从学会了愤怒,就再也写不出好文章了。

web前端设计之痛:手机浏览器和pc浏览器的width:100%的自适应问题

Tips: 调试 iPad 或 iPhone 可在设置中启动调试模式,在 Mac 中的 Safari 阅读器 一样开启开发者模式后,进行联机调试。功能彪悍。 

最近在做1个页面时,发现在 iPad 的 Safari 阅读器中背景显示不全,定位到该 div 后发现所指定 css 的宽度为 100% ; 到百度搜索后发现,safari 中 viewport 默许宽度为 980px,若事前未指定其初始 viewport 宽度,则会默许依照 980px 处理。 可以默许初始化 viewport 宽度或在 css 中设定 min-width,但最简单的方法可以在 head 标签中初始化好 viewport。 

详见下方代码: 假定网页宽度为 960px 或 1080px,可在width中加入该值,并将 initial-scale 设置1个合适的倍数值。 

More »

五度圈

五度圈(一)

五度圈几乎是每一本教乐理的书里都会提到的图表。你背过,你也忘记过;你又再度背过,可是你终究还是忘了它!Why?因为你觉得它并不重要?因为你不了解它的涵义?因为你就是记不住?因为背过以后就是没使用过?No!答案是因为它不用背,所以你背不住,酷吧?.究竟五度圈这个图表到底有什么意义?为什么非学它不可呢?

现在就让我们实际来推演一次:
C的五度音是?…………………………………………………………………G
G的五度音是?…………………………………………………………………D
D的五度音是?…………………………………………………………………A
A的五度音是?…………………………………………………………………E
E的五度音是?…………………………………………………………………B
B的五度音是?…………………………………………………………………F#
F#(Gb)的五度音是?…………………………………………………………C#
C#(Db)的五度音是?…………………………………………………………G#
G#(Ab)的五度音是?…………………………………………………………D#
D#(Eb)的五度音是?…………………………………………………………A#
A#(Bb)的五度音是?…………………………………………………………F
F的五度音是?…………………………………………………………………C

恭喜您已经跨出了认识五度圈的第一步!

More »

极简js和css3往上滚动智能隐藏和显示的顶部导航菜单

演示请看本站导航,不支持IE678。

HTML(header-navigation是用来指定导航样式的,id=header是用来驱动js的,这里id要和下面js里的document.getElementById相同)

<header class="header-navigation" id="header">
 这是导航
</header>
CSS

.header-navigation {
	  position: fixed;
	  top: 0;
	  width: 100%;
	  height: 60px;
	  line-height: 60px;
	  background-color: #333;
	  text-align: center;
	  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	  z-index: 9999;
	}

/* Slide transitions */
	.slideUp {
	 /* -webkit-transform: translateY(-100px);
	  transform: translateY(-100px);*/
	  -webkit-transform: translateY(-100px);
	  -ms-transform: translateY(-100px);
	  -o-transform: translateY(-100px);
	  transform: translateY(-100px);
	  /*transition: transform .5s ease-out;*/
	  -webkit-transition: transform .5s ease-out;
	  -o-transition: transform .5s ease-out;
	  transition: transform .5s ease-out;
	}

	.slideDown {
	  /*-webkit-transform: translateY(0);
	  transform: translateY(0);*/
	  -webkit-transform: translateY(0);
	  -ms-transform: translateY(0);
	  -o-transform: translateY(0);
	  transform: translateY(0);
	  /*transition: transform .5s ease-out;*/
	  -webkit-transition: transform .5s ease-out;
	  -o-transition: transform .5s ease-out;
	  transition: transform .5s ease-out;
	}

More »

实在不知道写点什么

实在不知道写点什么,但又想更新下博文

本想把骑中国的众筹方案完善完发布出来,眼看着出发在即,最近显示策划了南沙露营音乐节,也许是天气太冷的原因,没太多人感兴趣,还不知道到时候什么情况,要么就亏。。。只希望别亏太多,也别因为现场观众太少而难堪。然后又和黄埔马拉松谈了合作,确定24号在赛道边上设立三个音乐加油站,搭建背景板音响设备,三支乐队,很少有人这么玩,尝个鲜,也希望这种形式能得到青睐!

More »

忽然有一种想离开的感觉,至少也是远走高飞,不问红尘

最近状态时好时坏,最主要是因为梦想和现实之间的冲撞吧,以及对这个“这个世界还会好吗”的绝望。从两三个月前一直在跟《中国通史》,央视纪录片100集,目前看到第六十七集,一集不拉,虽然某些能看懂,某些还是无法看懂,最近讲南宋的时候讲到欧阳修,王安石等时,旁白读着他们的诗词,我竟哭得一塌糊涂,优美的古文字,忠烈的腔调,为之感动,为古人的“一片忠心”而感动,以至于一直觉得简体字以及现代语法,破坏了韵味,也变得俗不可耐。比如我们挺的音乐,用中文表达,似乎就变成网络歌曲,用英文表达,马上感觉高雅很多,再看看粤语的表达方式,同样美丽,这不是崇洋媚外,为什么说法语是最适合谈恋爱的语言,也就是这个道理,简体中文当更多人的学会了认字,但也同样,让知识变得慵俗。

More »

博客真好

晚上去跑步了,没跑到十公里,脚疼,想想还是不坚持了,走两步也无所谓,因为前天刚跑了半程马拉松,昨天本来想去跑两步,结果还是说今天再跑吧,腿部会有些酸疼,所以还是动一下。

刚看到一个博客,更新的好频繁,有时候只有一小段话,比如今天下班骑共享单车回家,路上一个骑电动车的妈妈载着小女孩超越了我,小女孩在后面喊加油,加油加油,我看看小女孩,小女孩妈妈看看我,都笑了~挺短,但觉得挺好,也许这就是博客存在的意义,没有必要像我一样每次更新都是一篇文章,这样会导致提起写博文就头大的感觉,就好像一个小孩子做错事总是会受到惩罚,于是乎第一反应便是压力。

这两天在整理骑中国的众筹文章,挺难的,还不知道这个版本行不行,希望这个星期能修改好提交给编辑,看看结果。

想到出行的一系列问题还是挺头大的,但也没所谓,毕竟是无论结果如何都会去做的一件事。

各种平台下配置SSL自动跳转到HTTPS

Apache自动跳转到 HTTPS


网站根目录新建 .htaccess
RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R,L]

301跳转

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteBase /
RewriteCond %{SERVER_PORT} !^443$
RewriteRule (.*) https://%{SERVER_NAME}/$1 [R=301,L]
</IfModule>

More »

Typecho做了版本更新,小调整了下Theme

        恶梦是从2013年离职开始,假行僧创业开始的,没白天没黑夜的忙碌,落下一身疾病,然后现在依旧是某种程度上的“瞎忙”,做活动,做方案,组团队,找风投,瞎忙了好几年,也没折腾出来个ABC,反倒是捡起了音乐,写了一些歌曲,不知道这算不算上天对于我这么多年瞎忙的回报。

        最近一直在想办法把明年带音乐骑行中国的事落实,方案,众筹,赞助,宣传,幕后等,一系列相当麻烦,这可以是一个人的事情,也可以是一个事件的事情。

        圣诞节不知道能不能把江门长廊生态园音乐节的活动做起来,想做,但又心里没底,是否承担风险,毕竟,不能,也不想亏了,更何况,根本亏不起。

        双十一买了一堆东西,一千多块,也是自从发明了双十一购物节后买的最多心里最在乎的一次,这两天陆续收到快递,有满意的,有不满意的,似乎对半的比例,单车座包很重,甚至想退,但懒得退了,麻烦,单车码表也不尽人意,没背光不说,还不知道防不防水,更重要的是这压根就是给公路车设计的,而我骑山地车却买了,同样,懒得退。。。骑行裤有一条很紧,必须换。。。

More »

因为山就在那里

图:引用《重返·狼群》剧照

因为山就在那里

因为我找不到你

因为人失去自由

活着就毫无意义

因为天空不再有飞鸟

因为苍凉布满大地

因为城市找不到温暖

我想和你在一起。

More »

推荐10个精致的web UI框架

1.Aliceui
Aliceui是支付宝的样式解决方案,是一套精选的基于 spm 生态圈的样式模块集合,是 Arale 的子集,也是一套模块化的样式命名和组织规范,是写 CSS 的更好方式。
gitHub地址:https://github.com/aliceui/aliceui.github.io

2.Amazeui
Amaze UI 是一个轻量级、 Mobile first 的前端框架, 基于开源社区流行前端框架编写的。
官网地址:http://amazeui.org/

3.sui
SUI是一套基于bootstrap开发的前端组件库,同时她也是一套设计规范。 
通过SUI,可以非常方便的设计和实现精美的页面。
官网地址:http://sui.taobao.org/
同时sui还有移动端版本msui,msui是阿里巴巴共享业务事业部UED团队的作品。目的是为了手机H5页面提供一个常用的组件库,减少重复工作。
地址:http://m.sui.taobao.org/

More »