分类：前端经验

HTML5 Boilerplate使用

发布时间：/作者：/

个人站制作使用了下HTML5 Boilerplate，问题关键是如何使用。 1.首先从目录入手，需要关注的是js目录，里面libs目录存放有jquery以及modernizr，都是压缩版；mylibs文件夹用来放用户其他的库，script.js以及plugin文件都是空白，都留待用户写。 2.然后是css目录，里面的style.css，文件前面有针对html5的reset，中间空出部分让用户写页面 …

阅读全文→

页面字体设置

几个页面字体适配度比较好的，HTML body 字体的定义：

  • Google: font-family: arial,sans-serif;
  • Twitter：font: 13px/1.5 Helvetica Neue,Arial,Helvetica,’Liberation Sans’,FreeSans,sans-serif
  • 豆瓣：font: 12px/162% Arial,Helvetica,sans-serif;
  • 新浪微博：font-family: Arial,Helvetica,sans-serif;
  • Apple中国：font: 12px/18px “Lucida Grande”,”Lucida Sans Unicode”,Helvetica,Arial,Verdana,sans-serif;
  • 知乎: font: 13px/22px ‘Helvetica Neue’,Helvetica,Arial,Sans-serif;
  • Facebook: font-family: “lucida grande”,tahoma,verdana,arial,sans-serif;
  • Google+: font: 13px arial,sans-serif;

结论：Arial,Helvetica,San-serif 这个组合适配性是最好的,也是最保险的. 可选:Helvetica Neue . 知乎的定义几乎可以直接照用.

腾讯使用的是：font-family: tahoma, verdana, arial, helvetica, sans-serif;

字体设计方面英文理论很容易懂，但相应中文显示方法仍是未知

 

960栅格系统快速使用指南

发布时间：/作者：/

现代浏览器中ctrl+u 用于切换是否显示栅格 960的demo分为三个部分，分别展示了几种class的用法： top部分 分为两竖条，24格系统中一条以30开始，40递增 container_24说明将960px分为24栏竖条。实际使用950px，左右两边还有5px的白边 grid_xx说明占多少栏竖条 空白条10px css实现： .grid_xx{ display:inline;//防止ie …

阅读全文→

Bootstrap简易使用指南

发布时间：/作者：/

看完使用手册后所作的笔记，可以当做简易使用指南使用。 1.框架 1.1全局样式 使用HTML5的doctype，scaffolding.less中定义全局样式，从2开始使用normalize.css，并使用reset.less进行简化 1.2默认栅格系统 940px宽12列栅格，使用row与span[NUM]的class来控制，使用offset[NUM]来控制偏移，于non-fluid可以直接嵌套 …

阅读全文→

Modernizr使用

发布时间：/作者：/

Modernizr作为开发HTML5必要的js工具，提供有以下多种功能 1.css 可以通过feature检测（包括html5元素如canvas，或是css3属性如border-radius）为html的加入相应的类，对于不支持的feature则加入以no-为前缀的类。 可以为html加入名为“no-js”的类，这样即使没有js环境来执行Modernizr，也提供了相应的fallback类，而一旦 …

阅读全文→