顶部导航开始 -->

html如何实现定位功能(下)

html如何实现图片定位功能,比如网页的导航条,如何使用图片定位知识。上一篇文章介绍了html网页中定位的基础知识,本篇文章具体分享定位的实例以及实例代码,有兴趣的小伙伴可以研究一下。

首先是将导航条的完整背景图准备好。

自学php博客

其次,将背景图引入到页面中,本文的图片是放在阿里云中的,然后调用了阿里云中图片的路径地址。

预览项目效果

项目代码如下:

<hmtl>

<head>

    <title></title>

    <meta http-equiv="Content-Type" Content="text/html charset=utf-8">

    <link href="nav.css" rel="stylesheet" type="text/css"/>

</head>

<body>

    <div id="nav">

        <a class="home"></a>

        <a class="prev"></a>

        <a class="next"></a>

        <a class="set"></a>

        <a class="web"></a>

        <a class="lock"></a>

        <a class="help"></a>

        <a class="close"></a>

    </div>

</body>

</html>

<style>

#nav{border:0px solid #000;

    width:615px;

    background-image:url("http://zixuephp.oss-cn-shanghai.aliyuncs.com/case/2.png");

    background-position:0px -200px;

    height:85px;

    margin:100px auto;

    }

a{

    display:block;

    float:left;

    width:75px;

    height:85px;

    border:0px solid #000;

    background-image:url("http://zixuephp.oss-cn-shanghai.aliyuncs.com/case/2.png");

 }

 .home{

    background-position:-15px 0px;

      }

.home:hover{

    background-position:-15px -87px;

      }

.prev{

    background-position:-88px 0px;

      }

.prev:hover{

    background-position:-88px -87px;

      }

.next{

    background-position:-162px 0px;

      }

.next:hover{

    background-position:-162px -87px;

      }

.set{

    background-position:-236px 0px;

      }

.set:hover{

    background-position:-236px -87px;

      }

.web{

    background-position:-310px 0px;

      }

.web:hover{

    background-position:-310px -87px;

      }

.lock{

    background-position:-384px 0px;

      }

.lock:hover{

    background-position:-384px -87px;

      }

.help{

    background-position:-458px 0px;

      }

.help:hover{

    background-position:-458px -87px;

      }

.close{

    background-position:-532px 0px;

      }

.close:hover{

    background-position:-532px -87px;

      }

</style>


自学php博客
请先登陆后发表评论
  • 最新评论
  • 总共0条评论
  • © 2014-2016 zixuephp.cn 版权所有
  • ICP证:皖ICP备16012107号
  • 联系邮箱:510082587@qq.com
  • 交流请加微信:weibobf2899 或扫下方二维码