存档

‘HTML5/CSS3/Javascript/前端技术’ 分类的存档

ExecJS::RuntimeUnavailable: Could not find a JavaScript runtime

2015年11月10日 评论已被关闭

ExecJS::RuntimeUnavailable: Could not find a JavaScript runtime

http://blog.sina.com.cn/s/blog_600e56a60102v1h0.html

ExecJS::RuntimeUnavailable: Could not find a JavaScript runtime. See https://github.com/sstephenson/execjs for a list of available runtimes.
 
解决办法:
1、ubuntu

sudo apt-get install nodejscentos/redhat

sudo yum install nodejs

2、vim Gemfile
添加:

gem 'execjs'
gem 'therubyracer'
然后: bundle install

为什么我们要从 NodeJS 迁移到 Ruby on Rails

2015年11月10日 评论已被关闭

为什么我们要从 NodeJS 迁移到 Ruby on Rails

http://www.vaikan.com/why-we-moved-from-nodejs-to-ror/

为什么我们要从 NodeJS 迁移到 Ruby on Rails | 外刊IT评论

声明:这篇文章绝不是一篇讨论 NodeJS 和 Ruby on Rails 孰优孰略的檄文。它描述的只是我们做决策过程中的一些思考、决策背后的原因。两种框架都非常优秀,都出色的完成了它们的设计初衷,这也是为什么我们部分的模块仍然运行在NodeJS上的原因。

我是NodeJs的大粉丝,认为这是一项让人非常兴奋的技术,相信它会变的越来越流行。我对这项技术非常的欣赏——尽管我们最近把Targeter App从NodeJS迁移到了Ruby on Rails。

我们当时使用NodeJS开发它的原因很简单。我有一个程序包,能很快的将我们的应用弄上线(我们花了54小时做这个事情),相比起Ruby,我更常使用的是JavaScript。因为我们的技术架构牵涉到MongoDB,我的这些特长只有在NodeJS环境里才会有意义。然而,随着应用规模的增长,我认识到,选择NodeJS来实现这个应用是个错误的选择。下面让我来概述一下其中的原因。

NodeJS很适合做那些有大量短生命期请求的应用。对于传统的CRUD应用,它也很好,但不是非常的理想。在PHP,Ruby,Python语言里都有很成熟、优化的很好的框架来处理这种应用。NodeJS里的所有东西都异步执行的理念对于CRUD应用来说没有任何效果。其它语言里的流行的框架能提供非常好的缓存技术,你所有的需求都能满足,包括异步执行。

NodeJS是一种非常年轻的技术框架,它的周边程序库都不是很成熟。我说这些并没有任何对那些代码捐赠者冒犯的意思,他们很优秀,开发出来很多优秀的程序库。然而,大部分程序库需要改进,而NodeJS的这种快速成长的环境意味着每一版升级中都带有大量的变化;当你使用一种前沿技术时,你十分有必要尽快的紧跟最新的版本。这给创业型的企业带来了很多的麻烦。

另外一个原因是关于测试。NodeJS里的测试框架还不错,但跟Django或RoR平台上的相比还是差一些。对于一个每天都有大量的代码提交、并且在一两天内就要发布的应用来说,程序不能出问题是至关重要的,否则你为此辛苦的努力变得得不偿失。没有人愿意花一天的时间改一些弱智的bug。

最后一点,我们需要的是一种能缓存一切的东西,并且要尽快的实现。尽管我们的应用在增长,每秒钟有上万次的hits,但绝不会出现很大量的访问请求;这不是一个聊天程序!主程序最多时也就达到1000RPS,这样的负载对于Ruby on Rails和Nginx来说算不了什么。

如果你现在还在读这篇文章,那你已经看到了我所有要说的了,你也许非常坚持的想知道我们的应用什么地方还在使用NodeJS。是这样的,我们的应用由两部分组成。一是界面,用户看到的这部分,二是负责报表管理的部分,以及做日志的功能。后者是NodeJS的一个最佳使用场景,存在有大量的短周期的请求。这部分的动作需要尽快的执行完成,甚至要在我们的数据推送还没有完成之前。这很重要,当请求执行还未结束,浏览器继续等待响应结束,这会影响用户使用体验。NodeJS的异步特性救了我们。数据要么被存入数据库,要么被处理掉,当请求一旦执行完成,浏览器就可以开始做其它重要的事情了。

为什么我们要从 NodeJS 迁移到 Ruby on Rails | 外刊IT评论

[英文原文:Why we moved from NodeJS to RoR ]
http://blog.targeterapp.com/post/22984987832/why-we-moved-from-nodejs-to-ror

Bootstrap和Foundation以及Semantic UI对比和使用

2015年11月7日 评论已被关闭

Bootstrap和Foundation以及Semantic UI对比和使用

http://www.uedsc.com/bootstrap-foundation-semantic-ui.html

Bootstrap和Foundation以及Semantic UI对比和使用 – 问说网

Semantic UI—完全语义化的前端界面开发框架,跟Bootstrap和Foundation比起来,还是有些不同的,在功能特性上、布局设计上、用户体验上均存在很多差异。文章里详细介绍了Semantic UI自身的功能特性和优缺点。

在这篇文章当中作者讲述了Semantic UI具备哪些功能特性,以及和其它前端界面开发框架的不同之处。可能Semantic UI只是HTML/CSS框架领域上的一个新成员,但是它来势汹汹,势不可挡。引用Semantic UI团队的话说:“Semantic赋予设计师和开发者为UI创建一个共享词汇库的能力。”

Semantic-UI

我通常情况下不喜欢更改开发框架,即使是HTML/CSS框架。但是有的时候为了最终的产品质量,还是值得一试去改变框架的。

有那么一段时间,我是Zurb’s Foundation Framework的超级粉丝,它有许多其它框架没有的功能特性,同时它还有很多预制模板。所以使用Zurb’s Foundation Framework来设计的话相对是比较舒适快捷的。但唯一的一点是有些功能得等到Foundation新版本发布出来才能使用。

进入到Semantic UI开 发框架,就会看到数量庞大的功能特性,这些功能都很有特点。Semantic UI拥有支持情态动词、手风琴元素、元素调光器、3D转换,甚至是评级等多种功能。更不用说其它的运行程序,因为它们看上去都像是涂抹了黄油一样——运行 起来特别流利顺畅。当然所列举的这些只是冰山一角,不过这能让你基本上了解大致情况。可能Semantic UI只是HTML/CSS框架领域上的一个新成员,但是它来势汹汹,势不可挡。

5243e85d6b70c

另外,这些功能使用的类别名称比一些随意的字符串更加的接近英语;所以使用Semantic UI设计会让你感觉更自然。因此,学习如何使用Semantic UI,并用Semantic UI进行设计也就方便的多了。

然而,现在的问题是Semantic UI忽略了一些基本功能,例如基本的图片滑块,或者是缩略图类等等。不过后来发现,这些所谓的功能缺失,实际上是和其它功能整合了,在其它方面是完全可以实现的。

5243e86c33d59

Semantic UI

Semantic UI的优点:

  • MIT许可协议下出版。
  • 有很好的证明文档记录。
  • 看上去更容易学习/使用。
  • 配备网格布局。
  • 使用LESS动态样式语言。
  • 有一些非常实用的附加配置,例如inverted类。
  • 对于社区贡献来说是比较开放的。
  • 有一个非常好的按钮实现,情态动词,和进度条。
  • 在许多功能上使用图标字体。

Semantic UI的缺点:

  • 没有图片滑块。
  • 没有缩略图类。
  • 缺少可见性类。
  • 没有SASS。
  • 没有发布1.0以上的版本。

BootStrap

我们再来看看BootStrap有哪些优缺点:

如今的Bootstrap已包括了几十个组件,每个组件都自然地结合了设计与开发,具有完整的实例文档,定义了真正的组件和模板。无论处在何种技术水平的开发者,也无论处在哪个工作流程中,都可以使用Bootstrap快速、方便地构建开发者喜欢的应用。

难能可贵的是,Bootstrap依旧本着“并行开发”、“作为产品的风格指南”和“迎合所有的技能水平”的原则帮助开发者解决实际问题,不断完善自己,吸引更多人选择Bootstrap应用于自己的项目中。

然 而古人云“万物相生相克”,有好就有坏,Bootstrap也是一样。对于在国内的开发者来说,最可怕的就是IE兼容问题。目前Bootstrap对 IE6到IE8的支持都不友好。另一个缺点是,采用Bootstrap的模板,网站结构时常会显得臃肿。此外,覆盖一些样式时会造成代码冗余。

Foundation

再来看看Foundation有哪些优缺点:

Foundation是一个易用、强大而且灵活的框架,用于构建基于任何设备上的Web应用。提供多种 Web上的UI组件,如表单、按钮、Tabs等等。

从 兼容性方面来说,Foundation已经放弃了对IE 8的支持,而Bootstrap 2仍能较完美的支持IE 8,甚至通过类似bs-ie的方式来达到大部分component支持IE 6的要求,在国内是选择Foundation还是选择Bootstrap的时候可能还是需要考虑这一重要因素吧。

从JavaScript库角度来说,Bootstrap 2/3采用的都是更为常见的jQuery,而Foundation采用的是Zepto,Zepto.js是支持移动WebKit浏览器的JavaScript框架,具有与jQuery兼容的语法。

从 社区支持度来说,Bootstrap在Github上的人气毋庸置疑,国内也有中文版的文档,各种教程案例以及衍生而来的插件、主题也是层出不穷,一片欣 欣向荣之景。而Foundation的社区支持度则相对来说较为薄弱。因为Foundation的开发理念是mobile first,所以Foundation在国内则相对较为小众。

最后总结

实话实说,很多人还是比较喜欢Semantic UI框架的,不管是在生产站点还是在个人项目中使用Semantic UI,都会让人觉得特别激动。如果Semantic UI框架能发挥它的所有潜力,很有可能会比Bootstrap和Foundation都深受开发者的喜爱。

译文来自:https://coderwall.com/welcome,作者是Nicholas Jordon

Semantic-UI和其他几个前端框架

2015年11月6日 评论已被关闭

Semantic-UI和其他几个前端框架

http://dmyz.org/archives/548

Semantic-UI和其他几个前端框架 | 动漫驿站

本来是想介绍Semantic-UI的,但如果只介绍这个框架,没什么内容,框架相关feature站点上有不需要说,所以干脆列出自己常用的几个前端框架,算是做个阶段性总结。本文的核心是侧重于HTML/CSS的框架,JS框架或以JS为核心的框架不讨论(比如YUI);多屏已是既定事实,虽然不是所有开发都要考虑自适应,但有自适应功能至少说明了这框架短期内不会被淘汰,所以不带自适应功能的框架不讨论(比如flaminwork);非开源、不可商用,或是需要付费的框架不讨论(比如easyframework)。

先说Bootstrap,这两年都在用它,如今Bootstrap有点烂大街了,难免有些审美疲劳。但想想在Bootstrap这种框架出现之前,程序员做的界面实在是惨不忍睹,如今至少升级成“还能看”的级别了,所以“泛滥”这个问题是瑕不掩瑜的。平时开发个小工具用它来做界面,写个底层脚本用它来做文档界面,工作环境中也可以用来做原型或是布局,谁都看得懂没什么学习成本。总体来说,这个框架对于互联网的美化实在是功不可没。

bootstrap-3-home

Bootstrap的优点是拿来就能用,节省时间。缺点是class满天飞(也许你看到这篇文章的时候它已经变好了但不影响我现阶段的吐槽),而且不够语义化,也不适合做定制——最多改改颜色,如果对自适应有定制需求可以考虑用Foundation来替代。这个框架我最初是用来写产品原型的(这个用途现在已经被Bootstrap替代了),结果到3.0版Foundation更改Title为“全世界最先进的前端自适应框架”(most advanced responsive front-end framework in the world),是否最先进有待商榷,但它在自适应方面的定制性确实比Bootstrap好,Bootstrap有的控件它都有。
Foundation-4

我没在生产环境中用过Foundation,12年6月它由原型工具转型成前端框架时,Bootstrap已经很流行了,有Twitter做技术后盾,不太可能说服程序员转向Foundation。现在的4.0版本用Zepto替换了jQuery,如果项目中在用Zepto可以考虑用它代替Bootstrap。

接下来才是本文的重点——Semantic-UI。这名字就是它最主要的卖点了:语义化。Semantic-UI比Bootstrap更语义化,使用了更容易理解的标签名称:导航的是nav,主要内容的是main,class名也很明确,而且不像Bootstrap需要套很多层。Bootstrap很通用,兼容性很好,甚至能兼容低版本的IE,Semantic-UI则更Geek,有不少CSS3的特性,比如ShapeReveal就很有趣。从界面设计风格来说,Semantic比Bootstrap(2)更扁平化:
semantic-button

这些特性都很fancy,但我现在用Semantic-UI替换Boostrap,主要是因为它的JS插件(Modules)更容易操作,预设了一些常用动画,视图(Views)中的评论(Comment)和动态信息(Feed)实在是帮了大忙。反正我需要用到的Bootstrap功能它都有,于是欢乐的更换了Semantic-UI。大多数的样式效果Semantic-UI都比Bootstrap代码量少,在相同的熟练程度下开发起来比Bootstrap快。而且提供多种主题,一定程度上避免了Bootstrap千站一面的问题。

再找找缺点,我刚开始用的时候,被Semantic-UI的Grid坑过。自适应的问题,bootstrap通过md/sm/xs定义在不同屏幕宽度下的显示,虽然麻烦,但容易控制。Semantic-UI是用Stackable/Doubling来实现,而且还能手动调整,不知不觉就被玩坏了。似乎这个框架的设计接近Ruby的哲学而不是Python的,同一个需求有多种方式来实现,比如我要实现列表,可以用List或是Items;要实现侧边栏,可以用Rail或是Grid,选择多了有时候也是很纠结的问题。还有,Semantic-UI完整的库文件很大,JS+CSS文件有接近500kb的大小,考虑到国内的网速,这个体积显得有些庞大了。可以用NodeJS自己build,前提是清楚每个组件具体是干嘛。

