前端开发css 鼠标移动到按钮图片改变
摘要： web前端开发教程 网盘 菜鸟教程网前端开发 编程前端开发视频教程下载 <!– 在网上发现了很多的方法，有的是用js，这里用了一个比较简单的css的方法，很实用 –> <!DOCTYPE htm……
| web前端开发教程 网盘 |
| 菜鸟教程网前端开发 |
| 编程前端开发视频教程下载 |
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>无标题文档</title>
<style>
.pp a {
width: 575px;
height: 157px;
background: url(1jpg);
/* /图片地址/ */
display: block;
}
.pp a:hover {
width: 575px;
height: 157px;
background: url(2jpg);
/替换的图片地址/display: block;
}
</style>
</head>
<body>
<div class=”pp”><a href=”#”></a></div>
</body>
</html>
link:平时的状态 visited:被访问过之后 hover:鼠标放上时 active:被按下时
css中关于超链接的四个属性一般正常顺序为：link，visited，hover，active
一定要按上面的顺序写，不然显示的可能会和你预想的不一样
display:block;是将这行转化为块元素，具体为什么我也不太清楚，不过就是要加
如果有文字可能还要加一句让超链接没有下滑线的代码 这段是一列一列的按钮
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>无标题文档</title>
</head>
<style type=”text/css”>
*{
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
.nav {
width: 800px;
height: 40px;
margin: 150px auto;
}
.nav ul li {
float: left;
width: 200px;
}
.nav ul li a:link,
a:visited {
display: block;
width: 190px;
height: 40px;
background: url(1.jpg);
}
/链接、点击后/ .nav ul li a:hover {
background: url(2.jpg);
}
/鼠标经过/ .nav ul li a:active {
background: url(3.jpg);
}
/点击时*/
</style>
<body>
<div class=”nav”>
<ul>
<li><a href=”#”></a></li>
<li><a href=”#”></a></li>
<li><a href=”#”></a></li>
</ul>
</div>
</body>
</html>
| 黑马web前端开发视频教程 |
| 前端开发实战教程 |
| web前端应用开发教程 |
» 本文来自：前端开发者 » 《前端开发css 鼠标移动到按钮图片改变》
» 本文链接地址：https://www.rokub.com/7741.html
» 您也可以订阅本站：https://www.rokub.com
近期评论