仿Windows10 Groove音乐播放器专辑鼠标指向效果
Groove是Windows 10自带的一款音乐播放器，最新的Groove支持Project NEON中的糊效果，交互效果也有了很大的变化。
搜索结果（）
仿淘宝APP 2017双11滑动效果
一年一度的双11又来了，看看个大APP都有些啥变化。淘宝首页推荐的滑动看着不错，于是用JS进行了实现。
HTML5 detail展开收缩，抛弃JS
目前只有Chrome版本12以上和Safari支持，IE，火狐，欧鹏都不支持。这个效果经常使用，但它总是用Javascript实现的。
代码结构如下：
<details open> <summary>展开/收缩</summary> 这里是展开的内容 </details>
open表示默认展开
它允许我们在点击summary标签时显示和隐藏details里的其他内容。
不能嵌套使用。
summary标签会自动有个箭头，当你点击它时，下面的附加信息将会呈现，再次点击则隐藏。
FAQ页面中经常使用这个功能。兼容 ie, firefox, chrome的复制内容到剪切板代码
此方法是从Discuz!里扒出来的。
原理：用 onmouseover 事件往 flash 中传递数据。
JS：
var clipboardswfdata;
var setcopy_gettext=function(){
clipboardswfdata=document.getElementById('data').value;
window.document.clipboardswf.SetVariable('str',clipboardswfdata);
}
var floatwin=function(){
alert('copy success, '+clipboardswfdata);
}
常用css media
/* 横屏 */
@media screen and (orientation:landscape){
}
/* 竖屏 */
@media screen and (orientation:portrait){
}
/* 窗口宽度<960,设计宽度=768 */
@media screen and (max-width:959px){
}
/* 窗口宽度<768,设计宽度=640 */
@media screen and (max-width:767px){
}
/* 窗口宽度<640,设计宽度=480 */
@media screen and (max-width:639px){
}
/* 窗口宽度<480,设计宽度=320 */
@media screen and (max-width:479px){
}
/* windows UI 贴靠 */
@media screen and (-ms-view-state:snapped){
}
/* 打印 */
@media print{
}
html5常用标签及注释
| header | 页面头部，不同与<head></head> |
| aside | 边栏 |
| nav | 外部链接集合 |
| section | 章节或段落 |
| article | 类似文章、摘要或留言POST等形式的记录（一般搭配内嵌头部、尾部、底部结构使用） |
| hggroup | 类似子标题，标题信息、可选标题、TAG标签这样的数据，还是英文更好理解一些，heading of a section |
| address | 联系信息，一般用在article或body锚元素周围 |
| footer | 页脚 |
网站改版应该注意的事项
越来越多互联网公司产品人员意识到，无论是豆瓣的改版，还是Facebook的改版都遭到了用户的疯狂抵制。
和传统1.0网站相比，2.0网站用户的力量被无限放大，也意味着用户在网站发展中拥有越来越多的话语权。任何的所谓改版，都会一定程度上影响已有用户的使用习惯，可能遭到用户的大规模抨击。
这意味着，网站改版也许需要更多的智慧和精细化运作。
