[CSS] flattening is a paper tiger. How can we discard the front-end framework and flatten IE6 in ie6?

[CSS] flattening is a paper tiger. How can we discard the front-end framework and flatten IE6 in ie6?

Bootstrap is indeed a good front-end framework, but it is willful and only supports browsers over IE8,

There are some other good frameworks in foreign countries, but they are not supported by the default WIN7 browser IE8, so what do you do? Even the outstanding framework of Bootstrap is also quite appealing in its V4 version, IE8 is not supported at the beginning,

Where can I put IE6 from tianchao?

Flat always gives people a tall look. It seems that they must use a front-end framework to implement it. They can't start by writing them on their own,

Actually not at all,

All are CSS styles. What is impossible?

Well, it's useless to see some practical things.

I. Buttons

Buttons are common in Web pages. How can we achieve the following results?

First, you need to understand what is the core of flattening? Like the big eyes, long hair, sharp faces, small mouth, and beautiful eyes, thin is beautiful

Flattening is also so simple, the fine gray border, solid color background, the larger the padding is flat, that is, the tall,

As a result, the HTML code is as follows:

<Button> I am a button </button>

Add the Style as follows:

<Button style = "height: 3em; background: #00aa00; border: 1px solid # dddddddd; color: # ffffff; "> I am a beauty button </button> <button style =" height: 40px; background: # d04444; border: 1px solid # dddddddd; color: # ffffff; "> I am a beauty button </button> <button style =" height: 40px; background: #4090c0; border: 1px solid # dddddddd; color: # ffffff; "> I am a beauty button </button> <button style =" height: 40px; background: #50c0e0; border: 1px solid # dddddddd; color: # ffffff; "> I am a beauty button </button> <button style =" height: 40px; background: # d0d040; border: 1px solid # dddddddd; color: # ffffff; "> I am a beauty button </button> <button style =" height: 40px; background: # ffa020; border: 1px solid # dddddddd; color: # ffffff; "> I am a beauty button </button> <button style =" height: 40px; background: # ffffff; border: 1px solid # dddddddd; color: #000000; "> I am a beauty button </button>

A certain height. The height of the first method: 3em is a relative unit. This button can also be changed according to the browser size,

As for the background color of the button, there is nothing to talk about. Do not use a very bright ff, RGB one to go to AA other full 00, or any one to go to the DD and the other to use 44 to reconcile.

As for border, it must be used. This is the core of flattening. It is a small, 1 px full, near-white gray border # dddddddd

The words in it are gray. You see, I can call up a lot of buttons based on this principle,

Do I still need to load the Bootstrap that is incompatible with IE6 in the document [Bootstrap] a PC, tablet, and mobile phone simultaneously and beautiful login page (click to open the link? Of course, the code here is long, but it is actually long. P? You won't write a copy and paste it later?

This theory also applies to adding a style attribute to the <input type = "submit"/> label.

2. input box

That is, it is also common and cannot be more common. It is annoying to write code:

<Input type = "text" value = "I am an input box"/>

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

To be flat, to be tall, first you need to enlarge the input box, then increase the margin, and then make the word a little gray, make it bigger, don't be so dark, the following code is available:

<Input type = "text" value = "I Am a beautifying input box" style = "height: 1em; border: 1px solid # dddddddd; font-size: 14px; width: 40%; color: #555555; padding: 0.8em; "/>

No parsing. A line of code and related css attributes are also common attributes.

Here, we also use the concept of relative units as well as the height and padding,

The same principle can also be used in <textarea> and other multi-line text boxes.

Iii. drop-down menu

The drop-down menu here refers to the select under form, rather than other

The original code:

<Select> <option> I am a drop-down list </option> <option> 2 </option> <option> 3 </option> </select>

The Beautification principle is exactly the same as above. In select plus style, the height and padding values here are different from the input boxes above,

The relative unit em is not used, and the absolute unit px estimation is also adjusted.

Iv. div layer and text inside

After the table layout is abandoned, the div layer is also one of the major elements used by the current webpage.

Write the following statement:

<Div> Only the above style can be written,

To beautify the style below,


You also need to add a gray border and a certain padding for this div first,
Then the key is the font of. The key of English is adjusted to Arial, And the font is enlarged a little. This is enough for WIN8.
Place a rounded corner attribute border-radius: 10px;, which is not supported in IE6 or IE8,
The square corner and the rounded corner are not much different.
The Code becomes like this:

<Div style = "border: 1px solid # dddddddd; font-family:, Arial,; padding: 15px; border-radius: 10px; "> 

In the previous article "align div and webpage layout in [CSS] (click to open the link), I provided methods to arrange these divs. You are the front-end master.
The frontend framework Bootstrap and Jqmobile that does not support IE6 let it go! What is the front-end framework? We are the best front-end framework ourselves. The key is to know how to write, rather than simply setting up the framework.
In the above style, open IE6 in IEtest to test it. There are no problems at all: