品优购笔记（html+css）

day01 

1.快捷导航键

（1）间隔线

把文本后面插入空的li，用css把空li变成一条线段插入

代码如下：

.shortcut .fr ul li:nth-child(even) {

    width: 1px;

    height: 12px;

    background-color: #666;

    margin: 9px 20px 0;

}

(2)

文本后面的小箭头，利用了阿里的矢量图标库。然后用伪元素插入文本元素后面。

阿里矢量图标库网站：www.iconfont.cn

代码如下：

.icon::after {

    font-family: "iconfont" !important;

    margin-left: 3px;

./ "\"表示转义的意思，后面是图标的Unicode（16 进制）

    content: '\e665';

}

注意：css中需要写icofont.css文件（在阿里图标库中下载的）中的前几行，并更改对的路径。

（3）标签a中放图片，代码如下

（4）经常用子绝父相来定位图片。

       一个盒子可以同时具有绝对定位和相对定位。

       也可以子绝父绝。