html如何实现图片定位功能，比如网页的导航条，如何使用图片定位知识。上一篇文章介绍了html网页中定位的基础知识，本篇文章具体分享定位的实例以及实例代码，有兴趣的小伙伴可以研究一下。
首先是将导航条的完整背景图准备好。
其次，将背景图引入到页面中，本文的图片是放在阿里云中的，然后调用了阿里云中图片的路径地址。
项目代码如下：
<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> |
宠物免费领养小程序，欢迎来踩
