|
1.徹底弄懂CSS盒子模式一(DIV布局快速入門) 【論壇討論】
2.徹底弄懂CSS盒子模式二(導(dǎo)航欄實例) 【論壇討論】
3.徹底弄懂CSS盒子模式三(浮動的表演和清除的自述) 【論壇討論】
4.徹底弄懂CSS盒子模式四(絕對定位和相對定位) 【論壇討論】
在本人上一篇教程《徹底弄懂CSS盒子模式四(絕對定位和相對定位)》中最后有演示一個綜合導(dǎo)航實例，那時因為時間關(guān)系，同時本人也覺得有必要將這實例分出來單獨講一下，所以沒有把實例講解教程寫到上一篇教程中。這個教程可以作為CSS定位學習的強化練習，當然教程我也不只是單一的講解做的步驟，還會和大家一起來分析一下設(shè)計思路，同時分享本人在做的過程中發(fā)現(xiàn)的一些問題供大家防范參考。為了兼顧一下沒有來得及看我上一篇教程的網(wǎng)友，我再次給出代碼運行框，大家可以先運行看看效果，不過建議最好先看一下本人上一篇教程，除非你已對定位有所了解。另外本實例還是不夠完善的，比如結(jié)構(gòu)的規(guī)范等等，如果你能有更好的實現(xiàn)方法，不妨在回復(fù)中寫出來與大家分享，同時也讓我這個積極的菜鳥學習下。
運行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
一、實例實現(xiàn)功能介紹
本實例為一個欄目鏈接列表，鼠標移動到鏈接所在行，鏈接文本顏色會改變，同時會在鏈接右下側(cè)顯示一個與鏈接相干的信息面板，信息面板中左邊有一幅圖片，圖片右側(cè)又有三項說明，它們分別是“歌名”、“歌手”、“介紹”。這個欄目被重定位到其它地方，效果、位置不會發(fā)生改變，全程只用CSS+DIV實現(xiàn)，無任何腳本。
實例效果截圖
二、結(jié)構(gòu)和樣式代碼
1．結(jié)構(gòu)
<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>黃圣依唱片主打歌的確是她個人的內(nèi)心寫照，《愛的文身》由香港音樂大師金培達作曲，制作人陳少琪親自填詞。</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>阿朵搶聽版最新單曲《漫漫 慢慢》讓你認識阿朵柔情的一面，展現(xiàn)阿朵百變的風格。</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>令人感同身受的抒情歌，在故事性的架構(gòu)中，有著平凡但又能扣人心弦的情感，是一首高度共鳴的抒情歌。</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>后弦參與《花開的聲音》這個舞臺劇里的一部分，邀請了后弦去演唱這首歌，此歌就是為舞臺劇《花開的聲音》而創(chuàng)作。</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;/*設(shè)置其定位方法為相對定位，等一下內(nèi)部信息面板就可以相對它定位*/
display:block;/*讓鏈接以塊狀呈現(xiàn)，這樣不用點中鏈接文字就可以響應(yīng)鏈接*/
}
a div {
display: none;/*初始化信息面板不顯示*/
}
a:hover {background:#fff;}/*IE7以下版本A狀態(tài)偽類bug*/
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)的圖片在標準瀏覽器會出現(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;
}
出處：藍色理想
責任編輯：moby
上一頁 下一頁 定位強化練習 [2]
◎進入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁 定位強化練習 [1]
第 2 頁 
