| // 横竖屏 | |
| (function() { | |
| orientationHandle(); | |
| }()); | |
| function orientationHandle() { | |
| if(window.orientation === 0) { // 竖屏 | |
| } else { // 横屏 | |
| } | |
| }; |
| <script> | |
| // Placeholder | |
| $('input[aria-label]').each(function() { | |
| var current = $(this); | |
| var flag = !!current.attr('aria-label'); | |
| if(flag) { | |
| $('<span class="placeholder">'+current.attr('aria-label')+'</span>').appendTo(current.parent()) | |
| }; | |
| current.on("focus", function() { |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="X-UA-Compatible" cotent="IE=edge, chrome=1"><!-- 浏览器以最新版本显示页面 --> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><!-- 默认的文档编码 --> | |
| <meta name="viewport" content="user-scalable=no,width=device-width"><!-- 手机viewpoert设置 --> | |
| <meta name="renderer" content="webkit"><!-- 告诉360浏览器切换为webkit核心(其他的国产多核浏览器会添加这个支持吧？谁知呢！) --> | |
| <title>常用Meta标签</title> | |
| </head> | |
| </html> |
| /*! | |
| * @author : ${1:author} | |
| * @date : ${2:date} | |
| * @desc : ${3:description} | |
| * @notice : generated by SCSS | |
| **/ | |
| $base_font_size: 10px!default; | |
| @function rem($size) { | |
| @return $size / $base_font_size * 1rem; |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> | |
| <title>9x9</title> | |
| <style> | |
| span { padding: 0 10px; } | |
| </style> | |
| </head> | |
| <body> |
#CSS命名真是件难事 原文：[Naming CSS Stuff Is Really Hard][1]
这不是一篇关于CSS结构的文章，当然也不是关于命名的相关规范。相反，让我们来谈谈我们怎么调用元素。他们自己的名称。The things we use to link blocks of styles to the elements they're associated with（我们使用连接块的东西他们与风格的元素）。
10个人里面有9个人会同意：在写CSS的时候，给需要的元素命名是最纠结的部分（译者：原文difficult, 认为命名其实可以很随意，但是想命好却很难、很纠结）。这是因为我们并不能预知未来（未来的需求变更）。一个CSS类名在某天或许很适合，但当设计更改，在某天这个就是错误的了。然后我们又要去重改我们的代码结构、样式来满足当前的需求。是不是感觉很讨厌呢？
我们该如何去解决这种问题？以使所选的名字尽可能的保持稳定。
###演示
http://jsfiddle.net/lyplba/6ezx2zoz/
###注意
1、在用于生产环境时，请确保进行了浏览器默认样式的清理工作(比如常用的reset.css)
2、这里的标签切换只是提供基本的表现（未带相应交互效果），根据需要可以通过外挂其他样式名来更改
| <div class="pub_item"> | |
| <div class="pub_item_wrap clearfix"> | |
| <div class="pub_summary"> | |
| <div class="pub_title"><a href="#">标题名称</a></div> | |
| <div class="pub_meta clearfix"> | |
| <small class="meta_item timestamp">2014-5-14 18:20</small> | |
| <small class="meta_item">217浏览</small> | |
| <p class="meta_cont">The quick, brown fox jumps over a lazy dog.</p> | |
| </div> | |
| <div class="pub_action"> |
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>闭包示例</title> | |
| <script> | |
| /* | |
| 自己的惯性思维写的 | |
| 比较糟糕的一种方式,在循环中创建了函数，带来无谓的计算，引起混淆， |
| <a href="#">Anchor</a> |