글 수 '48'
| <?xml version="1.0" encoding="utf-8"?> <!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>CSS Menu with a image</title> <style type="text/css"> body {padding: 50px; margin: 0;} ul {padding: 5px; margin: 10px 0; list-style: none; background-color: #fff; border-bottom: 1px solid #e7e7e7; float: left; clear: left;} ul li {float: left; display: inline; /*For ignore double margin in IE6*/ margin: 0 10px;} ul li a {text-decoration: none; float:left; color: #999; cursor: pointer; font: 900 14px/22px "Arial", Helvetica, sans-serif;} ul li a span {margin: 0 10px 0 -10px; padding: 1px 8px 5px 18px; position: relative; /*To fix IE6 problem (not displaying)*/ float:left;} /*BLUE*/ ul.blue li a.current, ul.blue li a:hover {color: #0d5f83; background: url(blue.png) no-repeat top right;} ul.blue li a.current span, ul.blue li a:hover span {background: url(blue.png) no-repeat top left;} </style> </head> <body> <ul class="blue"> <li><a href="#" title="home" class="current"><span>home</span></a></li> <li><a href="#" title="products"><span>products</span></a></li> <li><a href="#" title="blog"><span>blog</span></a></li> <li><a href="#" title="contact"><span>contact</span></a></li> </ul> </body> </html> |
Copyrights 2010 ,WebMake.ca . All rights reserved