bootstrap確實(shí)是一個(gè)好的前端框架，但是這東西就是任性，只支持ie8以上的瀏覽器，

國(guó)外還有一些其他不錯(cuò)的框架，但是連WIN7默認(rèn)的瀏覽器IE8都不支持，那留你何用，甚至Bootstrap這一優(yōu)秀的框架在其V4版本也矯情起來(lái)了，開始不支持IE8，

把我大天朝的IE6放哪里去？

扁平化總是給人高大上的樣子，好像必須用前端框架實(shí)現(xiàn)不可，自己寫前來(lái)根本無(wú)從下手，

其實(shí)根本不是，

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

都是CSS樣式，有什么不可能實(shí)現(xiàn)呢？

好，光吹沒用，跟大家看些實(shí)際的東西。

一、按鈕

按鈕在網(wǎng)頁(yè)中常見得不能再常見，那么如何實(shí)現(xiàn)如下的效果呢？

首先你要明白扁平化的核心是什么？就像現(xiàn)在大眼睛、長(zhǎng)頭發(fā)、尖臉、小嘴、美瞳，瘦就是美女

扁平化同樣是如此簡(jiǎn)單，細(xì)灰色邊框，純色背景，較寬大的內(nèi)邊距就是扁平化，就是高大上，

于是乎，本來(lái)是這樣的HTML代碼：

<button>我是一個(gè)按鈕</button>

加上這樣的Style就實(shí)現(xiàn)了：

<button style="height:3em;background:#00aa00;border:1px solid #dddddd;color:#ffffff;">我是一個(gè)被美容的按鈕</button><button style="height:40px;background:#d04444;border:1px solid #dddddd;color:#ffffff;">我是一個(gè)被美容的按鈕</button><button style="height:40px;background:#4090c0;border:1px solid #dddddd;color:#ffffff;">我是一個(gè)被美容的按鈕</button><button style="height:40px;background:#50c0e0;border:1px solid #dddddd;color:#ffffff;">我是一個(gè)被美容的按鈕</button><button style="height:40px;background:#d0d040;border:1px solid #dddddd;color:#ffffff;">我是一個(gè)被美容的按鈕</button><button style="height:40px;background:#ffa020;border:1px solid #dddddd;color:#ffffff;">我是一個(gè)被美容的按鈕</button><button style="height:40px;background:#ffffff;border:1px solid #dddddd;color:#000000;">我是一個(gè)被美容的按鈕</button>

至于按鈕的背景顏色background沒什么好講的，不要用到太鮮艷的ff，RGB一個(gè)去到AA其他全00，或者任意一個(gè)去到DD其余用44調(diào)和就好。

至于邊框border一定要用，這是扁平化的核心，一個(gè)細(xì)小1px的全，近白色的灰色邊框#dddddd

里面的字是灰色，你看，我根據(jù)這個(gè)原則，就能調(diào)出一大堆按鈕，

還需要像《【Bootstrap】一個(gè)PC、平板、手機(jī)同時(shí)使用而且美觀的登陸頁(yè)面》一文（點(diǎn)擊打開鏈接）中加載那不兼容IE6的Bootstrap嗎？當(dāng)然，懶人自便，說(shuō)這里的代碼長(zhǎng)，其實(shí)長(zhǎng)個(gè)P？你不會(huì)寫好一個(gè)保存起來(lái)，以后復(fù)制粘貼嗎？

這里理論同樣適用于標(biāo)簽加個(gè)style屬性，自己變通

二、輸入框

也就是同樣常見得不能再常見，寫代碼都寫到煩的：

<input type="text" value="我是一個(gè)輸入框"/>

要把它弄成上面的效果，不用任何前端框架，也非常地簡(jiǎn)單。

要扁平化，要高大上，首先你要把這個(gè)輸入框拉大，然后加大其內(nèi)邊距，之后把字弄灰一點(diǎn)，弄大一點(diǎn)，不要這么黑，于是就有了下面的代碼：

<input type="text" value="我是一個(gè)被美化了的輸入框" style="height:1em;border:1px solid #dddddd;font-size: 14px; width:40%; color: #555555; padding:0.8em;"/>

這里同樣是用到了高度與內(nèi)邊距同樣用到了相對(duì)單位的概念，

同樣的道理還可以用于等多行文本框

三、下拉菜單

我這里的下拉菜單指的是form下面那個(gè)select，而不是其他

原來(lái)的那段代碼：

<select><option>我是一個(gè)下拉列表</option><option>2</option><option>3</option></select>

美化的原理與上面一模一樣，在select加style，只是這里的height與padding的值與上面的輸入框不同，

不使用相對(duì)單位em，使用絕對(duì)單位px估計(jì)也同樣調(diào)整一下

四、div圖層與里面的文字

table布局基本被拋棄之后，div圖層同樣是現(xiàn)在網(wǎng)頁(yè)使用的大型要素之一

如果這樣寫：

<div><h1>標(biāo)題</h1><p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p><h1>Title</h1><p>Content Content Content Content Content Content Content Content </p></div>

要美化成下面的風(fēng)格，

你同樣首先要為這個(gè)div加一個(gè)灰色的細(xì)邊框，加一定的內(nèi)邊距，

然后關(guān)鍵是字體微軟雅黑，英文的關(guān)鍵調(diào)成Arial，把字體放大一點(diǎn)，這樣就夠WIN8了。

再放個(gè)圓角屬性border-radius:10px;，這個(gè)屬性即使IE6，IE8里面不支持也關(guān)系，

方角與圓角差不了多少。

于是代碼就變成這樣：

<div style="border:1px solid #dddddd; font-family:微軟雅黑,Arial,宋體; padding:15px; border-radius:10px;"><h2>被美化了的標(biāo)題</h2><p style="font-size: 14px; color: #333333;">被美化了的內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p><h2>Title</h2><p style="font-size: 14px; color: #333333;">Content Content Content Content Content Content Content Content </p></div>

再配合之前在《【CSS】關(guān)于div的對(duì)齊與網(wǎng)頁(yè)布局》一文（點(diǎn)擊打開鏈接）中，我提供的方法，把這些div排好版，你就是前端大師。

什么不支持IE6的前端框架Bootstrap、Jqmobile就讓它見鬼去吧！前端框架是什么？我們自己就是最好的前端框架。關(guān)鍵是知道怎么寫，而不只是一味地套框架。

以上的樣式，打開IEtest里面的IE6測(cè)試一下，半點(diǎn)問題都沒有：