如下圖：
這種高大上的布局看起來仿佛只有那些前端框架，而且要考慮很多東西才能夠弄出來。
其實不然，完全可以自己手寫幾句簡單的CSS就能夠弄出來了。根本無需理會那些動不動就擺大牌說不兼容IE6就不兼容IE6的前端框架。
先上代碼再講解。上圖的代碼如下：
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>卡片式布局</title>
- <style>
- body{
- background:#eeeeee;
- }
- p,button,div,span {
- 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;
- padding-left: 2%;
- padding-right: 2%;
- padding-top: 50px;
- padding-bottom: 50px;
- margin-top: 10px;
- margin-bottom: 10px;
- background:#ffffff;
- }
- </style>
- </head>
- <body>
- <div class="panel">
- <h1>各類</h1>
- </div>
- <div class="panel" style="float:left;width:16%"><h3>卡片式</h3></div>
- <div class="panel" style="float:left;width:74%;margin-left:1%">布局</div>
- <div style="clear:both"></div>
- <div class="panel">
- <h1>看起來很高大上哦！</h1>
- </div>
- </body>
- </html>
核心問題在于.panel這個class的布置，當然一切都是建立在一個#eeeeee，6個e的灰色背景之下。
同時在WIN7就調用微軟雅黑這種字體，WINXP就調用黑色，在字體的映襯下，顯得無比的高大上。
在.panel這個class過程中。本質是一個div，先給這個div涂上一抹#ffffff白，以免其繼承#eeeeee這個背景。
其后在底部的腳邊、右邊放上1條寬2%的#cccccc更深的灰，做陰影，再調好間距就完了。哪需要那些不知道怎么修改的前端框架？
再配上《【CSS】扁平化都是紙老虎，看怎么拋棄前端框架在IE6扁平化》（點擊打開鏈接），簡直就是在2001年的IE6做出15年之后的效果。其實主要是當時沒有CSS3規范，CSS3可是到2009年才成規范，不然這種布置早就爛大街了~
唯一值得注意的是，此處的.panel這個class用到了padding，還左右留白2%，這會最終影響你的div寬度。可以留意到我的代碼，兩個采用《【CSS】關于div的對齊與網頁布局》（點擊打開鏈接）并排布置的div，其寬度之和根本沒有100%，是由于我在《【CSS】padding,border,margin與width寬度的關系》（點擊打開鏈接）提到的緣故啊！
同時說一句，以上的布局由于全程采用百分比布局，因此，無論在任何尺寸的瀏覽器都是不會變形的^_^
新聞熱點
疑難解答
