当前位置: 首页 > 工具软件 > One-Page-Nav > 使用案例 >

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

漆雕稳
2023-12-01

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

 

 

转载于:https://www.cnblogs.com/wangxiaoyao77/p/5542139.html

 类似资料: