html盒子全部蓝色,彻底弄懂CSS盒子模式之五
三、分析實現方法
1．從上面的截圖可以看到有一標題，標題下面是一個列表，所以很容易想到用標簽和無序列表
- 來做結構，標題是一塊有背景的矩形塊，文字白色，文字在矩形塊中居中對齊，所以給標簽加個寬度控制，最后為了讓文本看起來在垂直方向上居中，再加個上邊填充，所以用到下面樣式：
h3 {
color: #FFF;
background-color: #F90;
width: 100px;
padding-top:3px;
text-align:center;
}
2．下面是一個
- 區塊，我讓它有一個上線框，這樣與標題吻合在一起就做出了標題效果，而
- 里面的
- 要有一條下劃線，以形成一種分行效果，于是用到下邊框，這里用到下面樣式：
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控制，圖片右邊為一個有清晰數據結構列表，為了不出現與前邊父級
- 的重復使用(不然等一下CSS樣式控制會較麻煩，因為內部的
- 會繼承父級的樣式，除非你又要新定義一則樣式來逐一清除父級帶給它的樣式)，所以我用到
- 結構，只設定
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)，并且要把信息面板安排在內，因為到時就可以用CSS類型選擇符配合樣式的a:hover偽類控制其顯示和隱藏了。另外一個很重要的問題是IE7以下版本有個A狀態偽類BUG，這個BUG使你本來看似沒有問題的CSS設置在IE中之前被隱藏的面板無法顯示出來，這里用到一個常用的方法，加一條樣式：a:hover {background:#fff;}以消除存在問題。
(1)讓信息面板初始狀態隱藏，用到樣式：
a div {
display: none;/*初始化信息面板不顯示*/
}
(2)顯示面板，用到樣式：
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有效*/
}
四、收尾工作
最后整合一下樣式和結構代碼就完成了此實例的制作。最后再作一下設計思路擴展指引：像此類隱藏顯示的CSS控制設計還可以用到邊界的方法，即初始狀態用一個很大的margin負值把對象移出可視區域，鼠標響應時再重新定位對象回到正常該出現的位置。另外相信你看完本教程后，自己喜歡的漂亮鏈接提示面板自己可以做出來了。
出處：藍色理想
責任編輯：moby
◎進入論壇網頁制作、網站綜合版塊參加討論
- 結構，只設定
總結
以上是生活随笔為你收集整理的html盒子全部蓝色,彻底弄懂CSS盒子模式之五的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 网申信用卡额度都很低吗？
- 下一篇： css3加载中动画效果,CSS3实现加载