小论CSS之position, background-position

巧妙使用position, background-position能巧妙的创造出高质量的页面。

 

 

下面看代码：我加“关键！“的注释部分表示会对结果产生很大影响。

 

 

<style>

    body{

        margin: 0px;/* 为了便于观察结果*/

    }

    .home{

        height: 30px;/*菜单总高度*/

        font-weight: bold;

        float: left;/*每个菜单div会横向排列，关键！*/

        border-bottom: solid red 1px;/* 为了便于观察*/

        overflow: hidden;/*否则如果图片过高， 会超出border，关键！*/

    }

    .home a{

        height: 100%;/*关键！*/

        top: 5px;/*于顶部有5px的空隙，关键！*/

        position: relative;/*只有为relative时候top才会生效，关键！*/

        padding-left: 9px;/*左边的圆角图片的宽度，关键！*/

        margin-right: 5px; /*菜单之间的宽度*/

        background: url(http://www.dynamicdrive.com/cssexamples/media/tab-blue-left.gif) no-repeat left top;

    }

    .home a span{

        height: 100%;/*关键！*/

        position: relative;/*关键！*/

        padding: 5px 20px 0px 11px;/*将使文字居中*/

        background: url(http://www.dynamicdrive.com/cssexamples/media/tab-blue-right.gif) no-repeat right　top;

    }

    .home a:hover{

        /*鼠标悬停的时候显示图片的高亮部分*/

        background-position: 0% -125px;

        top:0px;/*于顶部的5px的空隙将消失*/

    }

    .home a:hover span{

        /*鼠标悬停的时候显示图片的高亮部分*/

        background-position: 100% -125px;

    }

</style>

<div class="home"><a href="#"><span>Home</span></a></div>

<div class="home"><a href="#"><span>Home</span></a></div>