当前位置:首页 > 在线留言 >

修改网页字体是让网站看起来更有特色、有现代感的捷径

  • 2018-10-25 18:05:05
  • 浏览:
  • 作者:admin
码农如何快速打造一个有设计感的网站

本质上 Bootstrap 是一种隔栅系统,由两名 twitter 员工Mark Otto 和 Jacob Thornton开发的开源前端框架,它集成了很多 CSS 样式的合集,可以帮助那些不懂或者不擅长 CSS 的开发人员快速的建立一个外观看起来很不错的网站。

使用 Bootstrap 的另一个好处就是网站本身就是自适应的(Responsive),可以省去各种为移动设备等的适配工作。此外,Bootstrap 还是可定制的,可以根据你的需求自己配置。(注:英文不好的可以查看中文版的 Bootstrap 文档或Bootstrap 中文网)

2. Bootstrap 定制指南

决定使用 Bootstrap 是迈出的重要一步,相比其他可以在前端开发上节省很多精力,但有利有弊,如果你决定使用 Bootstrap 的话就意味着很有可能会和其他人“撞框架”,采集软件,就像默认的 WordPress 皮肤一样,如果大家都完全用 Bootstrap 的样式的话,会让不少见得多的人心生厌烦。

所以,如果实在抽不出时间的话可以去 Wrap Bootstrap 购买一份主题皮肤,这些主题皮肤都是由专业的设计师设计的,虽然不会成为唯一定制的,但已经看起来相当不错了,而且这种方法是最快速的。接下来就是以Narrow marketing这个模板(下图)为例教你如何自己定制一份完全属于你自己的 Bootstrap 。

一. 字体

修改网页字体是让网站看起来更有特色、有现代感的捷径,我们可以去谷歌的字体服务(免费正版)中随意挑选自己喜欢的字体,但是要注意字体间的搭配,在这里我们选择由DesignShack 推荐的谷歌字体搭配中的一种:Cardo(用于标题) 和 Nobile(用于主体内文)。

  • 在网页头部中加入此代码:

  • 在 CSS 样式表 custom.css 中加入以下代码:h1, h2, h3, h4, h5, h6 {font-family: 'Corben', Georgia, Times, serif;} p, div {font-family: 'Nobile', Helvetica, Arial, sans-serif;}

  • 添加完后刷新即可查看效果了,现在我们的网站样式已经变成下面这样了,看起来比默认好多了。

    此外,除了谷歌的字体服务外还可以使用像Fontdeck 或Typekit字体服务,它们的字体更多,更多的字体搭配方案可以参考 Type Connection。

    二. 纹理

    知道如何让一个网站看起来更加高雅优雅一些吗?是的,纹理。就像 24WAY 的背景纹理一样。

      但是这些纹理效果应该去哪里寻找呢?设计师 Atle Mo 的Subtle Patterns网站是个不错的去处,我们接下来就使用这个网站上的Cream Dust纹理。点击下载,将纹理图片保存到本地,然后放到根目录下的 /img/ 目录文件夹中,最后到 CSS 样式表中加入代码 body { background: url (/img/cream_dust.png) repeat 0 0;} 即可。(如果需要更多样式的纹理或纹理的其他用法的话可以看看 Smashing 的这篇文章)

    添加纹理前后对比(大图)

    注:相关网站建设技巧阅读请移步到建站教程频道。

    推荐阅读/观看:佛山网站建设 http://fswzjs.net.cn


    上一篇:o2o和移动互联网

    下一篇:最后一页