學習網頁技術：徹底弄懂CSS盒子模式之五

最後更新：2017-02-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

css|網頁

1.徹底弄懂CSS盒子模式一(DIV排版快速入門)
2.徹底弄懂CSS盒子模式二(導覽列執行個體)
3.徹底弄懂CSS盒子模式三(浮動的表演和清除的自述)
4.徹底弄懂CSS盒子模式四(絕對位置和相對定位)

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

運行代碼框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>相對定位和絕對位置執行個體--作者：唐國輝</title><style type="text/css"></style></head><body><h3>最新單曲</h3><ul><li><a href="#">01 愛的文身黃聖依<div><img src="/UploadPic/2007-7/20077720480422.jpg" alt="" /><dl> <dd><span>歌名:</span>愛的文身</dd> <dd><span>歌手:</span>黃聖依</dd> <dd><span>介紹:</span>黃聖依唱片主打歌的確是她個人的內心寫照，《愛的文身》由香港音樂大師金培達作曲，製作人陳少琪親自填詞。</dd></dl></div></a></li><li><a href="#">02 累了阿信<div><img src="/UploadPic/2007-7/20077720481919.jpg" alt="" /><dl> <dd><span>歌名:</span>累了</dd> <dd><span>歌手:</span>阿信</dd> <dd><span>介紹:</span>青春校園偶像劇----【熱情仲夏】片尾曲</dd></dl></div></a></li><li><a href="#">03 漫漫慢慢阿朵<div><img src="/UploadPic/2007-7/20077720481833.jpg" alt="" /><dl> <dd><span>歌名:</span>漫漫慢慢</dd> <dd><span>歌手:</span>阿朵</dd> <dd><span>介紹:</span>阿朵搶聽版最新單曲《漫漫慢慢》讓你認識阿朵柔情的一面，展現阿朵百變的風格。</dd></dl></div></a></li><li><a href="#">04 我懷念的孫燕姿<div><img src="/UploadPic/2007-7/20077720481374.jpg" alt="" /><dl> <dd><span>歌名:</span>我懷念的</dd> <dd><span>歌手:</span>孫燕姿</dd> <dd><span>介紹:</span>令人感同身受的抒情歌，在故事性的架構中，有著平凡但又能扣人心弦的情感，是一首高度共鳴的抒情歌。</dd></dl></div></a></li><li><a href="#">05 聽,花期越來越近後弦<div><img src="/UploadPic/2007-7/20077720481629.jpg" alt="" /><dl> <dd><span>歌名:</span>花期越來越近</dd> <dd><span>歌手:</span>後弦</dd> <dd><span>介紹:</span>後弦參與《花開的聲音》這個舞台劇裡的一部分，邀請了後弦去演唱這首歌，此歌就是為舞台劇《花開的聲音》而創作。</dd></dl></div></a></li></ul></body></html>

[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

一、執行個體實現功能介紹

本執行個體為一個欄目連結清單，滑鼠移動到連結所在行，連結文本顏色會改變，同時會在連結右下側顯示一個與連結相干的資訊面板，資訊面板中左邊有一幅圖片，圖片右側又有三項說明，它們分別是“歌名”、“歌手”、“介紹”。這個欄目被重定位到其它地方，效果、位置不會發生改變，全程只用CSS+DIV實現，無任何指令碼。

執行個體效果截圖

二、結構和樣式代碼

1．結構

<li><a href="#">01 愛的文身黃聖依<div><img src="http://imgcache.qq.com/music/photo/singer/54/
singerpic_5554_0.jpg" alt="" />
<dl>
    <dd><span>歌名:</span>愛的文身</dd>
    <dd><span>歌手:</span>黃聖依</dd>
    <dd><span>介紹:</span>黃聖依唱片主打歌的確是她個人的內心寫照，《愛的文身》由香港音樂大師金培達作曲，製作人陳少琪親自填詞。</dd>
</dl></div></a></li>

<li><a href="#">02 累了阿信<div><img src="http://imgcache.qq.com/music/photo/singer/47/
singerpic_6547_0.jpg" alt="" />
<dl>
    <dd><span>歌名:</span>累了</dd>
    <dd><span>歌手:</span>阿信</dd>
    <dd><span>介紹:</span>青春校園偶像劇----【熱情仲夏】片尾曲</dd>
</dl></div></a></li>

<li><a href="#">03 漫漫慢慢阿朵<div><img src="http://imgcache.qq.com/music/photo/singer/61/
singerpic_6361_0.jpg" alt="" />
<dl>
    <dd><span>歌名:</span>漫漫慢慢</dd>
    <dd><span>歌手:</span>阿朵</dd>
    <dd><span>介紹:</span>阿朵搶聽版最新單曲《漫漫慢慢》讓你認識阿朵柔情的一面，展現阿朵百變的風格。</dd>
</dl></div></a></li>

<li><a href="#">04 我懷念的孫燕姿<div><img src="http://imgcache.qq.com/music/photo/singer/9/
singerpic_109_0.jpg" alt="" />
<dl>
    <dd><span>歌名:</span>我懷念的</dd>
    <dd><span>歌手:</span>孫燕姿</dd>
    <dd><span>介紹:</span>令人感同身受的抒情歌，在故事性的架構中，有著平凡但又能扣人心弦的情感，是一首高度共鳴的抒情歌。</dd>
</dl></div></a></li>

<li><a href="#">05 聽,花期越來越近後弦<div><img src="http://imgcache.qq.com/music/photo/singer/33/
singerpic_4733_0.jpg" alt="" />
<dl>
    <dd><span>歌名:</span>花期越來越近</dd>
    <dd><span>歌手:</span>後弦</dd>
    <dd><span>介紹:</span>後弦參與《花開的聲音》這個舞台劇裡的一部分，邀請了後弦去演唱這首歌，此歌就是為舞台劇《花開的聲音》而創作。</dd>
</dl></div></a></li>

</ul>

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;
}

