var arrBaiduCproConfig=new Array(); arrBaiduCproConfig['uid'] = 2214; arrBaiduCproConfig['n'] = 'sayyescpr'; arrBaiduCproConfig['tm'] = 48; arrBaiduCproConfig['cm'] = 100; arrBaiduCproConfig['um'] = 50; arrBaiduCproConfig['rad'] = 1; arrBaiduCproConfig['w'] = 336; arrBaiduCproConfig['h'] = 280; arrBaiduCproConfig['bd'] = '#ffffff'; arrBaiduCproConfig['bg'] = '#ffffff'; arrBaiduCproConfig['tt'] = '#0000ff'; arrBaiduCproConfig['ct'] = '#000000'; arrBaiduCproConfig['url'] = '#666666'; arrBaiduCproConfig['bdl'] = '#CCCCCC'; arrBaiduCproConfig['wn'] = 1; arrBaiduCproConfig['hn'] = 4; arrBaiduCproConfig['ta'] = 'center'; arrBaiduCproConfig['tl'] = 'top'; arrBaiduCproConfig['bu'] = 1; <!-- document.write(baiduCproIFrame()); --> |
這一次還是繼續為大家介紹一些樣式表應用方面的技巧。大家知道樣式表的定義是針對容器(tag)而言的,那么在HTML 中,Anchor(錨,即超級鏈接標記)是一類作用非常之大的容器。它實現了HTML最根本的功能(超文本,超鏈接)。而CSS也有關于Anchor的一些特殊用法。使得頁面的聯接更緊湊,更富有條理。
跟其它的tag一樣,Anchor的定義方法也可以是:
A:{css標記}
可是它特殊之處在于,它有各種相關的屬性,比如visited(瀏覽過),active(激活),hover(鼠標在其上),link(有鏈接)。可以根據不同需要而做出專門的定義以根據用戶不同的動作做出反應,從而形成比較好的效果。
比如說,您可以做以下的定義:
< html>
< head>
< title>Untitled Document< /title>
< meta http-equiv="Content-Type" content="text/html; charset=gb2312">
< style type="text/css">
< !-- a:active { font-family: "宋體"; font-size: 9pt; color: #9999FF; text-decoration: underline}a:hover { font-family: "宋體"; font-size: 9pt; color: #99FF99; text-decoration: underline}a:link { font-family: "宋體"; font-size: 9pt; color: #FFCCCC; text-decoration: none}-->
< /style>
< /head>
< body bgcolor="#000000">
< a href="www.www.www">返回< /a>
< /body>
< /html>
圖一
|
圖二
|
在這個例子中,定義了錨的active,hover,link三種狀態。當例子中存在著超級鏈接時,就會呈現出如圖一的沒有下劃線的淡紅,而將鼠標置于其上時,鼠標變成了手形,而這個鏈接則會呈現出如圖二的亮綠色。而一旦訪問過后,該鏈接則會呈現出深紅色。這種變化既美觀了頁面,又提醒了用戶。為絕大多數網站采用。
事實上,有很多時候我們在沒有使用錨的時候也需要對象根據用戶的動作作一些改變。這時候我們往往需要當用戶控制鼠標經過該對象時,能夠給他一些提示。比如鼠標換個形狀。像手形,十字形之類的,再結合必要的javascript,不就可以出現很炫的效果了嗎?而且很多時候使用了錨的話容易改變當前焦點。比如當我們使用到Dhtml中的層概念時,如果是層是不可見的,利用錨將其改為可視,可一旦鼠標移上去以后,焦點馬上到了層的上面,令大家感到非常不方便。不過,css里面剛好有這個屬性,可以幫我們改變鼠標屬性,解除這個煩惱。我們現在就看這個例子:
< html>
< head>
< title>測試一< /title>
< meta http-equiv="Content-Type" content="text/html; charset=gb2312">
< style type="text/css">
< !-- .text1 { font-family: "宋體"; font-size: 9pt; color: #9999FF; cursor: crosshair}
-->
< /style>
< /head>
< body bgcolor="#FFFFFF">
< p align="center" class="text1" onClick="javascript:{window.close()}">關閉窗口< /p>
< /body>
< /html>
這里的關閉窗口的這個文字鼠標屬性為一個十字,所以當移上去時,鼠標就變化為十字形。而點擊它則會出現關閉窗口事件。
這個屬性能使用的鼠標形狀還有:
crosshair:十字;
hand:手形;
text:文本光標;
wait:沙漏;
help:問號;
e-resize:右箭頭;
ne-resize:右上向箭頭;
n-resize:向上箭頭;
nw-resize:左上箭頭;
w-resize:向左箭頭;
sw-resize:左下箭頭;
s-resize:向下箭頭;
se-resize:右下箭頭。
好了,關于css的一些技巧性的東西就為大家介紹到這里啦。
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
