导航条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>00</title>
<style type="text/css">
.box{
width: 990px;
height: 32px;
background-image: url(导航条.png);
background-repeat: repeat-x;
margin: 10px auto;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
代码效果：
image.png
按钮：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>123123123123123123123123123123123123123123123</title>
<style type="text/css">
a:link{
display: block;
width: 93px;
height: 25px;
background-image: url(img/btn.png);
}
a:hover{
display: block;
width: 93px;
height: 25px;
background-position: -93px 0px;
}
a:active{
display: block;
width: 93px;
height: 25px;
background-position: -186px 0px;
}
</style>
</head>
<body>
<a href="#"></a>
</body>
</html>
按钮初始样子
鼠标悬浮在按钮上
点击按钮时
