CSS盒子模式詳解七

2020-03-24 18:06:48

字體：大中小

來源：轉載

供稿：網友

三、分析實現方法1．從上面的截圖可以看到有一標題，標題下面是一個列表，所以很容易想到用 h 標簽和html' target='_blank'>無序列表 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）顯示面板，用到樣式：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負值把對象移出可視區域，鼠標響應時再重新定位對象回到正常該出現的位置。另外相信你看完本教程后，自己喜歡的漂亮鏈接提示面板自己可以做出來了
本文作者:html教程

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

上一篇：巧用CSS換行讓網站更美觀

下一篇：背景圖片設置對CSS渲染效率的研究