提示：您可以先修改部分代碼再運行
<!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> <title>Create a Block Hover Effect for a List of Links | Smiley Cat Web Design</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="Example of how to create a block hover effect for items in a list of links." /> <style type="text/css"> body { background: #000000; font: 11px Arial, Helvetica, sans-serif; } #wrapper { margin-left: auto; width: 500px; margin-right: auto; } #links { } #links ul { list-style-type: none; width: 400px; } #links li { border: 1px dotted #999; border-width: 1px 0; margin: 5px 0; } #links li a { color: #b3e00f; display: block; padding: 5px; text-decoration: none; font-size: 12px; font-weight: bold; } * html #links li a { width: 400px; } #links li a:hover { background: #1c2424; } #links a em { color: #CCCCCC; display: block; font: normal 11px Verdana, Arial, Helvetica, sans-serif; } #links a span { color: #B3E00F; font-size: 10px; font-style: normal; font-weight: normal; font-variant: normal; } </style> </head> <body> <div id="wrapper"> <div id="links"> <ul> <li>CSS Rounded Corners ’Roundup’ <em>Quite a large collection of techniques for creating boxes and layouts with rounded corners using CSS.</em> <span>November 25, 2005</span></li> <li>How to Write a Web Site Creative Brief <em>Writing a clear, well-structured creative brief will get your web project off to a good start and keep it on track. Here’s how. Includes examples.</em> <span>February 26, 2006</span></li> <li>Free Stock Photography Web Sites <em>My pick of the various free stock photography sites on the web. Updated regularly.</em> <span>October 4, 2004</span></li> </ul> </div> </div> </body> </html>
提示：您可以先修改部分代碼再運行
