今天完成的事情 :任务7的第一个页面的制作

遇到的问题:该效果的hover效果的制作    父相子绝父级元素给相对定位 子级元素给绝对定位 

绝对定位脱标

绝对定位的盒子,还脱离标准文档流的.所以,所有的标准文档流的性质,绝对定位之后都不遵守了.

绝对定位之后,标签就不区分所谓的行内元素,块级元素了,不需要display：block就可以设置宽高了

相对定位 position:relative

相对定位,就是微调元素位置的.让元素相对自己原来的位置，进行位置的微调

也就是说,如果一个盒子想进行位置调整,那么就要使用相对定位了

相对定位的用途

相对定位有坑,所以一般不用于做"压盖"效果.页面中,效果极小.就两个作用:

微调元素

做绝对定位的参考，父相子绝

相对定位的定位值

可以用left,right来描述盒子右,左的移动

可以用top,bottom来描述盒子的下,上的移动.

子绝父绝,子绝父相,子绝父固,都是可以给儿子定位的.但是,工程上,子绝,父绝,没有一个盒子在标准文档流中,所以页面就不稳固,没有任何实战用途.工程上,"子绝父相"有意义,父亲没有脱标,儿子脱标在父亲的范围里面移动.

<div class=”box1”>  → 绝对定位
    <div class=”box2”>  → 相对定位
        <div class=”box3”>  → 没有定位
            <p></p>  → 绝对定位，以box2为参考定位。

position: relative;相对定位父      position: absolute;绝对定位子

怎么去解决的:自己百度和师兄的讲解

今天的收获: 今天了解到了父相子绝定位 还有hover效果的使用应用  在百度上面学习到了怎么制作三角形

:hover 选择器用于选择鼠标指针浮动在上面的元素。

提示：:hover 选择器可用于所有元素，不只是链接。

提示：:link 选择器设置指向未被访问页面的链接的样式，:visited 选择器用于设置指向已被访问的页面的链接，:active 选择器用于活动链接。

注释：在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。

了解了 CSS 三角形绘制方法

上三角

#triangle-up {

    width: 0;

    height: 0;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-bottom: 100px solid red;

}

下三角

#triangle-down {

    width: 0;

    height: 0;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-top: 100px solid red;

}

左三角

#triangle-left {

    width: 0;

    height: 0;

    border-top: 50px solid transparent;

    border-right: 100px solid red;

    border-bottom: 50px solid transparent;

}

右三角

#triangle-right {

    width: 0;

    height: 0;

    border-top: 50px solid transparent;

    border-left: 100px solid red;

    border-bottom: 50px solid transparent;

}

明天计划学习什么:明天完成任务7的第二个页面的制作