search

Home  >  Article  >  Web Front-end  >  [CSS] Flattening is a paper tiger, see how to abandon the front-end framework and flatten it in IE6_html/css_WEB-ITnose

[CSS] Flattening is a paper tiger, see how to abandon the front-end framework and flatten it in IE6_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:51:131216browse

Bootstrap is indeed a good front-end framework, but this thing is arbitrary and only supports browsers IE8 or above.

There are some other good frameworks abroad, but even WIN7’s default browser Even the excellent framework Bootstrap has become pretentious in its V4 version and does not support IE8.

Where to put my IE6?

Flat always gives people a lofty look, as if it must be implemented with a front-end framework. There is no way to start by writing it yourself.

In fact, it is not at all,

It’s a CSS style, what’s impossible to achieve?

Okay, it’s useless to just talk about it, let’s show you some practical things.


1. Buttons

Buttons are so common on web pages, so how do you achieve the following effects?


First of all, you have to understand what is the core of flattening? Just like now with big eyes, long hair, pointed face, small mouth, and colored lenses, thinness means beauty

Flattening is also so simple, thin gray border, solid color background, and wider inner margins are flattening , it is high-end,

So, the HTML code was originally like this: 

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

Added this Style to achieve it : 

<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>
A certain height. The height: 3em in the first method is a relative unit. This button can also change according to the size of the browser.

As for the background color of the button, there is nothing to say. Don’t use too bright ff. Go from RGB to AA and the rest are all 00, or go to DD and adjust the rest with 44.

As for the border, you must use it. This is the core of flattening, a small 1px full, nearly white gray border #dddddd

The words inside are gray, you see, I based it on This principle can bring up a lot of buttons.

You also need to load the incompatible ones like the article "[Bootstrap] A beautiful landing page that can be used on PC, tablet, and mobile phone at the same time" (click to open the link) Bootstrap for IE6? Of course, it’s up to lazy people to say that the code here is long, but is it actually a P? Wouldn't you write one and save it so you can copy and paste it later?

The theory here also applies to add a style attribute to the tag and adapt it yourself


2. Input box

is also very common and makes writing code annoying: 

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


To achieve the above effect, it is very simple without any front-end framework.

To make it flat and tall, first you need to enlarge the input box, then increase its inner margins, and then make the text a little grayer, a little bigger, not so black, so there is The following code: 

<input type="text" value="我是一个被美化了的输入框" style="height:1em;border:1px solid #dddddd;font-size: 14px; width:40%; color: #555555; padding:0.8em;"/>
is not parsed. It is a line of code. The related css attributes are also very common attributes. I won’t go into details.

are also used here. Height and padding also use the concept of relative units.

The same principle can also be used for multi-line text boxes such as