【CSS】扁平化都是纸老虎，看怎么抛弃前端框架在IE6扁平化

标签：ie6   扁平化   前端   css   前端框架   

Bootstrap确实是一个好的前端框架，但是这东西就是任性，只支持IE8以上的浏览器，

国外还有一些其他不错的框架，但是连WIN7默认的浏览器IE8都不支持，那留你何用，甚至Bootstrap这一优秀的框架在其V4版本也矫情起来了，开始不支持IE8，

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

扁平化总是给人高大上的样子，好像必须用前端框架实现不可，自己写前来根本无从下手，

其实根本不是，

都是CSS样式，有什么不可能实现呢？

好，光吹没用，跟大家看些实际的东西。

一、按钮

按钮在网页中常见得不能再常见，那么如何实现如下的效果呢？

首先你要明白扁平化的核心是什么？就像现在大眼睛、长头发、尖脸、小嘴、美瞳，瘦就是美女

扁平化同样是如此简单，细灰色边框，纯色背景，较宽大的内边距就是扁平化，就是高大上，

于是乎，本来是这样的HTML代码：

<button>我是一个按钮</button>

加上这样的Style就实现了：

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

至于按钮的背景颜色background没什么好讲的，不要用到太鲜艳的ff，RGB一个去到AA其他全00，或者任意一个去到DD其余用44调和就好。

至于边框border一定要用，这是扁平化的核心，一个细小1px的全，近白色的灰色边框#dddddd

里面的字是灰色，你看，我根据这个原则，就能调出一大堆按钮，

还需要像《【Bootstrap】一个PC、平板、手机同时使用而且美观的登陆页面》一文（点击打开链接）中加载那不兼容IE6的Bootstrap吗？当然，懒人自便，说这里的代码长，其实长个P？你不会写好一个保存起来，以后复制粘贴吗？

这里理论同样适用于<input type="submit" />标签加个style属性，自己变通

二、输入框

也就是同样常见得不能再常见，写代码都写到烦的：

<input type="text" value="我是一个输入框"/>

要把它弄成上面的效果，不用任何前端框架，也非常地简单。

要扁平化，要高大上，首先你要把这个输入框拉大，然后加大其内边距，之后把字弄灰一点，弄大一点，不要这么黑，于是就有了下面的代码：

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

这里同样是用到了高度与内边距同样用到了相对单位的概念，

同样的道理还可以用于<textarea>等多行文本框

三、下拉菜单

我这里的下拉菜单指的是form下面那个select，而不是其他

原来的那段代码：

<select>
<option>我是一个下拉列表</option>
<option>2</option>
<option>3</option>
</select>

美化的原理与上面一模一样，在select加style，只是这里的height与padding的值与上面的输入框不同，

不使用相对单位em，使用绝对单位px估计也同样调整一下

四、div图层与里面的文字

table布局基本被抛弃之后，div图层同样是现在网页使用的大型要素之一

如果这样写：

<div>
<h1>标题</h1>
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
<h1>Title</h1>
<p>Content Content Content Content Content Content Content Content </p>
</div>

要美化成下面的风格，

你同样首先要为这个div加一个灰色的细边框，加一定的内边距，

然后关键是字体微软雅黑，英文的关键调成Arial，把字体放大一点，这样就够WIN8了。

再放个圆角属性border-radius:10px;，这个属性即使IE6，IE8里面不支持也关系，

方角与圆角差不了多少。

于是代码就变成这样：

<div style="border:1px solid #dddddd; font-family:微软雅黑,Arial,宋体; padding:15px; border-radius:10px;">
<h2>被美化了的标题</h2>
<p style="font-size: 14px; color: #333333;">被美化了的内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
<h2>Title</h2>
<p style="font-size: 14px; color: #333333;">Content Content Content Content Content Content Content Content </p>
</div>

再配合之前在《【CSS】关于div的对齐与网页布局》一文（点击打开链接）中，我提供的方法，把这些div排好版，你就是前端大师。

什么不支持IE6的前端框架Bootstrap、Jqmobile就让它见鬼去吧！前端框架是什么？我们自己就是最好的前端框架。关键是知道怎么写，而不只是一味地套框架。

以上的样式，打开IEtest里面的IE6测试一下，半点问题都没有：

【CSS】扁平化都是纸老虎，看怎么抛弃前端框架在IE6扁平化

标签：ie6   扁平化   前端   css   前端框架   

原文地址：http://blog.csdn.net/yongh701/article/details/42427581