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

（1）消除li 前面的点 使用 　 ul {list-style:none; }

并且ul之外会有一个容器，nav等 利用margin值保持和其他元素的等高度。

(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。导致无效。

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

<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;

给UL给一个高度。

切记：在一个没有高度的元素上面，background-color是不会有作用的。因为对于一个父元素而言，他的子元素若是浮动撑开，那么他是没有高度的。所以利用overflow：hidden来给他高度。

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

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

（6）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;
}

这和

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 ;

####水平居中的方法：
1 该元素的宽度+margin：auto 来实现某个元素在水平位置上的居中。（若是这个元素的宽度是100%或者1000px，那么你是看不出来居中的效果）

2 父元素的 text-align: center; + 此元素的 inline-block

3 浮动+position来定义。

4 绝对定位：left：50% margin-left:-(宽度值/2);