[前端web笔记08]css06

(学习前端的小菜鸟,争取每天记录笔记)

第八天, 元素隐藏 精灵图 字体图标鼠标指针图标 图文基线对齐

display: none; 隐藏元素,且不占位置

display: block; 元素显示

配合hover可以实现隐藏显示图片



<!-- 精灵图 -->

background: url(./images/abcd.jpg) no-repeat -387px -141px;

选择图片 并且选定位置 例-387px -141px



<!-- 字体图标 -->

css中要有字体的地址,之后在字体图标的位置要表明字体

例: font-family:'iconfont';



如果已经link了字体文件,那可以直接加<i class='class字体名字  iconfont'></i>>



<!-- 鼠标指针图标 -->

<li style="cursor: default;"> default 默认箭头</li>

<li style="cursor: pointer;"> pointer 手指箭头</li>

<li style="cursor: text;"> text 文本箭头</li>

<li style="cursor: move;"> move 移动箭头</li>

<li style="cursor: not-allowed;"> no-allowed 禁止图标</li>



<!-- 图片文字对齐 -->

vertical-align: middle;

中线对齐,防止给字母预留基线空间上