1. BootStrap框架–Less语言
这篇文章是对less的详细解读,仔细阅读会发现CSS应用的新天地。
http://www.bootcss.com/p/lesscss/#synopsis
less语法实现了对CSS语言的扩充,使其可以像面向对象的语言一样,定义变量、函数等功能,实现属性值、数值、颜色的计算,对于需要大量复用的CSS语句,可以通过嵌套、混合等方式实现。
2. html5 & CSS3新属性
html5带来了一些语义化标签,曾经冷冰冰的 div 等不再是一个符号,现在有了意义。
http://www.html5jscss.com/html5-semantics-section.html
新语义标签带来的浏览器兼容问题:
HTML5 定了 8 个新的 HTML 语义(semantic) 元素。所有这些元素都是 块级 元素。
为了能让旧版本的浏览器正确显示这些元素,你可以设置 CSS 的 display 属性值为 block:
header, section, footer, aside, nav, main, article, figure {
在考虑浏览器兼容性的问题上,肯定少不了让我们又爱又恨的老朋友–IE,很不幸,IE8 及更早 IE 版本的浏览器不支持以上的方式。
display: block; }我们可以使用 Sjoerd Visscher 创建的 “HTML5 Enabling JavaScript”, ” shiv”来解决该问题:
<!--[if lt IE 9]> <script
src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
以上代码是一个注释,作用是在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件,并解析它。
Canvas绘图应用
http://www.runoob.com/html/html5-canvas.html
SVG使用手册
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial
CSS3中 SVG 与 Canvas两者间的区别:
SVG 是一种使用 XML 描述 2D 图形的语言。
Canvas 通过 JavaScript 来绘制 2D 图形。
SVG 基于XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。 在 SVG中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。
Canvas 是逐像素进行渲染的。在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。
!important 的应用
!important既可以保持最高优先级,也可以解决IE对某些CSS规范有偏差的情况。当在css文件中出现同名属性时,IE浏览器是不能识别!important属性的。详细介绍请看下面链接:
http://blog.csdn.net/u013864585/article/details/37563863
http://www.cnblogs.com/yudy/archive/2013/05/27/3102825.html
3. 块级元素和内联元素的区别与联系:
http://blog.csdn.net/whisper_a/article/details/18891941
举例:(块对象也称为块级元素,内联元素也称为行内元素)
① 块级元素(div,h1-h6,p,ul,dl,dd,form,table)
② 行内元素[也叫内联元素](strong,em,span,b,i,a,img,input,iabel)
区别:
① 块级元素独占一行,而内联元素会和其它的内联元素占一行。
② 块级元素可规定宽度和高度;内联元素会随自身的内容自动变化。
③ 块级可设置margin值和padding值,而内联元素左右正常,上下不正常。
相互转换:
① 块级转为行内:display:inline
② 行内转为块级:display:block
③ 默认:display:none(不占位置)
4.制作静态页面&页面优化辅助工具
页面优化辅助工具推荐:“Google网站管理员工具”和“百度站长平台”
http://lusongsong.com/reed/176.html
如何进行页面优化,提高用户体验?
页面优化可从HTTP请求,HTML\CSS\JS等各方面进行,以及静态文件等。
https://segmentfault.com/a/1190000005165588
http://blog.csdn.net/li2274221/article/details/25193381
如何在网页中解决设计师留给你的字体问题?
1.切图方法
2.在线字体库 选择工具库里的字体,会自动生成一段CSS代码,把代码嵌入网页中即可。 http://www.chinaz.com/free/2012/0815/269267.shtml
3.font-spider 一个自动生成中文字体的工具。 字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式。
http://www.cnblogs.com/Kummy/p/4442142.html
http://font-spider.org/index.html
http://www.sohu.com/a/122145460_582851
如何用图片制作静态网页——切图
如何用PS进行切图
https://jingyan.baidu.com/article/546ae1850560a31149f28c94.html
切图规范介绍
http://www.uisdc.com/ui-design-slice-guideline#
切图样例介绍
http://www.uimaker.com/plus/view.php?aid=3379