“小白的我”第九天日报

今天完成的事情：

1. 完成了任务6的header，并理清楚了前几个任务的知识点；

2.学会了制作和使用雪碧图。

明天计划的事情：

1.尽量做完任务6，并掌握需要的知识点；

遇到的问题：

1.button的伪类用的不熟练，不懂hover的效果；

2.雪碧图制作好了知道用但是用出来没有效果；

3.font的字体无法复制粘贴蓝海上的。

解答方案：

1.伪类的知识点不熟悉，不明白hover的实际效果：

定义和用法

:hover 伪类在鼠标移到元素上时向此元素添加特殊的样式。

说明

这个伪类应用处于“悬停状态”的元素。悬停定义为用户指示了一个元素但没有将其激活。对此最常见的例子是将鼠标指针移到 HTML 文档中一个超链接的边界范围内。理论上，其他元素也可以处于悬停状态，不过 CSS 没有定义究竟是哪些元素。

激活的、已访问的、未访问的或者当有鼠标悬停在其上的链接，它们会在支持 CSS 的浏览器中以不同的方式显示出来：

2.雪碧图的使用和介绍还是有点区别的，有些关键步骤还是需要师兄指点自己，要多做demo多理解；

HTML

<div class="box">

    <span class="icon1"></span>

    <span class="icon2"></span>

    <span class="icon3"></span>

    <span class="icon4"></span>

</div>

CSS

    <style>

        .box{width: 600px; height:300px; border: 3px solid #ccc; background-color: #8064A2; }

        span{display: inline-block; width: 25px; height: 25px; border: 3px solid #ccc;

        background-image: url(css/img/sidebar.png); background-repeat: no-repeat;

        margin: 5px;}

        .icon1{background-position: 0 0;}

        .icon2{background-position: -40px 0;}

        .icon3{background-position: 0 -25px;}

        .icon4{background-position: -40px -25px;}

    </style>

3.蓝海的字体是错误的，CSS不能识别，要转化为能理解的语法。

收获：

1.学会了正确使用雪碧图和伪类；

2.学会了把flex和position配合起来用，是真的好用；