顯示背景色網頁特效CSS代碼

來源:互聯網
上載者:User
滑鼠啟用顯示背景色,我們該如何編寫這樣的代碼呢?我們來整理一下思路:把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>
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.