cari

Rumah  >  Artikel  >  hujung hadapan web  >  显示背景色网页特效CSS代码

显示背景色网页特效CSS代码

伊谢尔伦
伊谢尔伦asal
2017-06-16 10:54:282304semak imbas

鼠标激活显示背景色，我们该如何编写这样的代码呢？我们来整理一下思路：把a里的部分设置成一个块元素，然后定义鼠标放上后的样式。CSS1中:hover只对a元素起作用，CSS2中:hover应用于所有元素．而IE7也没同样没有支持CSS2中的这个标准。所以为了适应所有浏览器还是要定义在a中.

代码运行效果：


<!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=utf-8" />
<title>无序列表UL 鼠标激活显示背景色的实例</title>
<style type="text/css">
#links ul {
list-style-type: none;
width: 280px;
}
#links li {
border: 1px dotted #06f;
border-width: 1px 0;
margin-bottom: 16px;
}
#links li a {
color: #00f;
display: block;
font: bold 120% Arial, Helvetica, sans-serif;
padding: 8px;
text-decoration: none;
}
* html #links li a {  /* make hover effect work in IE */
width: 280px;
}
#links li a:hover {
background: #f0f0f0; color:#036;
}
#links a em {
color: #666;
display: block;
font: normal 85% Verdana, Helvetica, sans-serif;
line-height: 125%;
}
#links a span {
color: #999;
font: normal 70% Verdana, Helvetica, sans-serif;
line-height: 150%;
}
</style>
</head>
<body>
<div id="links">
<ul>
<li><a href="#" title="CSS Web Design">CSS Web Design<em>xhtml+css div+css - cnn6.net??</em> <span>cnn6.net??</span></a></li>
<li><a href="#" title="CSS Web Design">CSS Web Design<em>xhtml+css div+css - cnn6.net??</em> <span>cnn6.net??</span></a></li>
</ul>
</div>
</body>
</html>

Atas ialah kandungan terperinci 显示背景色网页特效CSS代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：网站中比较不错的表单特效实例代码Artikel seterusnya：css怎么设置分隔线与双实线

Artikel berkaitan

Lihat lagi