以上框架适合擅长实现功能(前端的JS以及后台相关交互)但不擅长设计的程序员,用以上框架可以快速做出一个不错的Web界面。另一种场景是自己会设计,或是由专业设计师出设计,再转成HTML/CSS,上述框架就太重了,很多功能用不上。

这种情况我通常只需要框架来做布局(Grid),10年写过一篇文章介绍网页设计多用960px宽度的原因,当时还在用960gs,但自适应的需求960gs满足不了,就用了一段时间的lessfreamwork。最近960gs的作者开发了unsemantic,于是又换成了unsemantic。在编写自适应网页时,要根据设备的不同加载不同的css文件,unsemantic都替你切分好了,省时省力。

最后得说说Topcoat,可以认为 Semantic-UI – unsemantic = Topcoat。有时候只需要一个单页面,甚至都不需要导航条,我是用Topcoat+布局类框架来做的。Topcoat可以让各类页面元素更美观,纯css实现,文件小,更灵活也更容易定制。
505pfp

以上,再次强调本文的目的是布道用,在开发个人项目的程序员们可以考虑尝试Semantic-UI,前端框架的更换风险小,有更多地小白鼠,不,实际用户之后才更利于这个框架被用于生产环境中。需要例子可以参考:Erya – 基于SemanticUI + Django的内容发布系统,DEMO地址是: http://bbs.dmyz.org/

HTTP协议中PUT和POST使用区别

2015年10月9日 评论已被关闭

HTTP协议中PUT和POST使用区别
http://blog.csdn.net/mad1989/article/details/7918267
有的观点认为,应该用POST来创建一个资源,用PUT来更新一个资源;有的观点认为,应该用PUT来创建一个资源,用POST来更新一个资源;还有的观点认为可以用PUT和POST中任何一个来做创建或者更新一个资源。这些观点都只看到了风格,争论起来也只是争论哪种风格更好,其实,用PUT还是POST,不是看这是创建还是更新资源的动作,这不是风格的问题,而是语义的问题。

在HTTP中,PUT被定义为idempotent的方法,POST则不是,这是一个很重要的区别。

“Methods can also have the property of “idempotence” in that (aside from error or expiration issues) the side-effects of N > 0 identical requests is the same as for a single request.”

上面的话就是说,如果一个方法重复执行多次,产生的效果是一样的,那就是idempotent的。

举一个简单的例子,假如有一个博客系统提供一个Web API,模式是这样http://superblogging/blogs/post/{blog-name},很简单,将{blog-name}替换为我们的blog名字,往这个URI发送一个HTTP PUT或者POST请求,HTTP的body部分就是博文,这是一个很简单的REST API例子。我们应该用PUT方法还是POST方法?取决于这个REST服务的行为是否是idempotent的,假如我们发送两个http://superblogging/blogs/post/Sample请求,服务器端是什么样的行为?如果产生了两个博客帖子,那就说明这个服务不是idempotent的,因为多次使用产生了副作用了嘛;如果后一个请求把第一个请求覆盖掉了,那这个服务就是idempotent的。前一种情况,应该使用POST方法,后一种情况,应该使用PUT方法。

也许你会觉得这个两个方法的差别没什么大不了的,用错了也不会有什么问题,但是你的服务一放到internet上,如果不遵从HTTP协议的规范,就可能给自己带来麻烦。比如,没准Google Crawler也会访问你的服务,如果让一个不是indempotent的服务可以用indempotent的方法访问,那么你服务器的状态可能就会被Crawler修改,这是不应该发生的。
国外文章摘录,具体忘记名称作者和url了~

## CSS 的黑科技

2015年10月6日 评论已被关闭

CSS 的黑科技

http://segmentfault.com/a/1190000003023537

原文来自:https://jellybool.com/post/css-that-you-may-not-know

补充篇在这里 http://segmentfault.com/a/1190000003029085

昨天由于某些原因没有写博客,之前说好的每天一篇的,这篇是为了补昨天的了。然后我就要当一次标题党了。这里的黑科技其实就是一些CSS中不怎么为人所知但在解决某些问题的时候很溜的属性。

border-radius

很多开发者估计都没有正确认识这个border-radius,因为基本上很多人都是这么用的:

.box {
  border-radius: 4px;
}


稍微高端一点的是这样的:

.box {
  border-radius: 4px 6px 6px 4px;
}


然而,终极黑科技是这样用的:

.box {
  border-radius: 5px 5px 3px 2px / 5px 5px 1px 3px;
}

对,它可以赋8个值,没见过?不着急,具体的解释是这样的:

斜线前面的影响的是水平方向,斜线后面影响的是垂直方向,各个数字就分别代表四个不一样的方向。

outline-offset

相信很多开发者在写CSS的时候对下面的语句会很熟悉:

input {
    outline : none;
}

input:focus {
    outline : none;
}

这就是将input输入框去掉默认的蓝线框的方法。其实,这里还有说一个就是,CSS中还有一个outline-offset属性,在这个属性中,你可以设置默认线框的距离;像这样

input {
    outline-offset: 4px ;
}

调节该属性值的大小你就可以看到outline的距离变化了。

类的声明

对于下面的类的声明,可能大家都很熟悉:

.col-8 {

}

这当然没什么,但是如果你这样写呢:

.♥ {
  color: hotpink;
}

.★ {
  color: yellow;
}

嗯,看起来怎么样,你是可以这么用的:



<div class="♥ ★"></div>



只要是Unicode的,你都可以这么来声明你的类。

选中连续的几个元素

ol li:nth-child(n+7):nth-child(-n+14) {
  background: lightpink;
}
/** Or Safari Way **/
ol li:nth-child(-n+14):nth-child(n+7) {
  background: lightpink;
}

上面的这种写法其实就可以达到选中ol下面的第七到第十四个li元素。

伪类设置单标签

html中有几个常见的单标签:<br> ,<hr>等。具体可以查看这里:

http://www.w3.org/TR/html5/syntax.html#void-elements

下面的示例是实现对<hr>的修饰。

hr:before {
    content: "♪♪";
}

hr:after {
    content: " This is an 

<hr>

 element";
}

没错,关键就是使用:before:after这两个伪类。在这里,顺便说一点就是,其实你还可以用这两个伪类来修饰<meta><link>,不过这个前提是,你把这两个的display属性设置为:

display: block

属性区分大小写

假如我们在写html的时候有类似下面的代码:



<div class="box"></div>


<input type="email">

然后我们用属性选择器进行CSS修饰:

div[class="box"] {
  color: blue;
}

input[type="email"] {
  border: solid 1px red;
}

这样的声明方式毫无疑问地就会生效。然而,如果我们声明成下面这个样子,结果会是怎么样的呢:

div[class="BOX"] {
  color: blue;
}

input[type="EMAIL"] {
  border: solid 1px red;
}

这变成了大写之后,第一个class="BOX"并不会影响到<div class="box"></div>,而第二个type="EMAIL"还是会正常修饰<input type="email">。所以在使用属性选择器的时候,注意大小写问题。

目前就只觉得这些CSS黑科技需要提醒自己一下,有可以补充。

Happy Hacking

一些常用的css 命名

2015年9月28日 评论已被关闭

一些常用的css 命名
页头:header
登录条:loginbar
标志:logo
侧栏:sidebar
广告:banner
导航:nav
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
滚动:scroll
页面主体:main
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guild
服务:service
热点:hot
新闻:news
下载:download
注册:regsiter
状态:status
按钮:btn
投票:vote
合作伙伴:partner
友情链接:friendlink
页脚:footer
版权:copyright
CSS ID 的命名
外 套:  wrap
主导航:  mainnav
子导航:  subnav
页 脚:  footer
整个页面: content
页 眉:  header
页 脚:  footer
商 标:  label
标 题:  title
主导航:  mainbav(globalnav)
顶导航:  topnav
边导航:  sidebar
左导航:  leftsidebar
右导航:  rightsidebar
旗 志:  logo
标 语:  banner
菜单内容1: menu1content
菜单容量: menucontainer
子菜单:  submenu
边导航图标:sidebarIcon
注释:   note
面包屑:  breadcrumb(即页面所处位置导航提示)
容器:   container
内容:   content
搜索:   search
登陆:   Login
功能区:  shop(如购物车,收银台)
当前的   current
在编辑样式表时可用的注释可这样写
<– Footer –>
内容区
<– End Footer –>
样式文件命名
主要的 master.css
布局,版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css
网站常用中英文对照表
网站导航 Site Map
公司简介 Profile or Company Profile or Company
公司设备 Equipment Equipment
公司荣誉 Glories Glories
企业文化 Culture Culture
产品展示 Product Product
资质认证 Quality Certification
企业规模 Scale Scale
营销网络 Sales Network
组织机构 organization organization
合作加盟 Join In Cooperation
技术力量 Technology Technology
经理致辞 Manager`s oration
发展历程 Development History
工程案例 Engineering Projects
业务范围 Business Scope
分支机构 Branches
供求信息 Supply & Demand
经营理念 Operation Principle
产品销售 Sales Sales
联系我们 Contact Us Contact Us
信息发布 Information Information
返回首页 Homepage Homepage
产品定购 order order
分类浏览 Browse By Category
电子商务 E-business
公司实力 Strength Strength
版权所有 Copy Right
友情连结 Hot Link
应用领域 Application Fields
人力资源 Human Resource Hr
领导致辞 Leader`s oration
企业资质 Enterprise Qualification
行业新闻 Trade News
行业动态 Trends
客户留言 Customer Message
客户服务 Customer Service
新闻动态 News & Trends
公司名称 Company Name
销售热线 Sales Hot-Line
联系人 Contact Person
您的要求 Your Requirements
建设中 In Construction
证书 Certificate Certificate
地址 ADD Add
邮编 Postal Code Zipcode
电话 TEL Tel
传真 FAX Fax
产品名称 Product Name
产品说明 Description Description
价格 Price
品牌 Brand
规格 Specification
尺寸 Size
生产厂家 Manufacuturer Manufacturer
型号 Model
产品标号 Item No.
技术指标 Technique Data
产品描述 Description
产地 Production Place
销售信息 Sales Information
用途 Application
论坛 Forum
在线订购 On-line order
招商 Enterprise-establishing
招标 Bid Inviting
综述 General
业绩 Achievements
招聘 Join Us
求贤纳士 Join Us
大事 Great Event
动态 Trends
服务 Service
投资 Investment
行业 Industry
规划 Programming
环境 Environment
发送 Delivery
提交 Submit
重写 Reset
登录 Enter
注册 Login
社区 Community
业务介绍 Business Introduction
在线调查 Online Inquiry Inquiry
下载中心 Download
会员登陆 Member Entrance
意见反馈 Feedback
常见问题 FAQ
中心概况 General Profile
教育培训 Education & Training
游乐园 Amusement Park
在线交流 Online Communication
专题报道 Special Report
CSS编写顺序
[color=Blue]样式表的属性编写技巧
//显示属性
display
list-style
position
float
clear
//自身属性
width
height
margin
padding
border
background
//文本属性
color
font
text-decoration
text-align
vertical-align
whitewhite-space
other text
content
[color=Red]注:这样编写可以提高样式的执行效率,虽说小的变动,对于大型网站是有很大帮助的哦!

按钮美化

2015年9月26日 评论已被关闭

