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)经常用子绝父相来定位图片。
一个盒子可以同时具有绝对定位和相对定位。
也可以子绝父绝。