中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

您的位置: 首頁 > 技術(shù)文檔 > 網(wǎng)頁制作 > Ajax標(biāo)簽導(dǎo)航實例詳解
再談文字溢出問題 回到列表 XMLHTTPRequest的屬性和方法簡介
 Ajax標(biāo)簽導(dǎo)航實例詳解

作者:yaohaixiao 時間: 2008-02-25 文檔類型:原創(chuàng) 來自:藍(lán)色理想

第 1 頁 代碼篇
第 2 頁 CSS技巧篇
第 3 頁 Javascript技巧篇
第 4 頁 DOM技巧篇
第 5 頁 大結(jié)局

CSS技巧篇(position屬性的運(yùn)用技巧)

下面開始我們的分析了,先來看看這段XHTML代碼:

<ul class="tabs" id="news">
         <li class="first" id="news-0"><a href="news/news0.htm">網(wǎng)站重構(gòu)</a><span></span></li>
         <li id="news-1"><a href="news/news1.htm">CSS布局實錄</a><span></span></li>
         <li id="news-2"><a href="news/news2.htm">海嘯的地盤</a><span></span></li>
         <li id="news-3"><a href="news/news3.htm">Ajax高級編程</a><span></span></li>
</ul>
<div class="clearfix cnt" id="newsCnt">
          <img src="img/girl-1.jpg" alt="林志琳" />
            <ul>
              <li><a href="#">PRG全棉短袖襯衣最后的搶購機(jī)搶購機(jī)</a> 2006-08-15</li>
              <li><a href="#">PRG全棉短袖襯衣最后的搶購機(jī)搶購機(jī)</a> 2006-08-15</li>
              <li><a href="#">PRG全棉短袖襯衣最后的搶購機(jī)搶購機(jī)</a> 2006-08-15</li>
              <li><a href="#">PRG全棉短袖襯衣最后的搶購機(jī)搶購機(jī)</a> 2006-08-15</li>
              <li><a href="#">PRG全棉短袖襯衣最后的搶購機(jī)搶購機(jī)</a> 2006-08-15</li>
              <li><a href="#">PRG全棉短袖襯衣最后的搶購機(jī)搶購機(jī)</a> 2006-08-15</li>
            </ul>
</div>

id="news"      - news就是我們的導(dǎo)航標(biāo)簽的ID;
id="newsCnt"   - newsCnt就是我們要寫入信息的目標(biāo)DOM節(jié)點(diǎn);
class="first"  - first當(dāng)前(第一個)標(biāo)簽的樣式;
id="news-0"    - news-0 通過”-“分開,我們就分別可以得到news(導(dǎo)航標(biāo)簽ID),0(標(biāo)簽[li]在導(dǎo)航標(biāo)簽中的索引值)
<a href="news/news0.htm">網(wǎng)站重構(gòu)</a> - 超鏈接
<span></span>                         - 標(biāo)簽間的分割線

我羅列的這些東西,相信大家開始看出了些頭緒了,呵呵,不過別急!在我們看處理的腳本之前,先讓我們來看看導(dǎo)航標(biāo)簽的樣式,主要是看看我們對分割線的處理(一點(diǎn)CSS處理的技巧)。

/* 導(dǎo)航標(biāo)簽的樣式 */
.tabs li{
   float:left;
   display:inline;
   text-align:center;
   width:120px;
   height:12px;
   padding:4px 0 6px 0;
   overflow:hidden;
   letter-spacing:1px;
   position:relative;
}

/* 標(biāo)簽分割線的樣式 */
.tabs li span{
   position:absolute;
   right:0;
   top:3px;
   width:2px;
   height:16px;
   overflow:hidden;
   font-size:1px;
   background-image:url(../img/tab_sline.gif); 
}

技巧就是.tab li中的”position:relative;“和.tabs li span中”position:absolute;“結(jié)合使用的技巧(呵呵,其實我也是看了YAHOO的標(biāo)簽后才這么用的),F(xiàn)在我們就來了解下position屬性吧(CSS講座開始,不過是好東西哦,呵呵。

position:絕對定位,指本體對上級的定位(本人理解的說法),有3個可選值static(靜態(tài)定位-默認(rèn)值)、relative(絕對相對定位)、absolute(絕對定位)。

relative:他是參照父級的原始點(diǎn)為原始點(diǎn),無父級則以BODY的原始點(diǎn)為原始點(diǎn),配合top、right、bottom、left進(jìn)行定位,當(dāng)父級內(nèi)有padding等CSS屬性時,當(dāng)前級的原始點(diǎn)則參照父級內(nèi)容區(qū)的原始點(diǎn)進(jìn)行定位。如下圖一:

absolute:他的意思是絕對定位,他是參照瀏覽器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面簡稱TRBL)進(jìn)行定位,在沒有設(shè)定TRBL,默認(rèn)依據(jù)父級的做標(biāo)原始點(diǎn)為原始點(diǎn)。如果設(shè)定TRBL并且父級沒有設(shè)定position屬性,那么當(dāng)前的absolute則以瀏覽器左上角為原始點(diǎn)進(jìn)行定位,位置將由TRBL決定。如下圖二:

