今天完成的事情

完成任务7任务七第一个图

1.关于使用css画出符号“>”

此符号不使用切图设背景方法完成，而是通过盒子模型完成，原理就是设置一个盒子，设置上方和右边的border，通过旋转来得到“>"

以下是css代码

以下是效果图

在使用过程中最重要的一个参数是角度转换transform：

CSS3 transform是什么？

transform的含义是：改变，使…变形；转换

CSS3 transform都有哪些常用属性？

transform的属性包括：rotate() / skew() / scale() / translate(,) ，分别还有x、y之分，比如：rotatex() 和 rotatey() ，以此类推。

下面我们来分解各个属性的用法：

transform:rotate()：

含义：旋转；其中“deg”是“度”的意思，如“10deg”表示“10度”下同。

transform:skew()：

含义：倾斜；

transform:scale()：

含义：比例；“1.5”表示以1.5的比例放大，如果要放大2倍，须写成“2.0”，缩小则为负“-”。

transform:translate()：

含义：变动，位移；如下表示向右位移120像素，如果向上位移，把后面的“0”改个值就行，向左向下位移则为负

2.关于使用css画出符号“▶"

此符号同样使用盒子模型来完成，期间我对盒子模型的border有了新的认识，因为三角就是border来实现的

实现原理：

首先来看在为元素添加border时，border的样子；假设有如下代码：

<div></div>div {    width: 50px;
    height: 50px;
    border: 2px solid orange;
}

效果图：

div {    width: 50px;    height: 50px;    border: 40px solid;    border-color: orange blue red green;
}

效果图：

既然如此，那么更进一步，把元素的内容尺寸设置为0会发生什么情况呢？

div {    width: 0;    height: 0;    border: 40px solid;    border-color: orange blue red green;
}

效果图：

我们将惊奇地发现，此时元素由上下左右4个三角形“拼接”而成；那么，为了实现最终的效果，即保留最下方的三角形，还应该怎么做？很简单，我们只需要把其它border边的颜色设置为白色或透明色：

div {    width: 0;    height: 0;    border: 40px solid;    border-color: transparent transparent red;
}

关于三角形是可以选择的，如果需要第二个也就是坐边的绿色三角形，那么就设置 

border-color: transparent transparent transparent green;

3.关于轮播图中的小圆点设置

首先设置4个盒子，使用border-radius，参数为圆点的半径，即可设置出来原来。接下来使用伪元素：hover来完成最终效果

以下是html代码

以下是css代码

以下是网页效果

今天的收获

1.hover伪元素使用更加深入

明天的计划

2.进行任务七第二个图