Webpage Design-[common CSS abbreviations, standard N dead methods, and several precautions for Webpage Design]

I. using abbreviations can help reduce the size of your CSS file and make it easier to read. The main rules for CSS abbreviations are as follows:

Color

The hexadecimal color value. If the two values are the same, they can be abbreviated to half. For example:
#000000 can be abbreviated as #000; #336699 can be abbreviated as #369;

Box Size

There are usually four writing methods:

Property: value1; indicates that all edges are value1;

Property: value1 value2; the value of top and bottom is value1, and the value of right and left is value2.

Property: value1 value2 value3; indicates that the top value is value1, the right and left values are value2, and the bottom value is value3.

Property: value1 value2 value3 value4; four values in turn represent top, right, bottom, left

Easy to remember is clockwise, top right bottom left. An example of the specific application in margin and padding is as follows:
Margin: 1em 0 2em 0.5em;

Border (Border)

The border attributes are as follows:

• Border-width: 1px;
• Border-style: solid;
• Border-color: #000;

It can be abbreviated as border: 1px solid #000;

Syntax:Border: width style color;

Background (backgrounds)

The attributes of the background are as follows:

• Background-color: # f00;
• Background-image: url(background.gif );
• Background-repeat: No-Repeat;
• Background-Attachment: fixed;
• Background-position: 0 0;

It can be abbreviated as: Background: # f00 url(background.gif) No-repeat fixed 0 0;

Syntax:Background: Color Image repeat attachment position;

You can omit one or more attribute values. If this attribute value is omitted, the default value of the browser is used. The default value is:

• Color: transparent
• Image: None
• Repeat: Repeat
• Attachment: Scroll
• Position: 0% 0%

Fonts)

The font attributes are as follows:

• Font-style: italic;
• Font-variant: Small-caps;
• Font-weight: bold;
• Font-size: 1em;
• Line-Height: 140%;
• Font-family: "lucida Grande", sans-serif;

It can be abbreviated as: Font: italic small-caps bold 1em/140% "lucida Grande", sans-serif;

Note: If you are short for font definition, you must at least define the font-size and font-family values.

List (lists)

To cancel the default dot and serial number, you can write list-style: none ;,

The list attributes are as follows:

• List-style-type: Square;
• List-style-position: inside;
• List-style-image: url(image.gif );

Can be abbreviated as: List-style: square inside url(image.gif );

Ii. Standard n dead methods

1. Death of Div

You can use Div for a webpage ~~ The most typical example is a forum (do not dare to name it)
What elements should be used.
Tbody is a good thing. A table can also be displayed in one row, but not in all browsers.

Why is Div so convenient? Because neither Div nor Xiami is available. No matter what you want, you only need to add a class or ID. You don't need to consider the hierarchy. Anyway, div is a void stuff. How can you set it ~~ Both sets of imaging tables can be used.

Recommended Solution: Learn More (x) HTML

2. Check dead

I personally think: Web pages are presented to people through a browser .. (hey, sometimes it is recommended to search for drops ..)
I used to run W3C to see if I could send me a small image. However ~ What is the use of that small image? Let others see that I can pass the verification. In order to pass the verification, there are also a lot of miscellaneous things.
W3C is a good idea, But browsers don't listen to him. I will select a browser, because Web users do not have to know W3C ~ He does not have such an ideal browser. I have two systems + none of the browsers that can be installed can find the desired ones. Even if they do, they may not necessarily use them.

Recommended Solution: W3C can run as needed, but instead of looking at the picture, we can see the suggestions in the green box above the picture.

3. Death of browsers

IE is a good thing. Without him, I can't go to Zhaoxing's online banking.
When you get used to IE, you will find that this browser is so strange that I use IE normally!
Firefox opera is actually good... but the two browsers, whether it is CSS or JS parsing, are more or less different.
It cannot be said which one is absolutely correct and cannot be used as one. If you can only use IE for normal browsing, I am sorry for the liunx user.
Under win, I will select a browser to view the webpage. But what about liunx? There is no ie!
Don't tell me how liunx can be used. I have never seen it, but the user base is different.

Suggested solution: This question has no positive solution. The temporary solution is to install n browsers for testing. Use as few hack as possible or use conditional annotations to maintain backward compatibility.

4 .! Important death

A year or two ago, they were used for browsing! Important is used to distinguish ie from Firefox opera. IE7 is available, which is compatible with ie5 ~ 6 + Firefox ~ Opera suddenly went down on IE7.
The web page should have been backward compatible. Instead, the tables> tables can work normally, but the XHTML + CSS is not.

Recommended Solution :! Important is used to increase priority, rather than to distinguish browsers.

5. Script death

Nowadays, no matter what the new version is. However, some people may not be able to keep up with the network speed.
When span + onclick or a's href = javascript: xxxxx js does not finish clicking it, the script may fail (someone shut down the script and told me that the error occurred. Some users may shut down the script)
In this case, you cannot go anywhere.

Suggested solution: Adding events with scripts should not change the structure of the original webpage .. I have been using href = original link onclick = return function (); or function (); Return false;

6. Lazy death

The user may die and ignore it.
If I have no special requirements, I am only compatible with IE6 + firefox1.5 + opera9 + on win. If one day ~ The boss's computer uses ie5. (generally, it won't happen). I don't know how to die. However, I have been using two layers of production, which is generally not too ugly!

Recommended Solution: Install N + N browsers, and estimate which browsers the boss uses to make the best.

Also attached to my little station: http://web008.net -- Hehe!

Iii. Precautions for Webpage Design

1. Color Problem
The color of a webpage should be no more than three types. The visual effect on one side is chaotic, and the color is soft. The color with strong contrast cannot be applied to general websites, and fashion websites can also be used. Generally, the colors are not easy to match, and they are used in grayscale.

2. Font Problems
A very important problem is that the standard color should be used. This is a standard. The line spacing is generally controlled at around 20 PX. It should not be too small or too large. Pay attention to the size of the Chinese character 12px, english 11px or 10px. Do not use black characters. You can use grayscale or other soft colors to unify the color and size of the entire webpage font and standardize the overall.

3. layout specifications
Layout is very important. Consider the customer's browsing habits and the content they want to display and optimize it. If the layout of a Web page is unreasonable, it will not only affect browsing, but also become ugly.

4. production habits
You must be very familiar with the functions of various websites and be well-rounded. For example, the content of a website in a mall must be very clear and should not be supplemented after the customer proposes it, will appear very unprofessional.

5. Details cannot be ignored
The customer does not feel good about the website, but cannot tell it. Most of the problems are handled in detail. They carefully process every pixel of the webpage and strive for perfection.