不知道你看出些其他的什么特性出來了沒有?我們仔細(xì)看下圖二,你發(fā)現(xiàn)沒有,在用absolute定位的時候,它可以覆蓋在與其相鄰的節(jié)點(diǎn)上(不是因為它設(shè)置了z-index屬性),而是它的一個特性--不占布局或者說不影響鄰居節(jié)點(diǎn)的布局。而relative則不一樣,它會影響鄰居節(jié)點(diǎn)的布局。我們通過圖一還看不出來,來看圖三:

大家注意到圖片中的灰色部分沒有?這個就是我要說的,這塊灰色的部分的大小就是#relative的大小,這個說明了什么?表明它會影響鄰居節(jié)點(diǎn)的布局,而且鄰居節(jié)點(diǎn)接下來的位置就是#relative使用一般margin定位的末端。講詳細(xì)點(diǎn),就是說雖然#relative顯示的在屏幕的位置是紅色塊的地方,但是實際仍然要占據(jù)它起始位置所在的布局(它的寬和高)的大小。這里#relative的起點(diǎn)是body,那么它站的布局就是從body起點(diǎn)開始width:250px;height:250px;(加padding:5px)的布局(大。,也就是我們看到圖中灰色部分。呵呵,好繞是嗎?仔細(xì)看看,多用下就明白了。

好了,現(xiàn)在就我們ajax標(biāo)簽導(dǎo)航中使用的是relative+absolute的結(jié)合,當(dāng)一個absolute的節(jié)點(diǎn)包含在一個relative的節(jié)點(diǎn)中時,它的”原始點(diǎn)“就是relative節(jié)點(diǎn)了,而不是“參照瀏覽器的左上角-body”了,而它又不影響其鄰居節(jié)點(diǎn)的布局,所以它就不會影響<li></li>中間文字(文本節(jié)點(diǎn))的布局了(這里li的空間夠大)。這樣以來,就得到了我們標(biāo)簽中,每個標(biāo)簽后有一個分隔線的樣式了。如圖四:

OK,我們對position屬性和它的值的使用搞清楚了。接下來就來看看是怎么來更改當(dāng)前選中標(biāo)簽(li)的樣式吧:

.tabs li{
   float:left;
   display:inline;
   text-align:center;
   width:120px;
   height:12px;
   padding:4px 0 6px 0;
   overflow:hidden;
   letter-spacing:1px;
   position:relative;
}

/* 第一項被選中的樣式 */
.tabs li.first{
   background-image:url(../img/tab_active1.gif);
}

/* 其他項被選中的樣式 */
.tabs li.current{
   background-image:url(../img/tab_active2.gif);
}

/* 被選中項的字體樣式 */
.tabs li.current,
.tabs li.first{
   font-weight:bold;
}

/* 被選中項的鏈接顏色樣式 */
.tabs li.current a,
.tabs li.first a{
   color:#D45417;
}

.tabs li span{
   position:absolute;
   right:0;
   top:3px;
   width:2px;
   height:16px;
   overflow:hidden;
   font-size:1px;
   background-image:url(../img/tab_sline.gif); 
}

/* 選中項和選中項前一項的樣式 */
.tabs li.first span,
.tabs li.current span,
.tabs li.off span{/* 選中項前一項 */
   display:none;
}

這里要簡單說的就是樣式表CSS繼承(層疊)的順序,一定要是先寫標(biāo)簽(li)標(biāo)簽?zāi)J(rèn)(背景)樣式再寫選中時的(背景)樣式,然后是默認(rèn)分隔線(span)-> 選中時 -> 失去焦點(diǎn)時這樣一個順序。至于CSS的繼承順序的具體只是,大家可以google一下。

出處:藍(lán)色理想
責(zé)任編輯:moby

上一頁 代碼篇 下一頁 Javascript技巧篇

◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論,我還想發(fā)表評論

