八、 定制Web搜索框

　　借助于CSS，你可以容易地为你的现有站点定制搜索框，并且使你以后的任何重新设计都变得非常容易。

　　首先要讨论的CSS类是ajaxWebSearchBox（该类实现搜索框）。因为搜索框要确定位置，所以它必须要有一个绝对位置：

.ajaxWebSearchBox { 　position: absolute; 　background-color: #0d1e4a; 　width: 500px; 　padding: 1px; }

　　在此，绝对位置是唯一的要求。所有的其它属性都是根据你的口味可选的。在这个示例中，该框有一个微蓝色的背景，一个500像素的宽度，以及在四边上各有1个像素的填充。这个填充导致围绕该框的内容的是1个像素宽的边界。

　　下一个类是ajaxWebSearchHeading，它包含该框的头部文本和关闭链接。为了把关闭链接放在右上角，它使用绝对位置。因为这个原因，它要求ajaxWebSearchHeading使用一个相对位置：

.ajaxWebSearchHeading { 　position: relative; 　background-color: #1162cc; 　font: bold 14px tahoma; 　height: 21px; 　color: white; 　padding: 3px 0px 0px 2px; }

　　在此，唯一要求的属性也是position属性。其它的属性有助于给出该元素一个好看的外观。其背景颜色是浅蓝色，而文本部分是白色，14像素高且是Tahoma字体。该元素的高度是21个像素并且在顶部和左边都填充以边界。

　　如前面所述，该关闭链接的位置是绝对的：

a.ajaxWebSearchCloseLink { 　position: absolute; 　right: 5px; 　top: 3px; 　text-decoration: none; 　color: white; } a:hover.ajaxWebSearchCloseLink { 　color: red; }

　　该元素被放置在距右边5个像素，距顶部3个像素的位置（该元素被放在右上角）。这个链接没有任何文本修饰并且颜色呈白色。当用户的鼠标停在该链接上时，文本颜色变红。

　　注意，这里没有使用访问过的或活动的"假"类。这是因为该窗口总是忽略这个链接的href属性(它已经在它的事件处理器中返回了false)。因此，该链接从来不会真正处于活动或被访问状态。

　　然后，ajaxWebSearchResults类使结果栏的风格如下：

.ajaxWebSearchResults { 　background-color: #d3e5fa; 　padding: 5px; }

　　这个元素不要求使用CSS属性。现有属性仅用于定义结果栏并且使它比较容易读取。背景颜色是一个浅蓝色并且围绕边缘有5个像素的填充。当然，你能够定制加载消息的风格：

.ajaxWebSearchResults div { 　text-align: center; 　font: bold 14px tahoma; 　color:#0a246a; }

　　这个元素没有一个类名，但是你仍然能够通过使用前面的示例中展示的parent child标志控制它的风格。这个示例把文本放置在＜div/＞元素的中央，并且给它一个加粗蓝色的字体，且有14个像素高。

　　最后一个你需要风格化的元素是结果链接。这些链接有一个类名叫ajaxWebSearchLink：

a.ajaxWebSearchLink { 　font: 12px tahoma; 　padding: 2px; 　display: block; 　color: #0a246a; } a:hover.ajaxWebSearchLink { 　color: white; 　background-color: #316ac5; } a:visited.ajaxWebSearchLink { 　color: purple; }

　　唯一要求的属性是display属性（被设置为block）。这使每一个链接都能够在它自己的行上显示。填充空白部分大约有两个像素宽，使各个链接之间分开一些，从而使它们更易于读取。字体名为Tahoma并且有12像素高。它们的颜色是暗蓝色，与ajaxWebSearchResults的浅蓝色背景形成对照。

　　当用户在这些链接上移动鼠标时，背景颜色被设置为蓝色，而文本颜色改变为白色。

　　在前面的代码的最后一条规则中访问过的"假"类被设置。这是为了给用户提供用户接口暗示-它们已经被使用过。通过把访问过的"假"类设置为显示一种紫色，用户就可以知道它们已经访问过那个链接，从而节省他们的时间-不必再访问一个他们可能不想看的页面。

　　现在，让我

评论 (0) All

登陆 还没注册？