前端学习笔记（二）

2017-08-04 本文已影响0人星缘邢

使用语义化的HTML5

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

头部
<header></header>
导航
<nav></nav>
脚部
<footer></footer>
每个分块
<section></section>
文章标签
<article></article>
侧边栏
<aside></aside>

选择器易错辨析

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

前端学习笔记（二）

使用语义化的HTML5

推荐几个前端常用的网站

选择器易错辨析

引入自己的字体

圆形图片的生成

border的相关使用

猜你喜欢

热点阅读