導(dǎo)航條
<!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(導(dǎo)航條.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>
按鈕初始樣子
鼠標(biāo)懸浮在按鈕上
點(diǎn)擊按鈕時(shí)
