使用语义化的HTML5
在以往的html中界面编写中，一般都是使用class辨别是哪个区块，现在我们可以利用HTML5中的一些具有语义化的标签进行编写。增加了代码的可读性。
常见的语义化标签有以下几个
头部
<header></header>
导航
<nav></nav>
脚部
<footer></footer>
每个分块
<section></section>
文章标签
<article></article>
侧边栏
<aside></aside>
推荐几个前端常用的网站
boostrap扁平化的一个开源工具库，里面也提供了很多的矢量图标，很值得参考
Flat UI
阿里巴巴的icon font 矢量图标库，很多图标都可以 从中找到很方便。
Icon Font
高清图库
很多很多，中文网站还是不是很多，再挖一坑 ，等学的差不多了 ，可以自己写一个中文的高清图网站，美滋滋。
选择器易错辨析
- 标签和类选择器或者id选择器结合
选择所有含有该类的所有标签 - 逗号运算符
可以同时设置几个标签的相同属性 - 选择器中间的空格
这是比较精确的选择方法，空格前面是父标签，后面是子标签或类等意思是设置该标签或者类里面的，设置精度比较大，在相对复杂的界面的时候，可以灵活使用， - 关系选择器
很多是关于关系的选择器，比如说a:first-child为a标签的第一个子标签
后面可能会详细的写一下。
引入自己的字体
@font-face{
font-family:aaa;
src:url(xxx.ttf)
}
p{
font-family:aaa;
}
在font-face中设置font-family并设置字体的地址，然后在需要的使用的地方直接引用font-family就可以了。
但是不同的浏览器对不同的字体格式有着不同的支持
ie貌似只支持eot字体
chrome safari FireFox 支持ttf，woff ，其中建议使用woff字体。
有压缩，没版权。
圆形图片的生成
还记得我上面一个笔记写的，设置边框圆角嘛，可以直接利用border的一些设置，直接实现。bootstrap的缩略图估计也是这样实现的，顺便说一下，感觉阅读bootstrap的源码确实是一个学习的好东西。
img{
border:1px solid #fff;
border-radius:50%;
}
上个笔记说过50%是就直接生成圆形。mark。
border的相关使用
本来不打算写这个的，写了圆形图片，突然发现border的使用还是有比较记载下来的。
- 制作bootstrap中引用 虽然在markdown中一个右尖括号就一可以实现，但是毕竟不都是markdown写法。
其实逻辑很简单。只要加个左边框的，然后在这个元素再加个左边的padding值，不就很完美了嘛。
p{
border-left:5px solid #27AE60;
padding-left:10px;
background:#ECF0F1；
}
- 制作一个文章标题的下划线
h1{
border-bottom:2px solid rgba(0,0,0,.15);
padding-bottom:10px;
}
其中rgba()是一个颜色，其中R，G，B，A，分别指的是红色 绿色 蓝色 和透明度。
- 制作透明的button 在我上一篇笔记。
- 还有很多常见的用处慢慢更新。
网友评论