前端学习笔记(二)

使用语义化的HTML5

在以往的html中界面编写中,一般都是使用class辨别是哪个区块,现在我们可以利用HTML5中的一些具有语义化的标签进行编写。增加了代码的可读性。
常见的语义化标签有以下几个

头部
导航 脚部
每个分块
文章标签
侧边栏

推荐几个前端常用的网站

boostrap扁平化的一个开源工具库,里面也提供了很多的矢量图标,很值得参考
Flat UI
阿里巴巴的icon font 矢量图标库,很多图标都可以 从中找到很方便。
Icon Font

高清图库

pixabay

GRATISOGRAPHY

Free Images

picjumbo

death to the stock photo

public do main archive

很多很多,中文网站还是不是很多,再挖一坑 ,等学的差不多了 ,可以自己写一个中文的高清图网站,美滋滋。

选择器易错辨析

  • 标签和类选择器或者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 在我上一篇笔记。
  • 还有很多常见的用处慢慢更新。

你可能感兴趣的:(前端学习笔记(二))