关于“回归自然”onepage的总结

Posted 2020-07-16 王逍遥

1）消除li 前面的点 使用 　 ul { overflow:hiden; }

(2) <h1>回归自然</h1>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    </div>

此时已经有切图了但是还是加上这些文字。目的是为了SEO。 之后使用：block：none 消除。

（3）关于absolute和 relative: 1 absolute 除非他的父级有relative 否则，他会很不听话的往上延伸，直到最高级。 利用left，right,top,bottom，来定位他。 2 还有关于 overflow：hidden;无效。也就是由于子元素设置了absolute，而父元素没有设置relative。导致无效

3

<div class= ocean>
    <div class=land>
        <p class=joke>
               Mrs.Smith couldn’t get her husband to exercise. 
                She asked Mrs. Jones what she should do. Jones replied, 
                “Tape the remote control between his toes.”
        </p>
    </div>
</div>

    div.ocean{
    position:relative;
    background-color:blue;
    width:120px;
    height:120px;
    }
    div.land{
    width:100px;
    height:100px;
    background-color:red;
    overflow:hidden;
    position:absolute;
    left:50px;
    }

 

此时子元素 land的left相对的是ocean。而不是body。

（4）关于浮动问题的解决：确定ul 高度问题 1 方法一在浮动的最后一个元素的li后面，加上

<div class="clear"></div>

.clear {
clear: both;}

2 方法二在 ul上面加上

overflow: hidden;

（5）对于一个盒子 1 width、height是他的大小范围。 其中 

    text-align: center;可以使里面的文字居中。

2 left、right等与position配合确定他的方位

3 盒模型 margin padding border确定他的

4 特殊的是 overflow：hidden。 display:block. clear:both.

（5）1.鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性，后面的属性会覆盖前面的属性定义；

2.鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性，后面的属性会覆盖前面的属性定义；

所以说，a:hover定义一定要放在a:link、a:visited的后面。才生效， a:active 必须位于 a:hover 之后，这样才能生效 爱恨原则：LOVA /HATE link visited hover active 

3 写法注意点：切记带上p 标签，否则不会产生变化。

.list:hover p{
color: black;
}

或者

a:hover p{

color: black;
}

（6）transition属性

transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
结合伪类进行变化的延迟
div:hover
{
 width:300px;
 并排写：
 transition: color .5s,background-color .5s ;