|
三、分析實現(xiàn)方法
1．從上面的截圖可以看到有一標(biāo)題，標(biāo)題下面是一個列表，所以很容易想到用<h>標(biāo)簽和無序列表<ul><li>來做結(jié)構(gòu)，標(biāo)題是一塊有背景的矩形塊，文字白色，文字在矩形塊中居中對齊，所以給<h>標(biāo)簽加個寬度控制，最后為了讓文本看起來在垂直方向上居中，再加個上邊填充，所以用到下面樣式：
h3 {
color: #FFF;
background-color: #F90;
width: 100px;
padding-top:3px;
text-align:center;
}
2．下面是一個<ul>區(qū)塊，我讓它有一個上線框，這樣與標(biāo)題吻合在一起就做出了標(biāo)題效果，而<ul>里面的<li>要有一條下劃線，以形成一種分行效果，于是用到下邊框，這里用到下面樣式：
ul {
width: 300px;
border-top: 1px solid #F60;/*使其上邊有一線條，與標(biāo)題h3吻合*/
}
ul li {
padding:5px;
border-bottom: 1px solid #CCC;
list-style:none;/*去除列表樣式，這對于標(biāo)準(zhǔn)瀏覽器很重要*/
}
3．列表中的鏈接文字點擊效果就很簡單了，大家自己看代碼就行了，注意一點就是用到了下列一條樣式：
a {
position: relative;/*設(shè)置其定位方法為相對定位，等一下內(nèi)部信息面板就可以相對它定位*/
display:block;/*讓鏈接以塊狀呈現(xiàn)，這樣不用點中鏈接文字就可以響應(yīng)鏈接*/
}
4．組織信息面板布局（實現(xiàn)的顯示與隱藏效果放在后面再說）。信息面板為一個有淺藍色背景和較深藍色邊框，并且有5px填充的盒子，盒子左邊安排一幅圖片，圖片大小用CSS控制，圖片右邊為一個有清晰數(shù)據(jù)結(jié)構(gòu)列表，為了不出現(xiàn)與前邊父級<li>的重復(fù)使用（不然等一下CSS樣式控制會較麻煩，因為內(nèi)部的<li>會繼承父級的樣式，除非你又要新定義一則樣式來逐一清除父級帶給它的樣式），所以我用到<dl><dd>結(jié)構(gòu)，只設(shè)定<dl>一個寬度，高度不設(shè)定，讓其高度隨說明文字增多而增高，同時不用絕對定位，以便讓它可以把父級撐高，然后并讓它浮動到右邊。而信息面板中的圖片則用絕對定位方法把它定位在信息面板左上角，用5px偏移做到與父級5px填充一致，這樣看起來會自然點。當(dāng)然也許你認為還有很多簡單的方法可以實現(xiàn)，比如：讓圖片左浮動，而且再讓<dl>浮動就行了，此方法測試表明在IE中能正常顯示，在FF中會有問題，因為我本意要讓右邊說明文字從上到下直列下來，當(dāng)文字高過圖片時，不能出現(xiàn)文字環(huán)繞圖片的情況，恰好這種情況出現(xiàn)在FF中（因為<dl>是在正常文本流中，而左側(cè)圖片又用了左浮動，所以問題出現(xiàn)），所以再想到讓<dl>右浮動，但此時圖片在正常文本流中又不能放到左上方了，既然浮動會影響到<dl>內(nèi)的文本流，那么就用絕對定位讓其脫離正常文本流，但是問題又來了，這時它無法做到讓父級高度自適應(yīng)。所以最后想到圖片是固定在信息面板的左上角的，就把它絕對定位，再讓<dl>浮動到右邊去，結(jié)果發(fā)現(xiàn)這個方法還行，用到下面樣式：
a:hover div {
position: absolute;
padding:5px;
display:block;
width: 245px;/*只給出寬度，高讓它隨內(nèi)容多少自動調(diào)整*/
left:150px;/*這是相對父級A的定位*/
top: 20px;
border: 1px solid rgb(91,185,233);
background-color: rgb(228,246,255);
z-index:999;/*把信息面板提到一個較高的位置，使鏈接文字過長時不會與面板重疊,但這只對FF有效*/
}
a img {
width:80px;
height:80px;
border:none;/*去除圖片邊框，默認情況下，鏈接內(nèi)的圖片在標(biāo)準(zhǔn)瀏覽器會出現(xiàn)邊框*/
display:block;
position: absolute;/*用絕對定位抽離正常文本流，不然在設(shè)計的時候考慮到不同瀏覽器正常顯示會更麻煩*/
top:5px;/*這里的5px是與信息面板大盒子的填充一樣的*/
left:5px;
}
dl {
width: 160px;
float:right;
color: #999;
line-height:20px;
}
dl dd span {
font-weight: bold;
color: #639;
}
5．實現(xiàn)隱藏與顯示效果。這個隱藏顯示效果是由鼠標(biāo)觸發(fā)的，所以要自然想到鏈接A（因為現(xiàn)在我們是用CSS實現(xiàn)，你不要想到用javascript），并且要把信息面板安排在<a></a>內(nèi)，因為到時就可以用CSS類型選擇符配合樣式的a:hover偽類控制其顯示和隱藏了。另外一個很重要的問題是IE7以下版本有個A狀態(tài)偽類BUG，這個BUG使你本來看似沒有問題的CSS設(shè)置在IE中之前被隱藏的面板無法顯示出來，這里用到一個常用的方法，加一條樣式：a:hover {background:#fff;}以消除存在問題。
（1）讓信息面板初始狀態(tài)隱藏，用到樣式：
a div {
display: none;/*初始化信息面板不顯示*/
}
（2）顯示面板，用到樣式：
a:hover div {
position: absolute;
padding:5px;
display:block;
width: 245px;/*只給出寬度，高讓它隨內(nèi)容多少自動調(diào)整*/
left:150px;/*這是相對父級A的定位*/
top: 20px;
border: 1px solid rgb(91,185,233);
background-color: rgb(228,246,255);
z-index:999;/*把信息面板提到一個較高的位置，使鏈接文字過長時不會與面板重疊,但這只對FF有效*/
}
四、收尾工作
最后整合一下樣式和結(jié)構(gòu)代碼就完成了此實例的制作。最后再作一下設(shè)計思路擴展指引：像此類隱藏顯示的CSS控制設(shè)計還可以用到邊界的方法，即初始狀態(tài)用一個很大的margin負值把對象移出可視區(qū)域，鼠標(biāo)響應(yīng)時再重新定位對象回到正常該出現(xiàn)的位置。另外相信你看完本教程后，自己喜歡的漂亮鏈接提示面板自己可以做出來了。
經(jīng)典論壇討論：
http://bbs.blueidea.com/thread-2733460-1-1.html
本文鏈接：http://www.95time.cn/tech/web/2007/4602.asp 
出處：藍色理想
責(zé)任編輯：moby
上一頁 定位強化練習(xí) [1] 下一頁
◎進入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁 
第 2 頁 定位強化練習(xí) [2]
