UI框架Bootstrap

前面我们提到Github类似少林寺的藏金阁,有非常多优秀的开源项目,与最简单的HTML和CSS有关的有哪些已经是必须掌握的开源项目呢?

文件结构

优秀的图标字体Font awesome

Font Awesome提供可缩放的矢量图标,你可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。你只需要引入一个文件,就能轻松掌握600多个图标,是不是很有意思,赶紧来看看吧。

技术文档:Font Awesome技术文档

 

优秀的前端框架Bootstrap

纯源码 这个只有源码,而且都是编译并压缩后的 CSS、JavaScript 和字体文件,因为它更精简所以开发时我们可以用这个。
源码+文档 这个是源码+文档(包含了源码奥)。里面有很多Bootstrap的一些案例,推荐大家学习的时候下载这个学习里面的examples。

文档最核心的内容在『全局CSS样式』,在『全局CSS样式』我们需要掌握概览、栅格系统、排版、表格、表单、按钮、图片、响应式工具。

在我们查阅技术文档的时候,常常会遇到很多知识点对初学者来说既新又难,会让你有退却的心理。这是因为以往我们有着非常错误(相对于学习技术来说)的学习方式和思维,那就是遇到每个不会的疑难点一定都要搞清楚才行,我们以前学习的教材也非常循序渐进,课本里面的每个知识你都会全盘掌握,而技术文档的学习则不一样,会有很多知识点你现在很难弄懂(因为技术文档是把所有知识一股脑的给到你的),不过技术知识重在使用,你使用你理解的部分,然后再进一步精益就可以了。 

CSS的复用

Meta tags

http://www.htmldog.com/guides/html/intermediate/metatags/

布局容器

栅格系统

技术文档:Bootstrap的栅格化系统

做一个12栏布局,根据屏幕宽度,元素占的栏数不同。在PC端网页是4栏,在平板端网页是2栏,在手机端网页是1栏。也就是当你拉伸浏览器宽度的时候,元素的栏数不断变化;

导航条样式

技术文档:Bootstrap的导航条样式

响应式工具

复杂的选择器

相邻兄弟选择器 A + B普通兄弟选择器  A ~ B子选择器 A > B通配选择器   * ns|* *|*属性选择器  [属性=]

列表组

标签

面板

技术文档:Bootstrap面板

媒体对象

技术文档:Bootstrap媒体对象

媒体查询

一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能限制样式表范围的表达式组成, 例如 宽度,高度和颜色。在CSS3中添加的媒体查询,允许内容的呈现针对一个特定范围的输出设备而定制,而不必改变内容本身。

Meta Tags

http://www.htmldog.com/guides/html/intermediate/metatags/

CSS层叠

CSS层叠

@规则

一个 at-rule 是一个CSS 语句,以at符号开头, 后跟一个标识符,并包括直到下一个分号的所有内容, ‘;’  或下一个CSS块,以先到者为准。

@charset 定义样式表使用的字符集.

@import 告诉 CSS 引擎引入一个外部样式表.

@font-face描述将下载的外部的字体。

@keyframes描述 CSS 动画的中间步骤

技术文档:@规则

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference#%E9%80%89%E6%8B%A9%E5%99%A8CSS的数据类型anglelengthurl技术文档:CSS数据类型

兼容与调试

浏览器的兼容问题

不同的浏览器(如IE、Safari、Chrome等)、相同浏览器不同的版本以及不同终端(安卓、iOS等)对html标签、html标签的属性、CSS的属性等的支持情况是不一样的,这会造成页面显示效果不统一或不兼容等情况。我们是没法记住HTML和CSS在所有情况下的兼容情况的,因此就需要借助于技术文档,能够快捷查询。

技术文档:Can I Use 浏览器兼容查询

MDN在每个标签、属性等页面的后面都附加了浏览器版本的兼容情况,但不如Can I Use更快捷、直观因此它也成了前端开发工程师经常使用的一个网站。

大家在学习的前期,可以先暂时不用考虑兼容性的问题,只要Chrome浏览器、iOS的浏览器Safari、安卓的浏览器Webview支持就可以放心学习。当然做出产品以及实际工作则需依据技术产品的用户对象来检查兼容问题。

针对特定厂商的前缀

源于浏览器的复杂情况,为了确保有些CSS属性可以在特定的浏览器下兼容,大家可能会经常看到一些CSS属性的值有浏览器引擎前缀,比如-webkit- (其他的如-moz-、-o-、-ms-等已不适用于国内,但可能你也会遇到)。大家可以先不用理会

浏览器的调试与兼容问题一直是前端开发工程师非常头疼的问题,尤其是要兼容IE浏览器。由于国内有大量的IE用户,令人发指的是不少人还在用IE 10以前的版本。庆幸的是安卓、iOS移动端的比重越来越大,以及有了前端工程化webpack等工具的出现,大家学习时可以不必理会这些内容

任务

引入一些开源程序,能够让你更加快速的开发酷炫的网页,今天的任务就是要掌握这几个开源项目。