CSS 切图
发布网友
发布时间：2022-04-26 20:51
共6个回答
懂视网
时间：2022-05-12 22:27
热心网友
时间：2022-05-12 19:35
下面的是简单代码，自己复制保存为HTML文件打开就看到效果。*{margin:0;padding:0;list-style:none;}#tab,li a.on,li a:hover{background:url(tab.jpg) no-repeat;}#tab{width:738px;height:52px;}#tab li{width:123px;height:52px;float:left;}#tab li a{display:block;width:123px;height:52px;}#tab .l1 a:hover{background-position:left -52px;}#tab .l2 a:hover{background-position:-124px -52px;}#tab .l3 a:hover{background-position:-247px -52px;}#tab .l4 a:hover{background-position:-370px -52px;}#tab .l5 a:hover{background-position:-493px -52px;}#tab .l6 a:hover{background-position:-616px -52px;}#tab .l1 a.on{background-position:left bottom;}
热心网友
时间：2022-05-12 20:53
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航切图</title>
<style type="text/css">
<!--
body{ margin:0px; padding:0px; margin:0px auto; font-size:12px; font-family:宋体,Arial;}
*{margin:0px;padding:0px;}
ul,div,p,from{border:0px;}
a{ text-decoration:none;cursor:pointer;}
a:hover{ text-decoration:none;}
li{ list-style:none;}
.dh_list{ width:738px; margin:0px auto;height:auto;}
.dh_one{ width:738px; height:52px; margin:0px auto;background:url(dh_bg.gif) no-repeat 0px 0px;}
.dh_one li{ width:123px;height:52px;float:left;}
.dh_one li a{ display:block; width:123px; height:52px;}
.dh_two{ width:738px; height:52px; margin:0px auto;background:url(dh_bg.gif) no-repeat 0px -52px;}
.dh_two li{ width:123px;height:52px;float:left;}
.dh_two li a{ display:block; width:123px; height:52px;}
.dh_three{ width:738px; height:52px; margin:0px auto;background:url(dh_bg.gif) no-repeat 0px -104px;}
.dh_three li{ width:123px;height:52px;float:left;}
.dh_three li a{ display:block; width:123px; height:52px;}
-->
</style>
</head>
<body>
<div class="dh_list">
<ul class="dh_one">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
<ul class="dh_two">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
<ul class="dh_three">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
</body>
</html>
把背景图片放在一起，用定位来做
热心网友
时间：2022-05-12 22:27
热心网友
时间：2022-05-13 00:19
热心网友
时间：2022-05-13 02:27