相關(guān)文章 更多相關(guān)鏈接
不用組件實現(xiàn)Ajax效果
用 AjaxTags 簡化 Ajax 開發(fā)
靜態(tài)頁面分頁的AJAX實現(xiàn)
Ajax的小貼士
AJAX通用類:AJAXRequest v0.3
作者文章
XMLHTTPRequest的屬性和方法簡介
Ajax標(biāo)簽導(dǎo)航效果
關(guān)鍵字搜索 常規(guī)搜索 推薦文檔
熱門搜索:CSS Fireworks 設(shè)計比賽 網(wǎng)頁制作 web標(biāo)準(zhǔn) 用戶體驗 UE photoshop Dreamweaver Studio8 Flash 手繪 CG
站點(diǎn)最新 站點(diǎn)最新列表
周大!熬•自然”設(shè)計大賽開啟
國際體驗設(shè)計大會7月將在京舉行
中國國防科技信息中心標(biāo)志征集
云計算如何讓安全問題可控
云計算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機(jī)會
阿里行云
云手機(jī)年終巨獻(xiàn),送禮標(biāo)配299起
阿里巴巴CTO王堅的"云和互聯(lián)網(wǎng)觀"
1499元買真八核 云OS雙蛋大促
首屆COCO桌面手機(jī)主題設(shè)計大賽
欄目最新 欄目最新列表
淺談JavaScript編程語言的編碼規(guī)范
如何在illustrator中繪制臺歷
Ps簡單繪制一個可愛的鉛筆圖標(biāo)
數(shù)據(jù)同步算法研究
用ps作簡單的作品展示頁面
CSS定位機(jī)制之一:普通流
25個最佳最閃亮的Eclipse開發(fā)項目
Illustrator中制作針線縫制文字效果
Photoshop制作印刷凹凸字體
VS2010中創(chuàng)建自定義SQL Rule
>> 分頁 首頁 前頁 后頁 尾頁 頁次:2/51個記錄/頁 轉(zhuǎn)到 頁 共5個記錄

藍(lán)色理想版權(quán)申明:除部分特別聲明不要轉(zhuǎn)載,或者授權(quán)我站獨(dú)家播發(fā)的文章外,大家可以自由轉(zhuǎn)載我站點(diǎn)的原創(chuàng)文章,但原作者和來自我站的鏈接必須保留(非我站原創(chuàng)的,按照原來自一節(jié),自行鏈接)。文章版權(quán)歸我站和作者共有。

轉(zhuǎn)載要求:轉(zhuǎn)載之圖片、文件,鏈接請不要盜鏈到本站,且不準(zhǔn)打上各自站點(diǎn)的水印,亦不能抹去我站點(diǎn)水印。

特別注意:本站所提供的攝影照片,插畫,設(shè)計作品,如需使用,請與原作者聯(lián)系,版權(quán)歸原作者所有,文章若有侵犯作者版權(quán),請與我們聯(lián)系,我們將立即刪除修改。

您的評論
用戶名:  口令:
說明:輸入正確的用戶名和密碼才能參與評論。如果您不是本站會員,你可以注冊 為本站會員。
注意:文章中的鏈接、內(nèi)容等需要修改的錯誤,請用報告錯誤,以利文檔及時修改。
不評分 1 2 3 4 5
注意:請不要在評論中含與內(nèi)容無關(guān)的廣告鏈接,違者封ID
請您注意:
·不良評論請用報告管理員,以利管理員及時刪除。
·尊重網(wǎng)上道德,遵守中華人民共和國的各項有關(guān)法律法規(guī)
·承擔(dān)一切因您的行為而直接或間接導(dǎo)致的民事或刑事法律責(zé)任
·本站評論管理人員有權(quán)保留或刪除其管轄評論中的任意內(nèi)容
·您在本站發(fā)表的作品,本站有權(quán)在網(wǎng)站內(nèi)轉(zhuǎn)載或引用
·參與本評論即表明您已經(jīng)閱讀并接受上述條款
推薦文檔 | 打印文檔 | 評論文檔 | 報告錯誤  
專業(yè)書推薦 更多內(nèi)容
網(wǎng)站可用性測試及優(yōu)化指南
《寫給大家看的色彩書1》
《跟我去香港》
眾妙之門—網(wǎng)站UI 設(shè)計之道
《Flex 4.0 RIA開發(fā)寶典》
《贏在設(shè)計》
犀利開發(fā)—jQuery內(nèi)核詳解與實踐
作品集 更多內(nèi)容

雜⑦雜⑧ Gold NORMANA V2