分类:
2008-04-14 15:59:27
八、 定制Web搜索框
借助于CSS,你可以容易地为你的现有站点定制搜索框,并且使你以后的任何重新设计都变得非常容易。
首先要讨论的CSS类是ajaxWebSearchBox(该类实现搜索框)。因为搜索框要确定位置,所以它必须要有一个绝对位置:
.ajaxWebSearchBox { position: absolute; background-color: #0d1e4a; width: 500px; padding: 1px; } |
.ajaxWebSearchHeading { position: relative; background-color: #1162cc; font: bold 14px tahoma; height: 21px; color: white; padding: 3px 0px 0px 2px; } |
a.ajaxWebSearchCloseLink { position: absolute; right: 5px; top: 3px; text-decoration: none; color: white; } a:hover.ajaxWebSearchCloseLink { color: red; } |
.ajaxWebSearchResults { background-color: #d3e5fa; padding: 5px; } |
.ajaxWebSearchResults div { text-align: center; font: bold 14px tahoma; color:#0a246a; } |
a.ajaxWebSearchLink { font: 12px tahoma; padding: 2px; display: block; color: #0a246a; } a:hover.ajaxWebSearchLink { color: white; background-color: #316ac5; } a:visited.ajaxWebSearchLink { color: purple; } |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xml:lang="en" lang="en" xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> WebSearch</title> <link rel="stylesheet" type="text/css" href="css/websearch.css" /> <script type="text/javascript" src="js/zxml.js"></script> <script type="text/javascript" src="js/xparser.js"></script> <script type="text/javascript" src="js/websearch.js"></script> </head><body> </body> </html> |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xml:lang="en" lang="en" xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ajax WebSearch</title> <link rel="stylesheet" type="text/css" href="css/websearch.css" /> <script type="text/javascript" src="js/zxml.js"></script> <script type="text/javascript" src="js/xparser.js"></script> <script type="text/javascript" src="js/websearch.js"></script> </head><body> <a href="#" onclick='msnWebSearch.search(event,"\"Professional Ajax\""); return false;'>Search for "Professional Ajax"</a> <br /><br /><br /><br /> <a href="#" onclick='msnWebSearch.search(event,"Professional Ajax"); return false;'>Search for Professional Ajax</a> </body> </html> |