CSS图片导航_html/css_WEB-ITnose

原理：通过css图片背景的position定位，来实现图片导航；

<br><br><br><meta charset="UTF-8"><br><title></title><br><style><br />        * {<br />            margin: 0;<br />            padding: 0;<br />        }<br /><br />        ul {<br />            border: 1px solid red;<br />            float: right;<br />        }<br /><br />        li {<br />            margin-right: 20px;<br />            float: left;<br />            list-style: none;<br />        }<br /><br />        a {<br />            text-decoration: none;<br />            width: 40px;<br />            height: 20px;<br />            display: block;<br />        }<br /><br />        .book {<br />            background: url("../../image/anony_nav_logo4.png") 0 0 no-repeat;<br />        }<br /><br />        .movie {<br />            background: url("../../image/anony_nav_logo4.png") -60px 0 no-repeat;<br />        }<br /><br />        .music {<br />            background: url("../../image/anony_nav_logo4.png") -120px 0 no-repeat;<br />        }<br /><br />        .group {<br />            background: url("../../image/anony_nav_logo4.png") -180px 0 no-repeat;<br />        }<br />        .fm {<br />            width: 80px;<br />            background: url("../../image/anony_nav_logo4.png") -240px 0 no-repeat;<br />        }<br />        .local {<br />            background: url("../../image/anony_nav_logo4.png") -340px 0 no-repeat;<br />        }<br /><br />        .place {<br />            background: url("../../image/anony_nav_logo4.png") -400px 0 no-repeat;<br />        }<br />    </style><br><br><br>

前端入门到VUE实战笔记：立即学习
>在学习笔记中，你将探索 前端 的入门与实战技巧！