按钮美化
http://blog.csdn.net/heqingsong1/article/details/8525841
[css] view plaincopy
.greenbtn{
border:1px solid #690;
box-shadow:inset 0 1px 1px #fff,0 0 1px #fff inset;
color:#fff;
/* IE9 SVG */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzk5Y2MwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3MmE2MDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(153,204,0,1) 0%, rgba(114,166,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(153,204,0,1)), color-stop(100%,rgba(114,166,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(153,204,0,1) 0%,rgba(114,166,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(153,204,0,1) 0%,rgba(114,166,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(153,204,0,1) 0%,rgba(114,166,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(153,204,0,1) 0%,rgba(114,166,0,1) 100%); /* W3C */
}
.greenbtn:hover{
color:#fff;
background:#85B900;
}
.redbtn{
border:1px solid #a40000;
box-shadow:inset 0 1px 1px #fff,0 0 1px #fff inset;
color:#fff;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmMzMzMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhNDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #ff3333 0%, #a40000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3333), color-stop(100%,#a40000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ff3333 0%,#a40000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ff3333 0%,#a40000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ff3333 0%,#a40000 100%); /* IE10+ */
background: linear-gradient(top, #ff3333 0%,#a40000 100%); /* W3C */
}
.redbtn:hover{
color:#fff;
background:#D51C1C;
}
.lightbluebtn{
border:1px solid #196EBB;
box-shadow:inset 0 1px 1px #fff,0 0 1px #fff inset;
color:#fff;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYjdlYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDllYzMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(0,183,234,1) 0%, rgba(0,158,195,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,183,234,1)), color-stop(100%,rgba(0,158,195,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,183,234,1) 0%,rgba(0,158,195,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,183,234,1) 0%,rgba(0,158,195,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,183,234,1) 0%,rgba(0,158,195,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(0,183,234,1) 0%,rgba(0,158,195,1) 100%); /* W3C */
}
.lightbluebtn:hover{
color:#fff;
background:#00A9D4;
}
.darkbluebtn{
border:1px solid #146db5;
box-shadow:inset 0 1px 1px #fff,0 0 1px #fff inset;
color:#fff;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzg1YzZlZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iIzMyODRjNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top, rgba(133,198,237,1) 0%, rgba(50,132,199,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(133,198,237,1)), color-stop(100%,rgba(50,132,199,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(133,198,237,1) 0%,rgba(50,132,199,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(133,198,237,1) 0%,rgba(50,132,199,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(133,198,237,1) 0%,rgba(50,132,199,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(133,198,237,1) 0%,rgba(50,132,199,1) 100%); /* W3C */
}
.darkbluebtn:hover{
color:#fff;
background:#5DA7DB;
}
.orangebtn{
border:1px solid #b05903;
box-shadow:inset 0 1px 1px #fff,0 0 1px #fff inset;
color:#fff;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmY2MwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjdlMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #ffcc00 0%, #ff7e00 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffcc00), color-stop(100%,#ff7e00)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffcc00 0%,#ff7e00 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffcc00 0%,#ff7e00 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffcc00 0%,#ff7e00 100%); /* IE10+ */
background: linear-gradient(top, #ffcc00 0%,#ff7e00 100%); /* W3C */
}
.orangebtn:hover{
color:#fff;
background:#FF9E00;
}
.lightgreybtn{
border:1px solid #ccc;
color:#666;
box-shadow:inset 0 1px 1px #fff,0 0 1px #fff inset;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNmU2ZTYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(230,230,230,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(230,230,230,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(230,230,230,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(230,230,230,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(230,230,230,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(230,230,230,1) 100%); /* W3C */
}
.lightgreybtn:hover{
background:#e6e6e6;
color:#666;
}
.darkgreybtn{
border:1px solid #848484;
color:#fff;
box-shadow:inset 0 1px 1px #fff,0 0 1px #fff inset;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Q0ZDRkNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhMmEyYTIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(212,212,212,1) 0%, rgba(162,162,162,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(212,212,212,1)), color-stop(100%,rgba(162,162,162,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(212,212,212,1) 0%,rgba(162,162,162,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(212,212,212,1) 0%,rgba(162,162,162,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(212,212,212,1) 0%,rgba(162,162,162,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(212,212,212,1) 0%,rgba(162,162,162,1) 100%); /* W3C */
}
.darkgreybtn:hover{
background:#C0BFBF;
color:#fff;
}
.blackbtn{
border:1px solid #4c4c4c;
box-shadow:inset 0 1px 1px #fff,0 0 1px #fff inset;
color:#fff;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI2JSIgc3RvcC1jb2xvcj0iIzg4ODc4NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk1JSIgc3RvcC1jb2xvcj0iIzJiMmIyYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top, #888787 0%, #2b2b2b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(6%,#888787), color-stop(100%,#2b2b2b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #888787 0%,#2b2b2b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #888787 0%,#2b2b2b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #888787 0%,#2b2b2b 100%); /* IE10+ */
background: linear-gradient(top, #888787 0%,#2b2b2b 100%); /* W3C */
}
.blackbtn:hover{
background:#555;
color:#fff;
}
/* btn */
.btn,.small-btn,.large-btn{
cursor: pointer;
display:inline-block;*display:inline;*zoom:1;
}
.btn{
padding:0 16px;
line-height:30px;
font-size:14px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
.small-btn{
line-height:20px;
padding:0 5px;
font-size:12px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
}
.large-btn{
line-height:40px;
font-size:18px;
padding:0 40px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
}
a.btn:hover,
a.small-btn:hover,
a.large-btn:hover{
text-decoration:none;
}
.inputbtn,.small-inputbtn,.large-inputbtn{
display:inline-block;*display:inline;*zoom:1;
cursor: pointer;
text-align:center;
overflow:visible;
}
.inputbtn{
padding:0 16px;
height:30px;
font-size:14px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
.small-inputbtn{
padding:0 5px;
height:22px;
font-size:12px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
}
.large-inputbtn{
padding:0 40px;
height:40px;
font-size:18px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
}
:root .small-inputbtn,
:root .inputbtn,
:root .large-inputbtn{
padding-top:3px\9;
}
@-moz-document url-prefix(){
.inputbtn,.small-inputbtn,.large-inputbtn{
padding-bottom:3px;
}
}
/* ————————————————-
* ie6-8
* ————————————————-
*/
.no-css3 .greenbtn{
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#99cc00′, endColorstr=’#72a600′,GradientType=0 ); /* IE6-8 */
}
.no-css3 .redbtn{
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#ff3333′, endColorstr=’#a40000′,GradientType=0 ); /* IE6-8 */
}
.no-css3 .lightbluebtn{
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#00b7ea’, endColorstr=’#009ec3′,GradientType=0 ); /* IE6-8 */
}
.no-css3 .darkbluebtn{
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#85c6ed’, endColorstr=’#3284c7′,GradientType=0 ); /* IE6-8 */
}
.no-css3 .orangebtn{
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#ffcc00′, endColorstr=’#ff7e00′,GradientType=0 ); /* IE6-8 */
}
.no-css3 .lightgreybtn{
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#ffffff’, endColorstr=’#e6e6e6′,GradientType=0 ); /* IE6-8 */
}
.no-css3 .darkgreybtn{
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#d4d4d4′, endColorstr=’#a2a2a2′,GradientType=0 ); /* IE6-8 */
}
.no-css3 .blackbtn{
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#888787′, endColorstr=’#2b2b2b’,GradientType=0 ); /* IE6-8 */
}
.no-css3 .greenbtn:hover,
.no-css3 .redbtn:hover,
.no-css3 .lightbluebtn:hover,
.no-css3 .darkbluebtn:hover,
.no-css3 .orangebtn:hover,
.no-css3 .lightgreybtn:hover,
.no-css3 .darkgreybtn:hover,
.no-css3 .blackbtn:hover{
filter:none;
}

11个注意点保证CSS的渲染效率

2015年9月25日 评论已被关闭

11个注意点保证CSS的渲染效率

http://www.cnblogs.com/yuzhongwusan/archive/2008/12/05/1348195.html

1、十六进制的颜色值对位数与大小写

编写十六进制颜色值时你可能会用小写字母或省略成3位数,关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响,但十六进制的颜色值默认标准是大写及6位数标注。在未知情况下不希望冒险而降低了渲染的效率。
* 不赞成 – color:#f3a;
* 建议用 – color:#FF33AA;

2、display与visibility的差异

他们用于设置或检索是否显示对象。display隐藏对象不保留物理空间,visibility为隐藏对象保留占据的物理空间。当浏览器渲染被占据的物理空间时,会有所消耗资源。
* 不赞成 – visibility:hidden;
* 建议用 – display:none;

3、border:none;与border:0;的区别

和display与visibility的关系类似,分别不保留与保留空间。更多的是border:0;尽管可以隐藏掉边框,但它会为你保留border-color/border-style的使用权。
* 不赞成 – border:0;
* 建议用 – border:none;

4、不宜过小的背景图片平铺

一张宽高1px的背景图片,虽然文件体积非常之小,但渲染宽高500px的板块需要重复平铺2500次。提高背景图片渲染效率跟图片尺寸及体积有关,最大的图片文件体积保持约70KB。
* 不赞成 – 宽高8px以下的平铺背景图片
* 建议用 – 衡量适中体积及尺寸的背景图片

5、IE的滤镜

IE的滤镜除了比较消耗资源外也有兼容性问题。当中有令PNG透明的滤镜,可采用GIF或JPG似透非透的办法来避免使用此滤镜。建议只在IE6应用GIF透明,因为IE7以上已经支持了PNG透明。
* 不赞成,滥用IE滤镜因为消耗资源外也有兼容性问题。
* 建议用,最好选择其它方法能避免使用滤镜。

6、*{ margin:0; padding:0;}避免浏览器样式差异

*号通配符把所有标签都初始化一遍,浏览器的渲染消耗一定的资源。有部分在标签在不同浏览器上几乎无差异,或是某些已经不推荐使用的标签(因为你不会去用它),它们不需通配符要重新初始化一遍这样做能节省一点资源。
* 不赞成,使用*号通配符
* 不赞成,div span button b table等标签纳入通配符控制内外填充样式
* 建议用,有选择性地使用通配符控制内外填充样式。

7、不要添加额外的标签来描述class或id

如果你有一个选择器是以id作为关键选择符,请不要添加多余标签名上去。因为ID是唯一的,你不要为了一个不存在的理由而降低了匹配的效率。
* 不赞成 – button#backButton { }
* 不赞成 – .menu-left #newMenuIcon { }
* 建议用 – #backButton { }
* 建议用 – #newMenuIcon { }

8、尽量选择最特殊的类来存放选择器

降低系统效率的一个最大原因是我们在标签类中用了过多的选择符。通过添加 class 到元素,我们可以将类别进行再细分为 class 类,这样就不用为了一个标签浪费时间去匹配过多的选择符了。
* 不赞成 – treeitem[mailfolder=”true”] > treerow > treecell { }
* 建议用 – .treecell-mailfolder { }

9、避免子孙选择符

子孙选择符是CSS中最耗资源的选择符。他真的是非常的耗资源,尤其是在选择器使用标签类或通用类的时候。很多情况中,我们真正想要的是子选择符。除非有明确说明,在 UI CSS 中是严禁使用子孙选择符的。
* 不赞成 – treehead treerow treecell { }
* 好一点,但还是不行(参照下一条) – treehead > treerow > treecell { }

10、标签类中不要包含子选择符

不要在标签类中使用子选择符。否则,每次元素的出现,都会额外地增加匹配时间。(特别是当选择器似乎多半会被匹配的情况下)
* 不赞成 – treehead > treerow > treecell { }
*  建议用 – .treecell-header { }

11、留意所有子选择符的使用

小心地使用子选择符。如果你能想出一个的不使用他的方法,那么就不要使用。特别是在 RDF 树和菜单会频繁地使用子选择符,像这样。
* 不赞成 – treeitem[IsImapServer=”true”] > treerow > .tree-folderpane-icon { }

请记住 RDF 的属性是可以在模板中被复制的!利用这一点,我们可以复制那些想基于该属性改变的子 XUL 元素上的 RDF 属性。
* 建议用 – .tree-folderpane-icon[IsImapServer=”true”] { }

说说Laravel5的blade模板

2015年9月24日 评论已被关闭

说说Laravel5的blade模板

http://www.cnblogs.com/micworld/p/4748017.html

首先看一下以前的程序

routes.php

211526212691554

PagesController.php

211526222853497

resources/views/pages/about.blade.php

211526234105940

现在我们来简单的使用一下blade模板的特性

1、模板的嵌套继承

在views目录下新建app.blade.php

211526246131642

修改about.blade.php代码为

211526256136814

打开浏览器输入localhost:8888/about

211526266132986

下边解释一下laravel的blade继承

211526293944203

 

我们再来研究研究blade的其他标记

在blade中使用if条件

211526306443918

@foreach等等,blade有许多语法标记,方便我们的开发,具体信息请看文档

http://laravel-china.org/docs/5.0/templates

Blade模板命令集

2015年9月23日 评论已被关闭

Blade模板命令集

http://my.oschina.net/whsheng/blog/324456

以下内容来自于:http://laravel-recipes.com/recipes/248/knowing-all-the-blade-template-commands

{{ $var }} – Echo content

{{ $var or 'default' }} – Echo content with a default value

{{{ $var }}} – Echo escaped content

{{-- Comment --}} – A Blade comment

@extends('layout') – Extends a template with a layout

@if(condition) – Starts an if block

@else – Starts an else block

@elseif(condition) – Start a elseif block

@endif – Ends a if block

@foreach($list as $key => $val) – Starts a foreach block

@endforeach – Ends a foreach block

@for($i = 0; $i < 10; $i++) – Starts a for block

@endfor – Ends a for block

@while(condition) – Starts a while block

@endwhile – Ends a while block

@unless(condition) – Starts an unless block

@endunless – Ends an unless block

include(file) – Includes another template

@include(file, ['var' => $val,...]) – Includes a template, passing new variables.

@each('file',$list,'item') – Renders a template on a collection

@each('file',$list,'item','empty')– Renders a template on a collection or a different template if collection is empty.

@yield('section') – Yields content of a section.

@show – Ends section and yields its content

@lang('message') – Outputs message from translation table

@choice('message', $count) – Outputs message with language pluralization

@section('name') – Starts a section

@stop – Ends section

@endsection – Ends section

@append – Ends section and appends it to existing of section of same name

@overwrite – Ends section, overwriting previous section of same name


进阶资料

robots 中 Sitemap 的 XML 格式 和 用法

2015年9月23日 评论已被关闭

robots 中 Sitemap 的 XML 格式 和 用法

http://lzj0470.iteye.com/blog/905962
XML搜索引擎网络协议PHP数据结构
此文档介绍适用于 Sitemap 协议的 XML 架构。

Sitemaps 协议格式由 XML 标记组成。Sitemap 的所有数据数值应为实体转义过的。文件本身应为 UTF-8 编码。

Sitemap 必须:

* 以 <urlset> 开始标记作为开始,以 </urlset> 结束标记作为结束。
* 在 <urlset> 标记中指定命名空间(协议标准)。
* 每个网址包含一个<url> 条目作为 XML 父标记。
* 在每个 <url> 父标记中包含一个 <loc> 子标记条目。

其他所有标记均为可选,搜索引擎不同,对可选标记的支持也各不相同。有关详情,请参阅各个搜索引擎的文档。

而且,Sitemap 中的所有网址都必须来自于同一个主机,如 www.example.com 或 store.example.com。有关详细信息,请参阅 Sitemap 文件位置。
XML Sitemap 示例

下例显示只包含一个网址并使用所有可选标记的 Sitemap。可选标记为斜体。

<?xml version=”1.0″ encoding=”UTF-8″?>
<urlset xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9″>
<url>
<loc>http://www.example.com/</loc>
<lastmod>2005-01-01</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
</urlset>

另请查看具有多个网址的示例。
XML 标记定义

以下对可用 XML 标记进行说明。
属性 说明
<urlset> 必填

压缩此文件并提供当前协议标准作为参考。
<url> 必填

每个网址条目的父标记。剩余标记为此标记的子标记。
<loc> 必填

该页的网址。如果您的网络服务器需要网址的话,此网址应以协议开始(例如:http)并以斜杠结尾。该值必须少于 2,048 个字符。
<lastmod> 可选

该文件上次修改的日期。此日期应采用 W3C Datetime 格式。如果需要,此格式允许省略时间部分,并使用 YYYY-MM-DD。

请注意,此标记不同于服务器可返回的 If-Modified-Since (304) 标头,搜索引擎可能会以不同的方式使用这两个来源的信息。
<changefreq> 可选

页面可能发生更改的频率。此值为搜索引擎提供一般性信息,可能与搜索引擎抓取页面的频率不完全相关。有效值为:

* always
* hourly
* daily
* weekly
* mothly
* yearly
* never

“always”值应当用于描述随每次访问而改变的文档。而“never”值则应当用于描述存档的网址。

请注意,抓取工具会将此标记的值视为提示而不是命令。尽管搜索引擎抓取工具在做决定时会考虑此信息,但对于标记为“hourly”页面的抓取频率可能低于每小时一次,而对于标记为“yearly”页面的抓取频率可能高于每年一次。抓取工具也可能会定期抓取标记为“never”的网页,以便能够处理对这些网页的未预期更改。
<priority> 可选

此网址的优先级是相对于您网站上其他网址的优先级而言的。有效值范围从 0.0 到 1.0。该值不会影响您的网页与其他网站上网页的比较结果,而只是告知搜索引擎您认为哪些网页对抓取工具来说最为重要。

一个网页的默认优先级为 0.5。

请注意,为网页指定的优先级并不会影响网址在搜索引擎结果页上的排名。搜索引擎在同一网站上选择不同网址时会使用此信息,因此,您可以使用此标记增加最重要的网页在搜索索引中显示的可能性。

另请注意,为网站中的所有网址都指定高优先级并不会带来什么好处。因为优先级是相对的,只用于在您网站的网址之间进行选择。

返回页首
实体转义

Sitemap 文件必须以 UTF-8 编码(通常在保存文件时可以这么做)。对于所有的 XML 文件,任何数据数值(包括网址)都应对下表中列出的字符使用实体转义码。
字符 转义码
& 符号 & &amp;
单引号 ‘ &apos;
双引号 ” &quot;
大于 > &gt;
小于 < &lt;

此外,所有网址(包括 Sitemap 的网址)都必须经过网址转义并编码,以便它们所在网络服务器可以进行读取。不过,如果您使用任何类型的脚本、工具或日志文件来生成网址(除手动输入之外的任何方法),通常系统已经替您完成了这部分工作。请仔细检查,确保网址符合 RFC-3986 URI 标准、RFC-3987 IRI 标准,以及 XML 标准。

以下是使用非 ASCII 字符 (ü) 以及要求实体转义字符 (&) 的网址:

http://www.example.com/ümlat.html&q=name

以下是 ISO-8859-1 编码(用于使用该编码的服务器上的托管)且网址转义过的同一网址:

http://www.example.com/%FCmlat.php&q=name

以下是 UTF-8 编码的(用于使用该编码的服务器上的托管)以及网址转义过的同一网址:

http://www.example.com/%C3%BCmlat.html&q=name

以下是经过实体转义的同一网址:

http://www.example.com/%C3%BCmlat.html&q=name

XML Sitemap 示例

下例显示了一个 XML 格式的 Sitemap。示例中的 Sitemap 包含少量的网址,每个网址都使用不同的一组可选参数。

<?xml version=”1.0″ encoding=”UTF-8″?>
<urlset xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9″>
<url>
<loc>http://www.example.com/</loc>
<lastmod>2005-01-01</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
<url>
<loc>http://www.example.com/catalog?item=12&amp;desc=vacation_hawaii</loc>
<changefreq>weekly</changefreq>
</url>
<url>
<loc>http://www.example.com/catalog?item=73&amp;desc=vacation_new_zealand</loc>
<lastmod>2004-12-23</lastmod>
<changefreq>weekly</changefreq>
</url>
<url>
<loc>http://www.example.com/catalog?item=74&amp;desc=vacation_newfoundland</loc>
<lastmod>2004-12-23T18:00:15+00:00</lastmod>
<priority>0.3</priority>
</url>
<url>
<loc>http://www.example.com/catalog?item=83&amp;desc=vacation_usa</loc>
<lastmod>2004-11-23</lastmod>
</url>
</urlset>

返回页首
使用 Sitemap 索引文件(对多个 Sitemap 文件进行分组)

您可以提供多个 Sitemap 文件,但每个 Sitemap 文件包含的网址不得超过 50,000 个,并且文件不得超过 10MB(10,485,760 字节)。如果您愿意,可以使用 gzip 压缩 Sitemap 文件,以减少带宽要求;但是解压缩后的 Sitemap 文件不得超过 10MB。如果要列出 50,000 个以上的网址,您需要创建多个 Sitemap 文件。

如果您确实提供多个 Sitemap,则应当在 Sitemap 索引文件中列出每个 Sitemap 文件。Sitemap 索引文件中最多可列出 50,000 个 Sitemap,文件不得超过 10MB(10,485,760 字节),并且是可以压缩的。您可以具有多个 Sitemap 索引文件。Sitemap 索引文件的 XML 格式与 Sitemap 文件的 XML 格式非常相似。

Sitemap 索引文件必须:

* 以 <sitemapindex> 开始标记作为开始,以 </sitemapindex> 结束标记作为结束。
* 每个 Sitemap 包含一个<sitemap> 条目作为 XML 父标记。
* 每个 <sitemap> 父标记包含一个 <loc> 子标记条目。

可选的 <lastmod> 标记同样适用于 Sitemap 索引文件。

注意:Sitemap 索引文件只能指定与其位于同一网站的 Sitemap。例如,http://www.yoursite.com/sitemap_index.xml 可包含 http://www.yoursite.com 上的Sitemap,但不能包含 http://www.example.com 或 http://yourhost.yoursite.com 上的 Sitemap。与 Sitemap 一样,Sitemap 索引文件也必须为 UTF-8 编码。
XML Sitemap 索引示例

下例显示包含两个 Sitemap 的 Sitemap 索引文件:

<?xml version=”1.0″ encoding=”UTF-8″?>
<sitemapindex xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9″>
<sitemap>
<loc>http://www.example.com/sitemap1.xml.gz</loc>
<lastmod>2004-10-01T18:23:17+00:00</lastmod>
</sitemap>
<sitemap>
<loc>http://www.example.com/sitemap2.xml.gz</loc>
<lastmod>2005-01-01</lastmod>
</sitemap>
</sitemapindex>

注意:与 XML 文件中的所有值一样,Sitemap 网址必须经过实体转义。
Sitemap 索引 XML 标记定义
属性 说明
<sitemapindex> 必填 压缩文件中所有 Sitemap 的相关信息。
<sitemap> 必填 压缩个别 Sitemap 的相关信息。
<loc> 必填

识别 Sitemap 的位置。

此位置可以为 Sitemap、Atom 文件、RSS 文件或简单的文本文件。
<lastmod> 可选

识别相对 Sitemap 文件的修改时间。它与该 Sitemap 中列出的任一网页的更改时间不相符。lastmod 标记的值应采用 W3C 日期时间 格式。

通过提供最近修改的时间戳,您可以让搜索引擎抓取工具只检索索引中的 Sitemap 子集,也就是说,抓取工具只检索某个特定日期之后修改的 Sitemap。通过这一递增的 Sitemap 提取机制,可以快速发现超大型网站上的新网址。

返回页首
其他 Sitemap 格式

Sitemap 协议可让您向搜索引擎提供有关您网页的详细信息,而且我们也建议您使用该协议,因为除网址之外,您还可以提供更多网页信息。不过,除了 XML 协议,我们还支持 RSS 供稿和文本文件,这两者所能提供的信息比较有限。
联合供稿

您可以提供 RSS(真正简单联合供稿系统)2.0、Atom 0.3 或 1.0 供稿。通常,只有您的网站已有联合供稿时才能使用此格式。请注意,此方法可能无法让搜索引擎了解您网站中的所有网址,因为供稿可能只提供最近访问的网址的信息,但搜索引擎仍然可在正常抓取过程中使用该信息通过跟踪供稿中的网页内部链接找到您网站的其他网页。请确保该供稿位于您希望搜索引擎抓取的最高一级目录。搜索引擎从供稿中抽取的信息如下:

* <link> 字段 – 表示网址
* 修改日期字段(RSS 供稿源的 <pubDate> 字段和 Atom 供稿源的 <modified> 日期)– 表示每个网址上次修改的时间。可以根据需要使用修改日期字段。

文本文件

您可以提供纯文本文件,其中每行包含一个网址。此文本文件需要遵循以下指南:

* 文本文件每行都必须有一个网址。网址中不能有换行。
* 您必须指定完整的网址,包括 http。
* 每个文本文件最多可包含 50,000 个网址,并且不得超过 10MB(10,485,760 字节)。如果网站所包含的网址超过 50,000 个,则可以将列表分割成多个文本文件,然后分别添加每个文件。
* 文本文件需使用 UTF-8 编码。在保存文件时您可指明此项(例如,在记事本中,此项会在“另存为”对话框中的编码菜单中列出)。
* 文本文件不应包含网址列表以外的任何信息。
* 此文本文件不应包含任何标题或注脚信息。
* 如果愿意,您可以使用 gzip 压缩 Sitemap 文本文件,以减少带宽要求。
* 您可以随意为此文本文件命名。请检查并确保您的网址符合 RFC-3986 标准中的 URI 规定和 RFC-3987 标准中的 IRI 规定。
* 您应该将文本文件上传至您希望搜索引擎抓取的最高级别的目录,并确保在文本文件中未列出位于更高级别目录的网址。

文本文件的示例条目如下所示。

http://www.example.com/catalog?item=1

http://www.example.com/catalog?item=11

返回页首
Sitemap 文件位置

Sitemap 文件的位置决定该 Sitemap 中可以包含的网址组。位于 http://example.com/catalog/sitemap.xml 的 Sitemap 文件可以包含任何以 http://example.com/catalog/ 开头的网址,但不能包含以 http://example.com/images/ 开头的网址。

如果您有更改 http://example.org/path/sitemap.xml 的权限,那么应该也可以提供前缀为 http://example.org/path/ 的网址信息。在 http://example.com/catalog/sitemap.xml 中,视为有效的网址示例包括:

http://example.com/catalog/show?item=23
http://example.com/catalog/show?item=233&user=3453

http://example.com/catalog/sitemap.xml 中无效的网址包括:

http://example.com/image/show?item=23
http://example.com/image/show?item=233&user=3453
https://example.com/catalog/page1.html

注意,这表示 Sitemap 中列出的所有网址都必须使用相同的协议(在本例中为 http)并位于在 Sitemap 所在的主机上。例如,如果 Sitemap 位于 http://www.example.com/sitemap.xml,则不能包含 http://subdomain.example.com 上的网址。

被认定为无效的网址将不再作进一步考虑。强烈建议将 Sitemap 放在网络服务器的根目录处。例如,如果网络服务器位于 example.com,则 Sitemap 索引文件应位于 http://example.com/sitemap.xml。在某些情况下,您需要针对不同的路径创建不同的 Sitemap,例如,当您公司的安全许可对应不同的目录划分写入权限时。

如果您使用带端口号的路径提交 Sitemap,那么 Sitemap 文件中列出的每个网址中都应包含该端口号,作为路径的一部分。例如,如果 Sitemap 位于 http://www.example.com:100/sitemap.xml,那么 Sitemap 中列出的每个网址必须以 http://www.example.com:100 开头。
Sitemap & 交叉提交

若要从一个主机为多个主机提交 Sitemap,对于要在 Sitemap 中提交网址的这些主机,需要证明您具有其所有权。请看下面的示例。我们假定您要为 3 个主机提交 Sitemap:

www.host1.com,Sitemap 文件 sitemap-host1.xml
www.host2.com,Sitemap 文件 file sitemap-host2.xml
www.host3.com,Sitemap 文件 file sitemap-host3.xml

而且,您想将三个 Sitemap 全部放在一个主机上:www.sitemaphost.com。因此,Sitemap 的网址将是:

http://www.sitemaphost.com/sitemap-host1.xml
http://www.sitemaphost.com/sitemap-host2.xml
http://www.sitemaphost.com/sitemap-host3.xml

默认情况下,这样会出现“交叉提交”的错误,因为您在试图使用 www.sitemaphost.com 上存放的 Sitemap 提交 www.host1.com 的网址(另外两个主机情况相同)。避免此错误的方法之一是证明您具有 www.host1.com 的所有权(即有权修改文件)。另一种方法是在 www.host1.com 上修改 robots.txt 文件,使其指向 www.sitemaphost.com 中的 Sitemap。

在此示例中,http://www.host1.com/robots.txt 中的 robots.txt 文件应包含一行“Sitemap: http://www.sitemaphost.com/sitemap-host1.xml”。通过修改 www.host1.com 上的 robots.txt 文件,并将其指向 www.sitemaphost.com 中的 Sitemap,可间接证明您具有 www.host1.com 的所有权。换言之,管理 www.host1.com 上 robots.txt 文件的人认为 http://www.sitemaphost.com/sitemap-host1.xml 上的 Sitemap 中包含 www.host1.com 的网址。对于其他两台主机,可以重复相同的步骤。

现在您可以在 www.sitemaphost.com 上提交 Sitemap 了。

当某主机的 robots.txt(即 http://www.host1.com/robots.txt)指向另一主机上的 Sitemap 或 Sitemap 索引时;对于每个目标 Sitemap(如 http://www.sitemaphost.com/sitemap-host1.xml),其中的所有网址均属于指向该 Sitemap 的主机。原因如上所述,Sitemap 中的网址只能来自于同一个主机。

返回页首
验证您的 Sitemap

下列 XML 架构定义可以出现在 Sitemap 文件中的元素和属性。可从以下链接下载此架构:

对于 Sitemap: http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd
对于 Sitemap 索引文件: http://www.sitemaps.org/schemas/sitemap/0.9/siteindex.xsd

有多种工具可帮助您根据此架构来验证您的 Sitemap 结构。在下面的每一个位置您都可以找到 XML 相关的工具列表:

http://www.w3.org/XML/Schema#Tools
http://www.xml.com/pub/a/2000/12/13/schematools.html

要针对某个架构验证 Sitemap 或 Sitemap 索引文件,XML 文件需要附加标头,如下所示。

Sitemap:

<?xml version=’1.0′ encoding=’UTF-8′?>
<urlset xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”
xsi:schemaLocation=”http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd”
xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9″>
<url>

</url>
</urlset>

Sitemap 索引文件:

<?xml version=’1.0′ encoding=’UTF-8′?>
<sitemapindex xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”
xsi:schemaLocation=”http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/siteindex.xsd”
xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9″>
<sitemap>

</sitemap>
</sitemapindex>

返回页首
扩展 Sitemap 协议

您可以使用自己的命名空间来扩展 Sitemap 协议。只需在根元素指定此命名空间即可。例如:

<?xml version=’1.0′ encoding=’UTF-8’?>
<urlset xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”
xsi:schemaLocation=”http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd”
xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9″
xmlns:example=”http://www.example.com/schemas/example_schema”> <!– namespace extension –>
<url>
<example:example_tag>

</example:example_tag>

</url>
</urlset>

返回页首
通知搜索引擎抓取工具

创建 Sitemap 文件并将其放在网络服务器上之后,您需要将该 Sitemap 的位置告知支持此协议的搜索引擎。为此,请按以下步骤操作:

* 通过搜索引擎的提交界面提交
* 在网站 robots.txt 文件中指定位置
* 发送 HTTP 请求

然后,搜索引擎就可以检索您的 Sitemap 并将网址提供给抓取工具抓取。
通过搜索引擎的提交界面提交 Sitemap

要直接将 Sitemap 提交到搜索引擎以便接受状态信息与任何处理错误,请参阅每个搜索引擎的文档。
在 robots.txt 文件中指定 Sitemap 的位置。

您可以使用 robots.txt 文件指定 Sitemap 的位置。为此,只需添加下列行:

Sitemap: http://www.example.com/sitemap.xml

此指令不受 user-agent 行的影响,因此可放在文件中的任意位置。如果您有 Sitemap 索引文件,可在其中加入该文件的位置。您不必在索引文件中列出每个单独的 Sitemap。

在每个 robots.txt 文件中可以指定多个 Sitemap 文件。

Sitemap: http://www.example.com/sitemap-host1.xml
Sitemap: http://www.example.com/sitemap-host2.xml

通过 HTTP 请求提交 Sitemap

要使用 HTTP 请求提交 Sitemap(使用搜索引擎提供的网址替换 <searchengine_URL>),请将请求发送到下列网址:

<searchengine_URL>/ping?sitemap=sitemap_url

例如,如果 Sitemap 位于http://www.example.com/sitemap.gz,则网址将变为:

<searchengine_URL>/ping?sitemap=http://www.example.com/sitemap.gz

网址编码 /ping?sitemap=: 之后的所有内容

<searchengine_URL>/ping?sitemap=http%3A%2F%2Fwww.yoursite.com%2Fsitemap.gz

您可以使用 wget、curl 或其他您选择的机制发出 HTTP 请求。请求成功的话会返回 HTTP 200 回应代码;如果收到其他回应,则应重新提交请求。HTTP 200 回应代码仅表示搜索引擎已收到您的 Sitemap,并不表示 Sitemap 本身或其中包含的网址有效。完成此操作的简单方法是设置自动执行的任务,定期生成并提交 Sitemap。
注意:如果要提供 Sitemap 索引文件,则只需发出一个包含 Sitemap 索引文件位置的 HTTP 请求即可,而无须为索引中列出的每个 Sitemap 发出单独的请求。

Expires与ETag

2015年9月20日 评论已被关闭

Expires与ETag

http://blog.itpub.net/27043155/viewspace-733095/

在Nginx中没有使用Etag头,安装Nginx的创始人Igor Sysoev的观点“对于静态资源而已,看不出Etag比Last-Modified好”,因此在Nginx中就没有用Etag。但是Etag也有自己的独到之处,它可以解决Last-Modified无法解决的问题Etag。

 

按照业界的分析有三种情况:

 

下面是文件属性的状态参数

 

[root@master ~]# stat README

File: `README’

Size: 2075            Blocks: 16         IO Block: 4096   regular file

Device: fd00h/64768d    Inode: 15466845    Links: 1

Access: (0644/-rw-r–r–)  Uid: (    0/    root)   Gid: (    0/    root)

Access: 2011-07-28 21:05:00.000000000 +0800

Modify: 2011-07-28 21:05:00.000000000 +0800

Change: 2011-11-11 11:27:18.000000000 +0800

 

u       对于修改非常频繁的文件,可能会在1秒内修改多次,由于Last-Modified是基于秒级检测的,说到根源是由于它检测的依据是被访问文件修改时间的Linux系统的时间戳,因此在秒内修改的情况下是Last-Modified无法检测出的。对于这种情况,我认为就没有没有启用缓存了。

 

u       对于周期性改变的文件,这种情况很常见,通常文件内容并没有发生改变而只是文件的Modify的改变,如果想测试这种情况,可也使用touch命令来touch一个已经存在的文件来测试。文件的内容并未改变,但是依据Last-Modified的原理需要重新获取。

 

u       有些无法精确到文件的最后修改时间,这种情况不是很多。

 

这两个Http头都是用于有效控制客户端缓存的,在Nginx中可也通过以下配置指令来实现:

 

location / {

root   html;

index  index.html index.htm;

expires 10d;

FileETag on;

}

 

第一次访问该目录下的网页时响应头如下:

 

 

 

再次访问的请求头和响应头如下:

 

 

 

再次访问的请求头和响应头如下:

 

 

 

分析这三次访问,以Expires为缓存的方式是使用了时间缓存,即按照RFC2616对HTTP协议的规定,在客户端第二次向服务器发出请求时,对于第一次访问请求的资源如果响应状态为200的资源,那么在这次请求中将会添加一个新的请求头:If-Modified-Since,故名思议,就是询问服务器从这个时间起,或者说是以这个时间为分割点,在这时间点之前有没有修改过这个文档,如果没有修改,那么发挥的http状态代码是304.并且同时再次发回响应头Last-Modified,注意这两个头的时间完全相同。

 

这就是Expires的原理。

 

而Etag的工作原理则与Expires完全不同,按照HTTP协议的规定,对于Etag的值么有过的的规定,而只是规定了要将Etag的值放置在一对引号(””)之内。因此在开发上就灵活了很多。在后面会讲到Nginx的第三方模块nginx-static-etags模块来实现对静态文件提供Etag。

 

它的原理就是通过检查这个一对引号(””)之内的值,或者是说有引号之内定义的值(就是说由变量生成的值,例如URI、文件大小等等,这由具体的开发来决定,如果你对开发感兴趣,那么可以查看nginx-static-etags的源代码,另外,如果需要自己设置If-None-Match匹配的值,就是说在nginx-static-etags模块中由etag_format指令产生的格式,那么也可以使用Nginx提供的变量来实现)。

 

Etag的检测是使用了If-None-Match头,在客户端第一次访问一个页面时,在服务器的响应头中会发送回一个叫做Etag的响应头,在前面的截图中我们也看到过,在第二次对同一个页面发出请求是在请求头中会有一个If-None-Match头,如果与服务器端再次生成的Etag匹配,那么表示请求的页面并没有改变,而是以304代码响应,同时再响应头中再次发回If-None-Match头。

 

这里就需要说一点,使用了Etag是有代价的(无论多少总是有的),它有个产生Etag和比较Etag的过程,因此会占用CPU资源。

 

最后一个点需要说的是,在我们同时使用了Expires和Etag之后,没有谁优先的问题,而是满足两者才会做出决定。

 

CSS中!important的使用

2015年9月14日 评论已被关闭

CSS中!important的使用

http://www.cnblogs.com/yudy/archive/2013/05/27/3102825.html

本篇文章使用最新的IE10以及firefox与chrome测试(截止2013年5月27日22:23:22)

CSS的原理:

我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < 元素style中的属性,但是如果使用!important,事情就会变得不一样。

首先,先看下面一段代码:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试Css中的!Important区别</title> 
</head> 
<style type="text/css">
.testClass{ 
color:blue !important;
}
</style>
<body>
    <div class="testClass" style="color:red;">
        测试Css中的Important
    </div>
</body>
</html>

虽然元素的style中有testClass类的定义,但是在上面的css定义中的用!important限定的定义却是优先级最高的,无论是在ie6-10或者Firefox和Chrome表现都是一致的,都显示蓝色。

这种情况也同时可以说明ie6是可以识别!important的,只是这个是ie6的一个缺陷吧。如果写成下面的样式,ie6是识别不出来的:

.testClass{ 
color:blue !important;
color:red;
}

这样,在ie6下展示的时候会显示成红色。

当然,也可以通过以下方式来让ie6识别:

.testClass{
color:blue !important;
}
.testClass{
color:red;
}

通过以上方式也是可以让ie6显示成蓝色的。

以上实例说明使用!important的css定义是拥有最高的优先级的。只是在ie6下出了一点小的bug,注意书写方式一般可以轻松避开的。

HTTP 405 错误 – 方法不被允许 (Method not allowed)

2015年9月11日 评论已被关闭

HTTP 405 错误 – 方法不被允许 (Method not allowed)

http://www.cnblogs.com/pinocchioatbeijing/articles/2375139.html

HTTP 405 错误 – 方法不被允许 (Method not allowed)【转载】 – pinocchioatbeijing – 博客园

介绍

HTTP 协议定义一些方法,以指明为获取客户端(如您的浏览器或我们的 CheckUpDown 机器人)所指定的具体网址资源而需要在 Web 服务器上执行的动作。则这些方法如下:

  • OPTIONS( 选项 ) :查找适用于一个特定网址资源的通讯选择。 在不需执行具体的涉及数据传输的动作情况下, 允许客户端来确定与资源相关的选项以及 / 或者要求, 或是一个服务器的性能。
  • GET( 获取 ) :检索由网址资源所确定的信息,如获取一个特定的网页或图片。这是最常用的方法。
  • HEAD( 头 ) :除了服务器只反馈标头信息而不是网址资源所确定的信息本身外, 基本同于 GET ( 获取 ) 。 可用于获取一个请求所要求的响应实体的元信息 ( metainformation) ,而不需传输响应实体本身。 经常用来测试超文本链接的有效性, 可达性, 和最近的修改。
  • POST( 投寄 ) :将数据提交到 Web 服务器,如 1 )在电子公告板,新闻组中,或向 邮件名单发送信息, 2 )提供输入数据 – 通常由一个公共网关接口(CGI) 表, 到 一个数据处理进程, 3 )直接将记录添加到一个数据库中。
  • PUT( 放置 ) :将一个具体网址的数据设置( 置入 / 替换)成客户提交的新数据。例如,将新的网页上载给服务器。
  • DELETE( 删除 ) :删除与网址资源相关的数据。例如,删除网页。
  • TRACE( 跟踪 ) :运行请求信息的一个远程应用层回送。 实际上是一个 ‘ping’, 用以测试 Web 服务器正在从客户端接收什么数据。
  • CONNECT( 连接 ) :保留以便通过代理服务器和隧道一起使用(如 SSL )。这种方法只在 HTTP 1.1 版中定义, 而在先前的 1.0 版中却没有。

所有 Web 服务器都可以被设置为允许或不允许任何方法。例如,如果一个 Web 服务器是 ‘ 只读 ‘ (客户端不能修改 Web 服务器上的网址资源) ,那么它可以被设置为不允许 PUT 和 DELETE 方法。 同样,如果没有用户输入(所有的网页都是静态的) , 那么 POST 方法可设置为不允许。 所以, 405 错误可能会因 Web 服务器没有被设置为从客户端接受输入数据而出现。 另外, 如果客户端对请求中指明的具体网址资源没有足够的权力, 该错误也会出现。

HTTP 循环中的 405 错误

任何客户端 ( 例如您的浏览器或我们的 CheckUpDown 机器人 ) ,都需要通过以下循环:

  • 从您站点的 IP 名称 ( 即您站点的网址-URL, 不带起始的 ‘http://’) 获得一个 IP 地址。这个对应关系 ( 即由 IP 名称向 IP 地址转换的对应关系 ) 由域名服务器 (DNSs) 提供。
  • 打开一个 IP 套接字 (socket) 连接到该 IP 地址。
  • 通过该套接字写 HTTP 数据流。
  • 从您的Web服务器接受响应的 HTTP 数据流。该数据流包括状态编码, 其值取决于 HTTP 协议 。 解析该数据流得到 状态编码和其他有用信息。

该错误在以上所述的最后一步生成,即当客户端收到 HTTP 状态编码并识别其为 ‘405’ 时

解决 405 错误 – 一般方法

405 错误经常和 POST 方法同时出现。 您可能在您的网站上尝试引入某种输入表格,但并非所有的互联网服务供应商 (ISPs) 都 允许处理该表格所需的 POST 方法。

所有 405 错误都可以追综到 Web 服务器设置和控制访问网站内容的安全管理,因此您的 ISP 应该很容易地予以解释。

解决 405 错误 – CheckUpDown

这个错误应该永远不会发生在您的 CheckUpDown 帐户上。 如果出现了, 则通常表明我方系统或是管理您网站的 Web 服务器系统在编程上有缺陷。 我们只使用 GET 方法,所有 Web 服务器都应允许(否则, 任何人无论如何都不能看到您的网站) 。

只要您遇到 405 错误,就请与我们联系(最好通过电子邮件) – 您自己无法解决此类错误。我们必须和您的 ISP 及 Web 服务器软件供应商联络,以确认产生该错误的确切原因。

本文来源:http://www.checkupdown.com/status/E405_cn.html

CSRF 是什么?

2015年9月10日 评论已被关闭

CSRF 是什么?
http://segmentfault.com/q/1010000000713614
Cross-site request forgery 跨站请求伪造,也被称为 “one click attack” 或者 session riding,通常缩写为 CSRF 或者 XSRF,是一种对网站的恶意利用。CSRF 则通过伪装来自受信任用户的请求来利用受信任的网站。

CSRF 攻击类似 XSS 攻击,都是在页面中嵌入特殊部分引诱或强制用户操作从而得到破坏等的目的,区别就是迫使用户 访问特定 URL / 提交表单 还是执行 javascript 代码。

为什么叫 跨站请求 攻击?
从字面意思就可以理解:当你访问 fuck.com 黑客页面的时候,页面上放了一个按钮或者一个表单,URL/action 为 http://you.com/delete-myself,这样引导或迫使甚至伪造用户触发按钮或表单。在浏览器发出 GET 或 POST 请求的时候,它会带上 you.com 的 cookie,如果网站没有做 CSRF 防御措施,那么这次请求在 you.com 看来会是完全合法的,这样就会对 you.com 的数据产生破坏。

如何防止 CSRF ?
CSRF 主流防御方式是在后端生成表单的时候生成一串随机 token ,内置到表单里成为一个字段,同时,将此串 token 置入 session 中。每次表单提交到后端时都会检查这两个值是否一致,以此来判断此次表单提交是否是可信的。提交过一次之后,如果这个页面没有生成 CSRF token ,那么 token 将会被清空,如果有新的需求,那么 token 会被更新。

攻击者可以伪造 POST 表单提交,但是他没有后端生成的内置于表单的 token,session 中有没有 token 都无济于事。

CSRF 攻击的对象

2015年9月10日 评论已被关闭

CSRF 攻击的对象

http://segmentfault.com/q/1010000000713614

在讨论如何抵御 CSRF 之前,先要明确 CSRF 攻击的对象,也就是要保护的对象。从以上的例子可知,CSRF
攻击是黑客借助受害者的 cookie 骗取服务器的信任,但是黑客并不能拿到 cookie,也看不到 cookie
的内容。另外,对于服务器返回的结果,由于浏览器同源策略的限制,黑客也无法进行解析。因此,黑客无法从返回的结果中得到任何东西,他所能做的就是给服务器发送请求,以执行请求中所描述的命令,在服务器端直接改变数据的值,而非窃取服务器中的数据。所以,我们要保护的对象是那些可以直接产生数据改变的服务,而对于读取数据的服务,则不需要进行
CSRF 的保护。比如银行系统中转账的请求会直接改变账户的金额,会遭到 CSRF
攻击,需要保护。而查询余额是对金额的读取操作,不会改变数据,CSRF 攻击无法解析服务器返回的结果,无需保护。
http://www.ibm.com/developerworks/cn/web/1102_niugang_csrf/

由此,GET 請求不需要 CSRF Token(因爲寫操作不應該用 GET),POST 請求在執行寫操作時依舊需要 CSRF Token。

301、404、200、304等HTTP状态

2015年9月10日 评论已被关闭

301、404、200、304等HTTP状态

http://blog.csdn.net/zll01/article/details/5018413

在网站建设的实际应用中,容易出现很多小小的失误,就像mysql当初优化不到位,影响整体网站的浏览效果一样,其实,网站的常规http状态码的表现也是一样,Google无法验证网站几种解决办法,提及到由于404状态页面设置不正常,导致了google管理员工具无法验证的情况,当然,影响的不仅仅是这一方面,影响的更是网站的整体浏览效果。因此,比较清楚详细的了解http状态码的具体含义,对于一个网站站长来说,这是很有必要俱备的网站制作基础条件。

如果某项请求发送到您的服务器要求显示您网站上的某个网页(例如,用户通过浏览器访问您的网页或 Googlebot 抓取网页时),服务器将会返回 HTTP 状态码响应请求。

此状态码提供关于请求状态的信息,告诉 Googlebot 关于您的网站和请求的网页的信息。

一些常见的状态码为:

  • 200 – 服务器成功返回网页
  • 404 – 请求的网页不存在
  • 503 – 服务器超时

下面提供 HTTP 状态码的完整列表。点击链接可了解详情。您也可以访问 HTTP 状态码上的 W3C 页获取更多信息

1xx(临时响应)
表示临时响应并需要请求者继续执行操作的状态码。

100(继续) 请求者应当继续提出请求。服务器返回此代码表示已收到请求的第一部分,正在等待其余部分。
101(切换协议) 请求者已要求服务器切换协议,服务器已确认并准备切换。

2xx (成功)

表示成功处理了请求的状态码。

200(成功) 服务器已成功处理了请求。通常,这表示服务器提供了请求的网页。如果是对您的 robots.txt 文件显示此状态码,则表示 Googlebot 已成功检索到该文件。
201(已创建) 请求成功并且服务器创建了新的资源。
202(已接受) 服务器已接受请求,但尚未处理。
203(非授权信息) 服务器已成功处理了请求,但返回的信息可能来自另一来源。
204(无内容) 服务器成功处理了请求,但没有返回任何内容。
205(重置内容) 服务器成功处理了请求,但没有返回任何内容。与 204 响应不同,此响应要求请求者重置文档视图(例如,清除表单内容以输入新内容)。
206(部分内容) 服务器成功处理了部分 GET 请求。

3xx (重定向)
要完成请求,需要进一步操作。通常,这些状态码用来重定向。Google 建议您在每次请求中使用重定向不要超过 5 次。您可以使用网站管理员工具查看一下 Googlebot 在抓取重定向网页时是否遇到问题。诊断下的网络抓取页列出了由于重定向错误导致 Googlebot 无法抓取的网址。

300(多种选择) 针对请求,服务器可执行多种操作。服务器可根据请求者 (user agent) 选择一项操作,或提供操作列表供请求者选择。
301(永久移动) 请求的网页已永久移动到新位置。服务器返回此响应(对 GET 或 HEAD 请求的响应)时,会自动将请求者转到新位置。您应使用此代码告诉 Googlebot 某个网页或网站已永久移动到新位置。
302(临时移动) 服务器目前从不同位置的网页响应请求,但请求者应继续使用原有位置来响应以后的请求。此代码与响应 GET 和 HEAD 请求的 301 代码类似,会自动将请求者转到不同的位置,但您不应使用此代码来告诉 Googlebot 某个网页或网站已经移动,因为 Googlebot 会继续抓取原有位置并编制索引。
303(查看其他位置) 请求者应当对不同的位置使用单独的 GET 请求来检索响应时,服务器返回此代码。对于除 HEAD 之外的所有请求,服务器会自动转到其他位置。
304(未修改) 自从上次请求后,请求的网页未修改过。服务器返回此响应时,不会返回网页内容。

如果网页自请求者上次请求后再也没有更改过,您应将服务器配置为返回此响应(称为 If-Modified-Since HTTP 标头)。服务器可以告诉 Googlebot 自从上次抓取后网页没有变更,进而节省带宽和开销。

.

305(使用代理) 请求者只能使用代理访问请求的网页。如果服务器返回此响应,还表示请求者应使用代理。
307(临时重定向) 服务器目前从不同位置的网页响应请求,但请求者应继续使用原有位置来响应以后的请求。此代码与响应 GET 和 HEAD 请求的 <a href=answer.py?answer=>301</a> 代码类似,会自动将请求者转到不同的位置,但您不应使用此代码来告诉 Googlebot 某个页面或网站已经移动,因为 Googlebot 会继续抓取原有位置并编制索引。

4xx(请求错误)
这些状态码表示请求可能出错,妨碍了服务器的处理。

400(错误请求) 服务器不理解请求的语法。
401(未授权) 请求要求身份验证。对于登录后请求的网页,服务器可能返回此响应。
403(禁止) 服务器拒绝请求。如果您在 Googlebot 尝试抓取您网站上的有效网页时看到此状态码(您可以在 Google 网站管理员工具诊断下的网络抓取页面上看到此信息),可能是您的服务器或主机拒绝了 Googlebot 访问。
404(未找到) 服务器找不到请求的网页。例如,对于服务器上不存在的网页经常会返回此代码。

如果您的网站上没有 robots.txt 文件,而您在 Google 网站管理员工具“诊断”标签的 robots.txt 页上看到此状态码,则这是正确的状态码。但是,如果您有 robots.txt 文件而又看到此状态码,则说明您的 robots.txt 文件可能命名错误或位于错误的位置(该文件应当位于顶级域,名为 robots.txt)。

如果对于 Googlebot 抓取的网址看到此状态码(在”诊断”标签的 HTTP 错误页面上),则表示 Googlebot 跟随的可能是另一个页面的无效链接(是旧链接或输入有误的链接)。

405(方法禁用) 禁用请求中指定的方法。
406(不接受) 无法使用请求的内容特性响应请求的网页。
407(需要代理授权) 此状态码与 <a href=answer.py?answer=35128>401(未授权)</a>类似,但指定请求者应当授权使用代理。如果服务器返回此响应,还表示请求者应当使用代理。
408(请求超时) 服务器等候请求时发生超时。
409(冲突) 服务器在完成请求时发生冲突。服务器必须在响应中包含有关冲突的信息。服务器在响应与前一个请求相冲突的 PUT 请求时可能会返回此代码,以及两个请求的差异列表。
410(已删除) 如果请求的资源已永久删除,服务器就会返回此响应。该代码与 404(未找到)代码类似,但在资源以前存在而现在不存在的情况下,有时会用来替代 404 代码。如果资源已永久移动,您应使用 301 指定资源的新位置。
411(需要有效长度) 服务器不接受不含有效内容长度标头字段的请求。
412(未满足前提条件) 服务器未满足请求者在请求中设置的其中一个前提条件。
413(请求实体过大) 服务器无法处理请求,因为请求实体过大,超出服务器的处理能力。
414(请求的 URI 过长) 请求的 URI(通常为网址)过长,服务器无法处理。
415(不支持的媒体类型) 请求的格式不受请求页面的支持。
416(请求范围不符合要求) 如果页面无法提供请求的范围,则服务器会返回此状态码。
417(未满足期望值) 服务器未满足”期望”请求标头字段的要求。

5xx(服务器错误)
这些状态码表示服务器在处理请求时发生内部错误。这些错误可能是服务器本身的错误,而不是请求出错。

500(服务器内部错误) 服务器遇到错误,无法完成请求。
501(尚未实施) 服务器不具备完成请求的功能。例如,服务器无法识别请求方法时可能会返回此代码。
502(错误网关) 服务器作为网关或代理,从上游服务器收到无效响应。
503(服务不可用) 服务器目前无法使用(由于超载或停机维护)。通常,这只是暂时状态。
504(网关超时) 服务器作为网关或代理,但是没有及时从上游服务器收到请求。
505(HTTP 版本不受支持) 服务器不支持请求中所用的 HTTP 协议版本。

上书大部分实际内容源自googel管理员博客近日文章所引用的有关301说明的有些链接,感觉非常有用,因此收藏注释,以备以后警戒注意学习。合理利用这些状态码,避免错误利用,必将会为你的网站带来更佳的浏览者体会,得到更加亲和的搜索引擎收录,得到更准确的搜索引擎切入,从而,为你的网站发展,奠定坚实的发展基础。

 

 

******************************************************

转自http://www.gosoa.com.cn/Article/2009-11/2009-11-01-154.html

******************************************************

专访HTML5 Boilerplate项目核心成员——石川

2015年9月9日 评论已被关闭

专访HTML5 Boilerplate项目核心成员——石川

http://www.infoq.com/cn/news/2012/03/html5boilerplate-shichuan-interv

 

HTML5 Boilerplate项目是一个出色的前端开发框架,知乎上有一个话题介绍了该项目的特性。在项目的核心开发人员中,有一位华人,他就是石川。

前不久,InfoQ对石川进行了专访。

InfoQ:能否先介绍下您自己,以及您现在所从事的工作呢?

石川:我目前从事的工作主要是独立网络开发,设计自己的产品,写小说,用一年游牧世界。

在过去几年做了些比较公开的开源的项目,包括:

此外,我还受 Packt Publishing 邀请撰写,出版了关于移动网络的《HTML5 Mobile Development Cookbook》 一书。我还为Net Tuts等刊物写一些技术类文章

因为几年为一些国外企业做咨询顾问,积累了些知识,所以在闲暇之余帮w3ctech.com录制一系列 JavaScript,HTML5,Mobile 相关的公开课。

InfoQ:您觉得HTML 5中哪些部分是最重要,如果想要接触HTML 5可以如何着手呢?能否针对HTML 5的常见部分,例如Web Socket,Web Worker等等,提一些适用的场景呢?

石川:因为现在的网络已经大到很难一概而论。所以我觉得应该分为下面几类来说:

  • 应用程序 – Local Storage、Indexed DB还有File API都会对应用程序编写有用。
  • 游戏制作 – Canvas、WebGL适用于游戏制作。Web Sockets对网游特别是MMORPG类游戏很重要。
  • 移动网络 –  就移动网络而言,geolocation API等Device API适用于制作地图、团购类网站。
  • 网页编写 – 对传统信息类网站而言,Semantics和CSS3最为重要。

InfoQ:现在各浏览器及移动平台对于HTML 5的支持程度不一,甚至在国内还有低版本的IE无法摆脱,请问您认为如何在实际项目拥抱HTML 5才是最有效的方式呢?

石川:从技术层面上来说,这个并不是问题。使用 modernizr 一类的工具(包括在HTML5 Boilerplate 中),可以检测某个 HTML5 部分在浏览器本身的可用性。几乎所有HTML5常用的部分都有polyfill (一段代码或插件,提供开发者浏览器本身不能支持、提供的技术)。在http://html5please.com上面,开发者可以查找想要使用的 HTML5,CSS3 等功能,知道他们是否已经可以使用;若是,可以知道你应该如何使用它们,用什么 polyfills,如果不被支持,怎么解决。从中你也可以知道哪些需要谨慎使用,或者避免使用。如果决定使用,可以使用yepnope来在需要情况下加载 polyfills。

从市场角度,我觉得开发者应该对针对的用户群体来分析要不要使用一个HTML5的功能,如果使用,要不要考虑兼容问题。比如 Facebook 是最早不支持IE6的公司之一,由于他们拥有较大的市场份额,使得他们在一定程度上对想要支持的平台有着一定的主导权。Twitter 选的是中庸之道。他们没有完全取消对较老版本的浏览器支持,但同时在渐进增强 (progressive enhancement)。这样在不影响使用较老版本浏览器用户的基础上,使得使用新版浏览器的用户有更好的体验。Google 选择的是向后兼容(backward compatible), 但是定期提高对各浏览器最低版本要求的底线。

InfoQ:现在很多人把HTML 5在各个浏览器之间存在差异,归结为HTML5规范还没有正式推出。但是回首过往HTML 4正式发布后,浏览器的差异也还是有的。那么HTML5时代是否还是会存在这类问题?也就是说,就算HTML5正式出来了,还是每个浏览器有很大不同。相对于HTML4时代会有好转吗?

石川:从浏览器制造者来来,之前的很大的问题出自于微软的 IE 没有自动更新,而 Chrome, Firefox 和 Opera 都有自动更新。现在微软也加入了自动升级的行列,所以开发者对 HTML5 的发展应该是非常乐观的。

在市场中,大部分的网站是中小型企业以外包形式给广告公司来做的。这个行业中客户经理和顾问的水平参差不齐。在这样的情况下,开发者可能要加强沟通,根据不同客户的背景、要求、技术的革新与项目经理沟通。

InfoQ:请问您怎么看待Microdata? 很多人都说这东西目的是好的,意义是伟大的,但是操作和推广起来有难度(很少有网站愿意去做),您怎么觉得呢?

石川:Microformats 和 Microdata 在前些时候引起过一些非常大的争议。HTML5 Boilerplate 的组员 Paul Irish,Divya,包括我自己在内,认为作为开发者,多数人在实际操作中很少使用Microformats 和 Microdata,我觉得对 Microformats 和 Microdata 有一定的了解是好的,但是不觉得他们是 HTML5 中现阶段的重点。

但是以 Jeremy Keith 为主的很多开发者则提出过不同的观点,他和很多类似的前辈则认为Microformats 和 Microdata 应该得到积极的倡导。认为虽然现阶段存在不足,但是搜索引擎,web crawler,和浏览器可以从网页中提取和处理 Microdata ,并用它来为用户提供更丰富的浏览体验。

个人的结论是如果一个网站是以提供信息为主的,那么对 Microformats 和 Microdata 的使用可能会在未来产生一定好处,仍然坚持认为总体来说,特别是对应用为主的网站则意义不大。

InfoQ:怎么看待Mozilla的B2G,还有HP开源WebOS,还有微软大肆宣传的“可以用HTML 5技术给Win 8写应用”?您觉得基于HTML5技术做系统级别的应用程序靠谱吗?主要障碍会有哪些?

石川:我觉得用 HTML5 编写应用程序完全靠谱。但是各大公司推出的 SDK 就要对针对的用户而论。有些框架过于臃肿,有些则轻巧。总体来说,我觉得用 HTML5 编写是一件好事,因为 HTML5 的开源性,以及整个行业的共享文化,会加速科技的进步而且将渗透颠覆一些传统行业。

主要的障碍会来自开发者对复杂的 JavaScript 编写缺少了解。因为 JavaScript 已经不是一个简单的脚本语言,在它向一门专业的编程语言的过程中,一些对此了解不透彻的开发人员难免会遇到:

  1. 初学者可能对纯 JavaScript 的历史缺乏了解,以为这些框架和工具在 JavaScript 的基础上加了很多层复杂的概念,做了很多改变。
  2. 对于只对 JavaScript 有初步了解的开发者来说,可能学习并不是件容易的事。

InfoQ:目前用HTML5开发复杂应用的越来越多(游戏和应用等等), 但是HTML5以及JavaScript开发一直缺少好用的开发工具,未来这种状况是否能够改善?现在该如何应对这种情况呢?

石川:这个要看工具的定义。现在用于各种语言开发的工具基本分为两种。比如 Adobe 推出的 Flex Builder 和 SDK,前者是 GUI 工具,而后者则是非 GUI 工具。在对比较基础的、重复性的工作上 GUI 确实加快了开发速度。但是真正开发应用或游戏的人在大多数时间还是用 Code View, 而不是 GUI。

目前我们所说的 HTML5 以及 JavaScript 没有很好的开发工具,指的是 GUI 一类的。 其实非 GUI 但是很好用的工具是有的,比如在 JavaScript MVC 方面,工具有backbone.jsSpineSproutCore 等;在 MVVM 方面则有 Knockout JS;在CSS3 UI 方面有Twitter Bootstrap

Juho Vepsäläinenjswiki 对不同的 JavaScript 工具做了很全面地总结。Addy Osmani 也在Tools For jQuery Application Architecture – The Printable Chart 中很详细列出:如何搭配使用不同工具快速有效地制作出前端应用。

这个对中高级的开发者应该不是问题,是很容易面对的。但是对于初学者来说,就会有较高的门槛。我觉得这个不应该作为让开发者对 HTML5 以及 JavaScript 开发“望而却步”的原因,因为往往太好用的 IDE 会让后来学习的人懒得去研究这些技术的本质。所以抓住机会使用已有工具开发是可以做到有效的,同时也是个学习的过程。

InfoQ:HTML5游戏被讨论的很多,但是很多人觉得HTML5在游戏开发上永远也不是Flash和Unity3D等专业游戏开发工具/技术/引擎的对手,您怎么看?HTML5的安全性和源代码开放性是否适合网页游戏开发?它在哪些领域将可能取代Flash?

石川:跟欧美的开发者相比,国内 (或者说亚洲包括韩国)的 HTML5 开发者比较把注意力放在网游上,这当然与中国的特殊市场环境有着一定的关系。早在 HTML5 之前,因为知识产权及盗版等问题使得国内的游戏开发者将大多数的游戏开发精力放在网络上,现在 HTML5 的出现使得网络游戏有了新的开发平台。

我觉得短期内,HTML5 不会取代 Flash 。Adobe 目前决定将 Flash 的重点放在游戏的开发上,这无疑是出于市场考虑 (缩小范畴),Flash 孤注一掷在游戏上。但是 HTML5 肯定会扩大市场。现在已经有比较不错的工具比如LimeJS (免费), impactjs(商业)等。在 3D 方面,和 Unity3D 比,HTML5 的工具还有一定差距,但是随着 WebGL 的发展,可能会在未来拥有一定市场。

前些时候独立游戏工具制作者 Game Closure 因为在Google I/O 2011 时展出了他们的游戏工具半成品,之后拒绝了Zynga 收购而备受瞩目,Game Closure 推出了一系列的工具为游戏工具铺路:

  • js.io – 建立实时应用程序的 JavaScript Networking 库
  • webgl-2d – Canvas2D API in WebGL
  • hookbox – 一个Comet 服务器
  • orbited2 – 在每一个浏览器都可以使用

WebSocket开发者之一 @louisstow 刚刚(2012年3月11日)在他的博客文章上写到关于 Game Engines 的想法。

关于安全问题,在使用 Local Storage,Web Messeging 和 WebSocket  时,有一些需要注意的事项,比较具体的可以参考 Open Web Application Security Project (OWASP) 的文章。但由于大多数浏览器的及时升级,这些应该不会影响到开发。


石川的微博是:http://weibo.com/shichuan5,他的博客地址是:http://www.blog.highub.com/。欢迎大家关注石川和HTML5 BoilerPlate项目。

菜鸟学习bootstrap常用功能

2015年1月22日 评论已被关闭

菜鸟学习bootstrap常用功能
http://blog.csdn.net/q718330882/article/details/40429651

Bootstrap中文官网:http://v3.bootcss.com/components/
BootstrapCDN:
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
<link rel=”stylesheet” href=”http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css”>
<link rel=”stylesheet” href=”http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css”>
<!–[if lt IE 9]>
<script src=”https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js”></script>
<script src=”https://oss.maxcdn.com/respond/1.4.2/respond.min.js”></script>
<![endif]–>
<script src=”http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js”></script>
<script src=”http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js”></script>

导航条功能:
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
container-fluid ——- <code>container-fluid</code> 类用于 100% 宽度,占据全部视口(viewport)的容器。
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
<nav class=”navbar navbar-default navbar-fixed-top” role=”navigation”>
<div class=”container-fluid”>
<!– 屏幕小到一定的尺寸时候导航栏发生的变化 –>
<div class=”navbar-header”>
<button class=”navbar-toggle collapsed” data-target=”#navigation-list” data-toggle=”collapse” type=”button”>
<span class=”sr-only”>Toggle navigation</span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>
<a class=”navbar-brand” href=”/”>Bootstrap Web</a>
</div>
<!– 正常尺寸下的导航拦 –>
<div class=”collapse navbar-collapse” id=”navigation-list”>
<ul class=”nav navbar-nav”>
<li class=”active”><a href=”#”>开始</a></li>
<li><a href=”http://phalcon.framework.dev/Index/touch”>娱乐</a></li>
<li><a href=”http://phalcon.framework.dev/List”>列表</a></li>
<li><a href=”http://phalcon.framework.dev/List/display”>内容</a></li>
<li><a href=”#” data-target=”#about” data-toggle=”modal”>关于</a></li>
</ul>
<ul class=”nav navbar-nav navbar-right”>
<li><a href=”http://www.baidu.com”>百度</a></li>
<li><a href=”http://www.sina.con.cn”>新浪</a></li>
<li><a href=”http://cn.bing.com”>必应</a></li>
<li><a href=”http://phalcon.framework.dev/Index/login”>登录</a></li>
<?php } ?>
</ul>
</div>
</div>
</nav>
轮换图片
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
<!– 首页轮换图片 –>
<div id=”image-trun” class=”carousel slide” data-ride=”carousel”>
<!– Indicators –>
<ol class=”carousel-indicators”>
<li data-target=”#image-trun” data-slide-to=”0″ class=”active”></li>
<li data-target=”#image-trun” data-slide-to=”1″></li>
<li data-target=”#image-trun” data-slide-to=”2″></li>
</ol>
<!– Wrapper for slides –>
<div class=”carousel-inner” role=”listbox”>
<div class=”item active”>
<img src=”/img/one.gif” alt=”呵呵”>
<div class=”carousel-caption”>轮换图片1</div>
</div>
<div class=”item”>
<img src=”/img/two.gif” alt=”哈哈”>
<div class=”carousel-caption”>轮换图片2</div>
</div>
<div class=”item”>
<img src=”/img/three.gif” alt=”拉拉”>
<div class=”carousel-caption”>轮换图片3</div>
</div>
</div>
<!– Controls –>
<a class=”left carousel-control” href=”#image-trun” role=”button” data-slide=”prev”>
<span class=”glyphicon glyphicon-chevron-left”></span>
<span class=”sr-only”>上一个</span>
</a>
<a class=”right carousel-control” href=”#image-trun” role=”button” data-slide=”next”>
<span class=”glyphicon glyphicon-chevron-right”></span>
<span class=”sr-only”>下一个</span>
</a>
</div>
<!– 轮换图片 –>
栅格布局 + 图片:
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
<!– 纯图片 –>
<div class=”container”>
<hr class=”dirver”/>
<div class=”row”>
<div class=”col-xs-6 col-md-2″>
<a href=”#” class=”thumbnail”>
<img class=”image-responsive” src=”/img/ad1.jpg” alt=”喵星人”>
</a>
</div>

<div class=”col-xs-6 col-md-2″>
<a href=”#” class=”thumbnail”>
<img class=”image-responsive” src=”/img/ad2.jpg” alt=”喵星人”>
</a>
</div>

<div class=”col-xs-6 col-md-2″>
<a href=”#” class=”thumbnail”>
<img class=”image-responsive” src=”/img/ad3.jpg” alt=”喵星人”>
</a>
</div>

<div class=”col-xs-6 col-md-2″>
<a href=”#” class=”thumbnail”>
<img class=”image-responsive” src=”/img/ad4.jpg” alt=”喵星人”>
</a>
</div>

<div class=”col-xs-6 col-md-2″>
<a href=”#” class=”thumbnail”>
<img class=”image-responsive” src=”/img/ad5.jpg” alt=”喵星人”>
</a>
</div>

<div class=”col-xs-6 col-md-2″>
<a href=”#” class=”thumbnail”>
<img class=”image-responsive” src=”/img/ad6.jpg” alt=”喵星人”>
</a>
</div>
</div>
</div>
<!– 纯图片 –>

制作弹出框:
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
<!– 弹出框 –>
<li><a href=”#” data-target=”#about” data-toggle=”modal”>关于</a></li> <!– 一个data-target 属性指向对应的id即可 –>
<div class=”modal fade” id=”about”>
<div class=”modal-dialog”>
<div class=”modal-content”>
<div class=”modal-heading”>
<button type=”button” class=”close” data-dismiss=”modal”>
<span style=”padding-right:10px;” aria-hidden=”true”>×</span>
<span class=”sr-only”>Close</span>
</button>
<h3 class=”feature-heading”>传销<span class=”text-muted”>扰乱社会经济秩序影响安定团结</span></h3>
</div>
<div class=”modal-body”>
主要体大多数消费者或投资者的最终权益得不到保障。下面我们把传销与正常营销逐一对照,供大家辨别。
消费行为与经营行为模糊,传销者用一些“伎俩套路”,前期给你宣传的是投资经营行为,后来你不知不觉成为了消费者;或者宣传的是消费行为,后来让你变成了投资者;
甚至引用“消费资本化”之类令人模糊的概念,令你迷失在投资与消费之间,这样给你在法律上的维权带来很多困难(注:消费行为与投资经营行为是两个不同的法律概念,
适用法律分别是:《消费者权益保护法》和《合同法》)。
组织、领导以推销商品、提供服务、项目投资等经营活动为名,要求参加者以缴纳费用或者购买商品、服务、投资等方式获得加入资格。
</div>
<div class=”modal-footer”>
<button type=”button” class=”btn btn-default” data-dismiss=”modal”>Close</button>
<button type=”button” class=”btn btn-primary”>Save Changes</button>
</div>
</div>
</div>
</div>
<!– 弹出框 –>

bootstrap 进度条:
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
<div class=”container”>
<!– Bootstrap 进度条 –>

<div class=”progress”>
<div class=”progress-bar progress-bar-success” role=”progressbar” aria-valuenow=”20″ aria-valuemin=”0″ aria-valuemax=”100″ style=”width: 20%;”>
<span class=”sr-only”> 20% Complete</span>
</div>
</div>

<div class=”progress”>
<div class=”progress-bar progress-bar-info” role=”progressbar” aria-valuenow=”40″ aria-valuemin=”0″ aria-valuemax=”100″ style=”width: 40%;”>
<span class=”sr-only”>40% Complete</span>
</div>
</div>

<div class=”progress”>
<div class=”progress-bar progress-bar-warning” role=”progressbar” aria-valuenow=”60″ aria-valuemin=”0″ aria-valuemax=”100″ style=”width: 60%;”>Tip 60%</div>
</div>

<div class=”progress”>
<div class=”progress-bar progress-bar-danger” role=”progressbar” aria-valuenow=”80″ aria-valuemin=”0″ aria-valuemax=”100″ style=”width: 80%;”>Tip 80%</div>
</div>

<div class=”progress”>
<div class=”progress-bar” role=”progressbar” aria-valuenow=”100″ aria-valuemin=”0″ aria-valuemax=”100″ style=”width: 100%;”>Tip 100%</div>
</div>

<!– 进度条条纹效果 –>
<div class=”progress”>
<div class=”progress-bar progress-bar-success progress-bar-striped” role=”progressbar” aria-valuenow=”20″ aria-valuemin=”0″ aria-valuemax=”100″ style=”width: 20%;”>条纹效果</div>
</div>

<!– 动画效果 –>
<div class=”progress”>
<div class=”progress-bar progress-bar-info progress-bar-striped active” role=”progress” aria-valuenow=”40″ aria-valuemin=”0″ aria-valuemax=”100″ style=”width:40%”>动画效果</div>
</div>

<!– 堆叠效果 –>
<div class=”progress”>
<div class=”progress-bar” style=”width:20%”></div>
<div class=”progress-bar progress-bar-info progress-bar-striped” style=”width:20%”></div>
<div class=”progress-bar progress-bar-success progress-bar-striped active” style=”width:20%”></div>
<div class=”progress-bar progress-bar-danger progress-bar-striped active” style=”width:20%”></div>
<div class=”progress-bar progress-bar-warning progress-bar-striped” style=”width:20%”></div>
</div>

<!– Bootstrap 进度条 –>
bootstrap 选项卡:
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
<div class=”container”>
<ul class=”nav nav-tabs” role=”tablelist”>
<li class=”active”><a href=”#linux” role=”tab” data-toggle=”tab”>Linux</a></li>
<li><a href=”#apache” role=”tab” data-toggle=”tab”>Apache</a></li>
<li><a href=”#php” role=”tab” data-toggle=”tab”>PHP</a></li>
<li><a href=”#mysql” role=”tab” data-toggle=”tab”>MySql</a></li>
<li><a href=”#html” role=”tab” data-toggle=”tab”>HTML</a></li>
<li><a href=”#css” role=”tab” data-toggle=”tab”>CSS</a></li>
</ul>
<div class=”tab-content”>
<div class=”tab-pane active” id=”linux”>
<div class=”row feature”>
<div class=”col-md-8″>
<h1 class=”feature-heading”>Linux<span class=”text-muted”>操作系统</span></h1>
<p>Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UNIX的多用户、多任务、支持多线程和多CPU的操作系统。
它能运行主要的UNIX工具软件、应用程序和网络协议。它支持32位和64位硬件。Linux继承了Unix以网络为核心的设计思想,是一个性能稳定的多用户网络操作系统。</p>
<p>Linux是一款免费的操作系统,用户可以通过网络或其他途径免费获得,并可以任意修改其源代码。
这是其他的操作系统所做不到的。正是由于这一点,来自全世界的无数程序员参与了Linux的修改、编写工作,程序员可以根据自己的兴趣和灵感对其进行改变,
这让Linux吸收了无数程序员的精华,不断壮大。</p>
</div>
<div class=”col-md-4″><img class=”feature-image img-responsive” src=”/img/linux.png” /></div>
</div>
</div>

<div class=”tab-pane” id=”apache”>
<div class=”row feature”>
<div class=”col-md-4″><img class=”feature-image img-responsive” src=”/img/apache.jpg” /></div>
<div class=”col-md-8″>
<h1 class=”feature-heading”>Apache<span class=”text-muted”>Web服务器</span></h1>
<p>Apache HTTP Server(简称Apache)是Apache软件基金会的一个开放源码的网页服务器,可以在大多数计算机操作系统中运行,
由于其多平台和安全性被广泛使用,是最流行的Web服务器端软件之一。它快速、可靠并且可通过简单的API扩展,将Perl/Python等解释器编译到服务器中。</p>
<p>Apache源于NCSAhttpd服务器,经过多次修改,成为世界上最流行的Web服务器软件之一。Apache取自“a patchy server”的读音,
意思是充满补丁的服务器,因为它是自由软件,所以不断有人来为它开发新的功能、新的特性、修改原来的缺陷。
Apache的特点是简单、速度快、性能稳定,并可做代理服务器来使用</p>
</div>
</div>
</div>

<div class=”tab-pane” id=”php”>
<div class=”row feature”>
<div class=”col-md-8″>
<h1 class=”feature-heading”>PHP<span class=”text-muted”>开源脚本语言</span></h1>
<p>Hypertext Preprocessor,中文名:“超文本预处理器”.语法吸收了C语言、Java和Perl的特点,易于学习,使用广泛,主要适用于Web开发领域。</p>
<p>PHP 独特的语法混合了C、Java、Perl以及PHP自创的语法。它可以比CGI或者Perl更快速地执行动态网页。
用PHP做出的动态页面与其他的编程语言相比,PHP是将程序嵌入到HTML(标准通用标记语言下的一个应用)文档中去执行,
执行效率比完全生成HTML标记的CGI要高许多;PHP还可以执行编译后代码,编译可以达到加密和优化代码运行,使代码运行更快。</p>
</div>
<div class=”col-md-4″><img class=”feature-image img-responsive” src=”/img/pho.png” /></div>
</div>
</div>

<div class=”tab-pane” id=”mysql”>
<div class=”row feature”>
<div class=”col-md-4″><img class=”feature-image img-responsive” src=”/img/mysql.jpg” /></div>
<div class=”col-md-8″>
<h1 class=”feature-heading”>MySql<span class=”text-muted”>关系型数据库管理系统</span></h1>
<p>MySQL是一个开放源码的小型关联式数据库管理系统,开发者为瑞典MySQL AB公司。MySQL被广泛地应用在Internet上的中小型网站中。由于其体积小、速度快、总体拥有成本低,尤其是开放源码这一特点,许多中小型网站为了降低网站总体拥有成本而选择了MySQL作为网站数据库。</p>
<p>MySQL是一种关联数据库管理系统,关联数据库将数据保存在不同的表中,而不是将所有数据放在一个大仓库内,这样就增加了速度并提高了灵活性。</p>
</div>
</div>
</div>

<div class=”tab-pane” id=”html”>
<div class=”row feature”>
<div class=”col-md-8″>
<h1 class=”feature-heading”>HTML<span class=”text-muted”>超文本标记语言</span></h1>
<p>网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。</p>
<p>超级文本标记语言是一种规范,一种标准,
它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果</p>
</div>
<div class=”col-md-4″><img class=”feature-image img-responsive” src=”/img/html.png” /></div>
</div>
</div>
<div class=”tab-pane” id=”css”>
<div class=”row feature”>
<div class=”col-md-4″><img class=”feature-image img-responsive” src=”/img/css.png” /></div>
<div class=”col-md-8″>
<h1 class=”feature-heading”>CSS<span class=”text-muted”>级联样式表</span></h1>
<p>它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。</p>
<p>CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,
CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,
是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性。
</p>
</div>
</div>
</div>
</div>
<hr />
</div>

路径导航条:
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
<!– 路径导航 –>
<div class=”container”>
<ol class=”breadcrumb”>
<li><a href=”#”>首页</a></li>
<li class=”active”>列表页</li>
</ol>
</div>
<!– 路径导航 –>
分页:
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
<!– 分页+翻页 控制分页大小 pagination-lg pagination-sm –>
<div class=”row”>
<ul class=”pagination”>
<li class=”disabled”><a href=””>«</a><li>
<li class=”active”><a href=””>1</a><li>
<li><a href=””>2</a><li>
<li><a href=””>3</a><li>
<li><a href=””>4</a><li>
<li><a href=””>5</a><li>
<li><a href=””>6</a><li>
<li><a href=””>7</a><li>
<li><a href=””>8</a><li>
<li><a href=””>»</a><li>
</ul>

<div class=”row”>
<ul class=”pager”>
<li class=”previous”><a href=”#”>上一页</a></li>
<li class=”next”><a href=””>下一页</a></li>
</ul>
</div>

</div>
<!– 分页 –>

bootstrap折叠卡:
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
<!– 折叠卡 控制折叠卡的开关 in>>样式 –>
<div class=”col-md-4″>
<div class=”panel-group” id=”accordion” role=”tablist” aria-multiselectbale=”true”>
<div class=”panel panel-default”>
<div class=”panel-heading”>
<h3 class=”panel-title”>
<a data-toggle=”collapse” data-parent=”#accordion” href=”#panel-one” aria-expanded=”true” aria-controls=”panel-one”>这里是标题</a>
</h3>
</div>
<div id=”panel-one” class=”panel-collapse collapse in” role=”tabpanel”>
<div class=”panel-body”>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>

<div class=”panel panel-default”>
<div class=”panel-heading”>
<h3 class=”panel-title”>
<a data-toggle=”collapse” data-parent=”#accordion” href=”#panel-two” aria-expanded=”true” aria-controls=”panel-two”>这里是标题</a>
</h3>
</div>
<div id=”panel-two” class=”panel-collapse collapse in” role=”tabpanel”>
<div class=”panel-body”>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>

<div class=”panel panel-default”>
<div class=”panel-heading”>
<h3 class=”panel-title”>
<a data-toggle=”collapse” data-parent=”#accordion” href=”#panel-three” aria-expanded=”true” aria-controls=”panel-three”>这里是标题</a>
</h3>
</div>
<div id=”panel-three” class=”panel-collapse collapse in” role=”tabpanel”>
<div class=”panel-body”>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>

</div>

</div>
<!– 折叠卡 –>
bootstrap徽章:
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
<div class=”row”>
<div class=”btn-group pull-left”>
<button type=”button” class=”btn btn-default”>
<span class=”glyphicon glyphicon-thumbs-up”></span> 牛逼
</button>
<button type=”button” class=”btn btn-default”>
<span class=”glyphicon glyphicon-thumbs-down”></span> 苦逼
</button>
<button type=”button” class=”btn btn-default”>
<span class=”glyphicon glyphicon-hand-up”></span> 逗逼
</button>
<button type=”button” class=”btn btn-default”>
<span class=”glyphicon glyphicon-hand-down”></span> 傻逼
</button>
</div>
<div class=”btn-group pull-right”>
<button type=”button” class=”btn btn-default”>
<span class=”glyphicon glyphicon-download-alt”></span> 下载
</button>
<button type=”button” class=”btn btn-default”>
<span class=”glyphicon glyphicon-share”></span> 分享
</button>
<button type=”button” class=”btn btn-default”>
<span class=”glyphicon glyphicon-heart-empty”></span> 收藏
</button>
</div>
</div>

bootstrap气泡通知:
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
<ul class=”nav navbar-nav”>
<li class=”active”><a href=”#”>开始</a></li>
<li><a href=”#”>CSS</a></li>
<li><a href=”#”>Javascript</a></li>
<li><a href=”#”>订单 <span class=”badge”>10</span></a></li>
<li><a href=”#”>留言 <span class=”badge”>25</span></a></li>
<li><a href=”#about”>关于</a></li>
</ul>