CSS盒子模式詳解六

2020-03-24 16:45:38

字體：大中小

來源：轉載

供稿：網友

在本人上一篇教程《徹底弄懂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"
!--
*{
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;
}
--
/style
/head body
h3 最新單曲 /h3
ul li a href="#" 01 愛的文身黃圣依 div img src="https://cdn14.x6kj.com/uploads/allimg/190801/1603402923-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="https://cdn14.x6kj.com/uploads/allimg/190801/16034050H-1.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="https://cdn14.x6kj.com/uploads/allimg/190801/1603402139-2.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="https://cdn14.x6kj.com/uploads/allimg/190801/16034049A-3.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="https://cdn14.x6kj.com/uploads/allimg/190801/1603403T1-4.jpg" alt="" /
dl
dd span 歌名: /span 花期越來越近 /dd
dd span 歌手: /span 后弦 /dd
dd span 介紹: /span 后弦參與《花開的聲音》這個舞臺劇里的一部分，邀請了后弦去演唱這首歌，此歌就是為舞臺劇《花開的聲音》而創作。 /dd
/dl /div /a /li /ul
/body
/html 一、實例實現功能介紹本實例為一個欄目鏈接列表，鼠標移動到鏈接所在行，鏈接文本顏色會改變，同時會在鏈接右下側顯示一個與鏈接相干的信息面板，信息面板中左邊有一幅圖片，圖片右側又有三項說明，它們分別是“歌名”、“歌手”、“介紹”。這個欄目被重定位到其它地方，效果、位置不會發生改變，全程只用CSS+DIV實現，無任何腳本。

實例效果截圖二、結構和樣式代碼1．結構
h3 最新單曲 /h3
ul 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;
}
本文作者:html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：需要掌握的八個CSS布局技巧

下一篇：CSS條狀圖表-基本型