Loading

HTML5 detail展开收缩，抛弃JS

作者：kevin   分类：前端乱炖   标签：HTML5    

目前只有Chrome版本12以上和Safari支持，IE，火狐，欧鹏都不支持。这个效果经常使用，但它总是用Javascript实现的。

代码结构如下： 

<details open>
	<summary>展开/收缩</summary>
	这里是展开的内容
</details>

open表示默认展开

它允许我们在点击summary标签时显示和隐藏details里的其他内容。

不能嵌套使用。

summary标签会自动有个箭头，当你点击它时，下面的附加信息将会呈现，再次点击则隐藏。

FAQ页面中经常使用这个功能。
6992次查看/11条评论

常用css media

作者：kevin   分类：前端乱炖   标签：HTML5  CSS3    

/* 横屏 */
@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{
      
}
21171次查看/4条评论

html5常用标签及注释

作者：kevin   分类：前端乱炖   标签：HTML5    


header 页面头部，不同与<head></head>
aside 边栏
nav 外部链接集合
section 章节或段落
article 类似文章、摘要或留言POST等形式的记录（一般搭配内嵌头部、尾部、底部结构使用）
hggroup 类似子标题，标题信息、可选标题、TAG标签这样的数据，还是英文更好理解一些，heading of a section
address 联系信息，一般用在article或body锚元素周围
footer 页脚

阅读全文>>

38618次查看/6条评论