三、分析實現方法

1．從上面的截圖可以看到有一標題，標題下面是一個列表，所以很容易想到用<h>標籤和無序列表<ul><li>來做結構，標題是一塊有背景的矩形塊，文字白色，文字在矩形塊中置中對齊，所以給<h>標籤加個寬度控制，最後為了讓文本看起來在垂直方向上置中，再加個上邊填充，所以用到下面樣式：

h3 {
    color: #FFF;
    background-color: #F90;
    width: 100px;
    padding-top:3px;
    text-align:center;
}

2．下面是一個<ul>區塊，我讓它有一個上線框，這樣與標題吻合在一起就做出了標題效果，而<ul>裡面的<li>要有一條底線，以形成一種分行效果，於是用到下邊框，這裡用到下面樣式：

ul {
    width: 300px;
    border-top: 1px solid #F60;/*使其上邊有一線條，與標題h3吻合*/
}
ul li {
    padding:5px;
    border-bottom: 1px solid #CCC;
    list-style:none;/*去除列表樣式，這對於標準瀏覽器很重要*/
}

3．列表中的連結文字點擊效果就很簡單了，大家自己看代碼就行了，注意一點就是用到了下列一條樣式：

a {
position: relative;/*設定其定位方法為相對定位，等一下內部資訊面板就可以相對它定位*/
display:block;/*讓連結以塊狀呈現，這樣不用點中連結文字就可以響應連結*/
}

4．組織資訊面板布局（實現的顯示與隱藏效果放在後面再說）。資訊面板為一個有淺藍色背景和較深藍色邊框，並且有5px填充的盒子，盒子左邊安排一幅圖片，圖片大小用CSS控制，圖片右邊為一個有清晰資料結構列表，為了不出現與前邊父級<li>的重複使用（不然等一下CSS樣式控制會較麻煩，因為內部的<li>會繼承父級的樣式，除非你又要新定義一則樣式來逐一清除父級帶給它的樣式），所以我用到<dl><dd>結構，只設定<dl>一個寬度，高度不設定，讓其高度隨解說文字增多而增高，同時不用絕對位置，以便讓它可以把父級撐高，然後並讓它浮動到右邊。而資訊面板中的圖片則用絕對位置方法把它定位在資訊面板左上方，用5px位移做到與父級5px填充一致，這樣看起來會自然點。當然也許你認為還有很多簡單的方法可以實現，比如：讓圖片左浮動，而且再讓<dl>浮動就行了，此方法測試表明在IE中能正常顯示，在FF中會有問題，因為我本意要讓右邊解說文字從上到下直列下來，當文字高過圖片時，不能出現文字環繞圖片的情況，恰好這種情況出現在FF中（因為<dl>是在正常文字資料流中，而左側圖片又用了左浮動，所以問題出現），所以再想到讓<dl>右浮動，但此時圖片在正常文字資料流中又不能放到左上方了，既然浮動會影響到<dl>內的文字資料流，那麼就用絕對位置讓其脫離正常文字資料流，但是問題又來了，這時它無法做到讓父級高度自適應。所以最後想到圖片是固定在資訊面板的左上方的，就把它絕對位置，再讓<dl>浮動到右邊去，結果發現這個方法還行，用到下面樣式：

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;
}

5．實現隱藏與顯示效果。這個隱藏顯示效果是由滑鼠觸發的，所以要自然想到連結A（因為現在我們是用CSS實現，你不要想到用javascript），並且要把資訊面板安排在<a></a>內，因為到時就可以用CSS類型選擇符配合樣式的a:hover偽類控制其顯示和隱藏了。另外一個很重要的問題是IE7以下版本有個A狀態偽類BUG，這個BUG使你本來看似沒有問題的CSS設定在IE中之前被隱藏的面板無法顯示出來，這裡用到一個常用的方法，加一條樣式：a:hover {background:#fff;}以消除存在問題。

（1）讓資訊面板初始狀態隱藏，用到樣式：

a div {
display: none;/*初始化資訊面板不顯示*/
}

（2）顯示面板，用到樣式：

四、收尾工作

最後整合一下樣式和結構代碼就完成了此執行個體的製作。最後再作一下設計思路擴充指引：像此類隱藏顯示的CSS控制設計還可以用到邊界的方法，即初始狀態用一個很大的margin負值把對象移出可視地區，滑鼠響應時再重新置放對象回到正常該出現的位置。另外相信你看完本教程後，自己喜歡的漂亮連結提示面板自己可以做出來了。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More