关于“回归自然”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;
}

这和

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

巴特西

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

最新文章

热门文章