徹底弄懂CSS盒子模式之五 - CSS+DIV -

徹底弄懂CSS盒子模式之五

時間:2013-08-13 12:43:43   來源:   評論:加載中...   點擊:加載中...
在本人上一篇教程《徹底弄懂CSS盒子模式四(絕對定位和相對定位)》中最后有演示一個綜合導航實例,那時因為時間關系,同時本人也覺得有必要將這實例分出來單獨講一下,所以沒有把實例講

在本人上一篇教程《徹底弄懂CSS盒子模式四(絕對定位和相對定位)》中最后有演示一個綜合導航實例,那時因為時間關系,同時本人也覺得有必要將這實例分出來單獨講一下,所以沒有把實例講解教程寫到上一篇教程中。這個教程可以作為CSS定位學習的強化練習,當然教程我也不只是單一的講解做的步驟,還會和大家一起來分析一下設計思路,同時分享本人在做的過程中發現的一些問題供大家防范參考。為了兼顧一下沒有來得及看我上一篇教程的網友,我再次給出代碼運行框,大家可以先運行看看效果,不過建議最好先看一下本人上一篇教程,除非你已對定位有所了解。另外本實例還是不夠完善的,比如結構的規范等等,如果你能有更好的實現方法,不妨在回復中寫出來與大家分享,同時也讓我這個積極的菜鳥學習下。

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


 

一、實例實現功能介紹

本實例為一個欄目鏈接列表,鼠標移動到鏈接所在行,鏈接文本顏色會改變,同時會在鏈接右下側顯示一個與鏈接相干的信息面板,信息面板中左邊有一幅圖片,圖片右側又有三項說明,它們分別是“歌名”、“歌手”、“介紹”。這個欄目被重定位到其它地方,效果、位置不會發生改變,全程只用CSS+DIV實現,無任何腳本。


實例效果截圖

二、結構和樣式代碼

1.結構

 

 

2.樣式

*{
    margin:0px;
    padding:0px;
}
body {
    margin:10px;
    font-size: 13px;
}
a:link {
    color: #666;
    text-decoration: none;/*去除鏈接下劃線*/
}
a:visited {
    color: #666;
    text-decoration: none;
}
a:hover {
    color: #F90;
}
h3 {
    color: #FFF;
    background-color: #F90;
    width: 100px;
    padding-top:3px;
    text-align:center;
}
ul {
    width: 300px;
    border-top: 1px solid #F60;/*使其上邊有一線條,與標題h3吻合*/
}
ul li {
    padding:5px;
    border-bottom: 1px solid #CCC;
    list-style:none;/*去除列表樣式,這對于標準瀏覽器很重要*/
}
a {
    position: relative;/*設置其定位方法為相對定位,等一下內部信息面板就可以相對它定位*/
    display:block;/*讓鏈接以塊狀呈現,這樣不用點中鏈接文字就可以響應鏈接*/
}
a div {
    display: none;/*初始化信息面板不顯示*/
}
a:hover {background:#fff;}/*IE7以下版本A狀態偽類bug*/
a:hover div {
    position: absolute;
    padding:5px;
    display:block;
    width: 245px;/*只給出寬度,高讓它隨內容多少自動調整*/
    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;/*去除圖片邊框,默認情況下,鏈接內的圖片在標準瀏覽器會出現邊框*/
    display:block;
    position: absolute;/*用絕對定位抽離正常文本流,不然在設計的時候考慮到不同瀏覽器正常顯示會更麻煩*/
    top:5px;/*這里的5px是與信息面板大盒子的填充一樣的*/
    left:5px;
}
dl {
    width: 160px;
    float:right;
    color: #999;
    line-height:20px;
}
dl dd span {
    font-weight: bold;
    color: #639;
}

 

2.樣式

*{
    margin:0px;
    padding:0px;
}
body {
    margin:10px;
    font-size: 13px;
}
a:link {
    color: #666;
    text-decoration: none;/*去除鏈接下劃線*/
}
a:visited {
    color: #666;
    text-decoration: none;
}
a:hover {
    color: #F90;
}
h3 {
    color: #FFF;
    background-color: #F90;
    width: 100px;
    padding-top:3px;
    text-align:center;
}
ul {
    width: 300px;
    border-top: 1px solid #F60;/*使其上邊有一線條,與標題h3吻合*/
}
ul li {
    padding:5px;
    border-bottom: 1px solid #CCC;
    list-style:none;/*去除列表樣式,這對于標準瀏覽器很重要*/
}
a {
    position: relative;/*設置其定位方法為相對定位,等一下內部信息面板就可以相對它定位*/
    display:block;/*讓鏈接以塊狀呈現,這樣不用點中鏈接文字就可以響應鏈接*/
}
a div {
    display: none;/*初始化信息面板不顯示*/
}
a:hover {background:#fff;}/*IE7以下版本A狀態偽類bug*/
a:hover div {
    position: absolute;
    padding:5px;
    display:block;
    width: 245px;/*只給出寬度,高讓它隨內容多少自動調整*/
    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;/*去除圖片邊框,默認情況下,鏈接內的圖片在標準瀏覽器會出現邊框*/
    display:block;
    position: absolute;/*用絕對定位抽離正常文本流,不然在設計的時候考慮到不同瀏覽器正常顯示會更麻煩*/
    top:5px;/*這里的5px是與信息面板大盒子的填充一樣的*/
    left:5px;
}
dl {
    width: 160px;
    float:right;
    color: #999;
    line-height:20px;
}
dl dd span {
    font-weight: bold;
    color: #639;
}



相關熱詞搜索:

 
上一篇:徹底弄懂CSS盒子模式之三
下一篇:最后一頁
收藏 將此文推薦給朋友
分享到:
10个数复式三中三多少组公式