[转]Bootstrap自适应导航栏

导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开。在 Bootstrap 导航栏的核心中,导航栏包括了站点名称和基本的导航定义样式。

默认的导航栏

  1. 向 <nav> 标签添加 class .navbar、.navbar-default。
  2. 向上面的元素添加 role=”navigation”,有助于增加可访问性。
  3. 向 <div> 元素添加一个标题 class .navbar-header,内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。
  4. 为了向导航栏添加链接,只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。 

继续阅读“[转]Bootstrap自适应导航栏”

CSS加载外部字体,让网站更显个性

一般网站上的字体,都是加载电脑本地的,如果想要在网站上使用一种比较不常见的字体,那要如何解决呢?
在CSS中写入

body {font-family:'langman'}
@font-face {
font-family:langman;
src: url('langman.eot'); /* IE9 Compat Modes */
src: url('langman.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('langman.woff') format('woff'), /* Modern Browsers */
  url('langman.ttf')  format('truetype'), /* Safari, Android, iOS */
  url('langman.svg#langman') format('svg'); /* Legacy iOS */
}

这段代码在网上随便都可以找到了,这里langman是我自己定义的字体,那么,现在最重要的是字体了。
我用的是“浪漫雅园”字体,但只用它的英文,如果还要用中文的话字体文件太大了,不利于网络加载。

首先需要一个叫FontCreator的软件,百度一下就有了,和要编辑的字体“浪漫雅园”字体,也是网上找就有,如果你电脑有装某个字体,而你要拿那个字体的文件的话,可以到 “控制面板外观和个性化字体” 里找到它,复制,然后再其他地方粘贴,字体文件就拿出来了。

用FontCreator打开字体文件
52600f7f56606
选中需要的字并复制,我这里只要数字英文还有一些标点

新建一个字体,起个家族名称,我这里是 langman
52600fca3dafc

粘贴,复制的时候,第一个符号是exclam,在粘贴时就选中exclam这个符号,右键粘贴就好了
52600fd2172cf

之后就是保存了,这样就有ttf文件了
然后就是转其他格式的字体文件了
http://ttf2eot.com/
http://ttf2svg.com/
http://ttf2woff.com/

根据网址对应进行转换格式,字体文件就解决了,拿到网站试试吧

[转]编写高效的CSS选择器

高效的CSS已经不是一个新话题,也不是一个我非得重拾的话题,但是,它却是自我在SKY工作以后,真正感兴趣并始终关注的一个话题。

很多人或者忘记了,或者仅仅是没有意识到,CSS可以是高效的也可能导致低能。然而,我们可以不考虑当你自认为会的太少而使用了低效的CSS这种情况。

这些规则只真正用在性能要求很高的网站上,这些网站对速度要求很高,任何一个页面可能含有成百上千个DOM元素。但是实践出真理,不管你是在打造下一个facebook 还是在开发一个本地的展示网页,多学点总是好的….
继续阅读“[转]编写高效的CSS选择器”