Tip: you can modify some code before running
<!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>November 25,200 5</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. Supported des examples.</em>February 26,200 6</li> <li>Free Stock Photography Web Sites<em>My pick of the various free stock photography sites on the web. Updated regularly.</em>October 5, 2004</li> </ul> </div> </div> </body> </html>
Tip: you can modify some code before running
