【CSS】相容IE7的各個各樣的標題面板
阿新 • • 發佈:2019-01-10
在《【CSS】相容IE6的卡片式佈局》(點選開啟連結)已經介紹過如果用CSS畫出一塊一塊的卡片,現在介紹如何為這些卡片添磚加瓦,為這些卡片的加上標題。
如下圖所示,這是在現在部分網站很常用的兩種標題:
先是在IE8的效果
之後是在IE7的效果:
都是沒有什麼問題的,最後是在IE6的效果,第一種這種嵌入式標籤的標題,有部分問題,但不影響顯示。貌似是因為IE6不支援margin-top為負數。
直接放上上述效果的實現程式碼,再說明:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>各式面板的製作</title> <style type="text/css"> .p, button, div, span, a { font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "WenQuanYi Micro Hei", sans-serif; } .panel { border-bottom: 2px solid #cccccc; border-right: 2px solid #cccccc; background: #ffffff; } .panel_title1 { float: left; background-color: #f00; color: #fff; font-size: 18px; text-align: center; height: 30px; line-height: 30px; margin-top: -7px; margin-left: 10px; } .panel_title2 { line-height: 50px; font-size: 18px; padding-left: 10px; border-left: 6px solid #0000ff; } </style> </head> <body style="background:#eee;"> <div class="panel" style="width:100%"> <div class="panel_title1">標題</div> <div style="clear:both;"></div> <div style="padding:10px;font-size:14px"> <p>放些佔位置的內容</p> <p>放些佔位置的內容</p> <p>放些佔位置的內容</p> <p>放些佔位置的內容</p> </div> </div> <div style="height:30px;"></div> <div class="panel" style="width:100%"> <div class="panel_title2">標題</div> <div style="clear:both;"></div> <div style="padding:10px;font-size:14px"> <p>放些佔位置的內容</p> <p>放些佔位置的內容</p> <p>放些佔位置的內容</p> <p>放些佔位置的內容</p> </div> </div> </body> </html>
兩個標題都是在一個大面板裡面,不算那個只為清楚float:left左對齊屬性繼承的clear:both,放2個小面板,一個是標題,一個是內容,內容面板注意設定一定長度的padding屬性,以免內容貼著邊框,沒有半點間隙,不好看。
第一個標題,實質上一個小型的面板,利用margin-top:-7px將其強行向上移動7px。
第二個標題,就更簡單的,就是設定一個較粗的左邊框,然後設定一定的padding-left屬性,將裡面的標題文字向右移動一點,以免過於貼著左邊框。