Oem css parsing and development experience

CSS parsing of OEM in customer collection
This OEM was launched by the customer collection. If you have a domain name, you can customize your own website. HTML, CSS, JS, and other code are open to the website engineers. However, CSS cannot be changed by default.
When writing this CSS, I try to use the least tag, so that webmasters who are not very familiar with CSS can also customize it. In addition, when layout and CSS writing, the general idea is from large to small, from small to small.
This layout and CSS are written once and have not been changed. Therefore, some landlords can optimize the layout and such code is not optimal. However, such a layout of CSS allows the webmaster to define a variety. I will show you some examples later.
The following is the CSS parsing, which is suitable for beginners.
Program code
@ Charset "UTF-8 ";
/* Defines the global, where the global tag is defined */
* {Margin: 0px; padding: 0px ;}
/*
The global text size is defined as 12 PX, And the Row Height Is 180%; the row height does not seem too tired.
Here, I put behind the Verdana font to show the numbers and English letters on the page in English. This will be more beautiful. Some people do not add, but there will be problems, at least my test results are like this.
In addition, I added the background color because in some browsers of some operating systems, if the background is not added, the background will be other colors.
I have also defined the overall text color here. Black is not used to make the eyes more comfortable;
The most important thing is to add textalign. This is to center all content in the BODY and use it with a large DIV block inside. If the page content is set to width, the content in IE, FIREFOX, and other browsers is always in the middle of the webpage, mainly to solve the difference between IE and FIREFOX. Here, the text is centered, then we add a large DIV block to the BODY and write the DIV block as the left-aligned text,
*/
Body {font-size: 12px; line-height: 1.8; font-family: Verdana, "", Arial, Sans; text-align: center; background: # FFF; color: #666 ;}
/*
The Global Text Link style is defined here. I use the abbreviated form. The style is the same as that of the customer master site.
*/
A: link, a: visited {color: #000099; text-decoration: underline ;}
A: hover, a: active {color: #000; text-decoration: none; background-color: # FED762 ;}
/*
Because the layout will use a lot of UL and LI, and the style of UL and LI itself is not good-looking, so here we remove small list points and margins, etc.
*/
Ul, li {list-style: none ;}
/*
The border frame of the image is defined as 0. There is a border behind it. In addition, the main idea is from large to small.
*/
Img {border: 0 ;}
/*
This is the largest and outermost DIV block in the BODY. With this block, you can control the width of the entire webpage content. When used with the BODY, automatic center can be achieved. Define the width and horizontal center of the entire website
1. All the text is left aligned.
2. Use MARGIN to center in FIREFOX.
3. Using OVERFLOW is a concern that some people define too wide content, which affects the layout. Therefore, the token is automatically hidden when it is output;
*/
# Wrapper {text-align: left; margin: 0 auto; width: 1000px; overflow: hidden ;}
/*
INFO adds a DIV block with a width of. It is used to allow some webmasters to customize the layout to full screen. The width is set on the right and automatically applied on the left. It is also the basis for solving the problem of one row and two columns.
Here I added FLOAT to solve the floating problem in order to "attack the virus. Because floating is also required on the right side;
*/
# Info {width: 100%; float: left ;}
/*
Here is the navigation bar
Use BODER to add edge green
*/
# Nav {width: 100%; text-align: center; border-top: 5px solid # 5DB30A; background: # FAFA; line-height: 2.2}
/*
Absolute positioning is used here, because a total of more than three pages use this, it is likely that it will be affected by other content, so it is defined as absolute positioning, which will basically not be affected.
Bykijiji Image Position
*/
# Bykijiji {position: absolute; margin-left: 550px; margin-top:-20px ;}
/*
Large entity size */
# Main {text-align: left; margin: 0 auto ;}
/* Bottom bulk */
# Footer {border-top: 1px solid # CDCDCD; padding: 10px 0; clear: both; text-align: center; margin: 0 auto ;}
/* Header bulk */
# Header {clear: both}
/*
The size of the title text in the HEADER area is defined here. Color. The main purpose is to allow the webmaster to add a text LOGO directly.
Title */
# Header h2 {font-size: 35px; margin-top: 0px; font-weight: bold; color: #404040}
/*
The following LEFT and RIGHT columns complete the layout of a row. I added INFO outside LEFT. The reason is that the customization is more flexible and the page can be adjusted automatically.
Large block on the left
Here, LEFT is 305PX from the right, because there is a DIV outside. Therefore, the right column is left with a 305 width. Just like LEFT, you can adapt.
*/
# Left {margin-right: 305px; color: #000; font-size: 14px ;}
/* This is the largest DIV in LEFT. This is to solve the difference between the interpretation and calculation methods of PADDING in different browsers */
# Leftbox {padding: 10px; font-size: 14px ;}
/* Large blocks on the right
Because the width of INFO in front of him is already, LEFT a 305PX empty child for him. So the 305PX from the LEFT side is right on the LEFT side. Here I wrote PX, Which is 5PX away from the left-side bulk; this looks more comfortable.
Here I have defined the width as 289PX, plus 5 PX for each PADDING, and 299PX for the sake of security, I will write less than one pixel.
*/
# Right {margin-left:-300px; float: left; width: 289px; padding: 5px; background: # F7F7F7; margin-top: 24px ;}
/*
There is nothing to say about this one.
Search that line */
# Search {padding: 0 0 10px 0; text-align: left}
/* Define the title text size */
H1 {font-size: 16px ;}
/*
I have made a decision here.
The three common CSS are commonly used in layout. Horizontal line feed, left floating and right floating respectively
In this way, the name is simple and the characters are the shortest. In this case, the CSS file is still in the page, and the code can be as few as possible.
*/
. C {clear: both; height: 0px; overflow: hidden ;}
. L {float: left ;}
. R {float: right ;}
/* The text size is defined here, because many of the above definitions are 12 PX; some or some parts may need to be written in advance. */
. F12 {font-size: 12px ;}
/* The text size of SMALL. */
Small {font-size: 12px; color: #999; font-weight: normal; padding-left: 5px ;}
. H_hr {height: 1px; overflow: hidden; margin: 10px 5px; background: # CDCDCD ;}
/* ++ ++
The above is the global definition. Then, the homepage, LIST page, and individual information pages are separately CSS;
It can be seen that with the above foundation, it is much easier to write CSS on a single page below. In addition, you only need a small amount of code. The homepage may have more code;
The following are not described in detail. Very simple.
*/
/* Single page section */
. Imgbox {text-align: center; width: 200px ;}
. Imgbox img {border: 4px solid # CCC; display: block; margin: 0 auto ;}
. Navbox {border-left: 4px solid # f5f5f5; margin: 5px 0 10px 0; padding-left: 8px ;}
/* LIST page part */
# Listnav {background: # f7f7f7; line-height: 2.0; padding-left: 10px; border-bottom: 1px solid # D4D4D4 ;}
. Listbox {color: #666; width: 590px; font-size: 12px; border-bottom: 1px dashed # CCC ;}
/* Green time */
. Listbox p {color: #008000 ;}
/* Large title */
# Leftbox h2 {font-size: 14px; margin-top: 10px ;}
# Leftbox span {margin-left: 10px ;}
/* Home page section */
# H_center_l {width: 66%; border-left: 1px solid # CDCDCD; border-right: 1px solid # CDCDCD; float: left; margin-top: 10px ;}
# H_center_lbox {width: 49%; border-right: 1px solid # CDCDCD; float: left ;}
# H_center_lboxb {width: 50%; float: right ;}
# H_center_r {width: 33%; float: right; margin-top: 10px ;}
# H_center_l h1, # h_center_r h1 {padding-left: 5px; font-size: 14px ;}
# H_center_l ul, # h_center_r ul {padding-left: 19px; font-size: 12px ;}
# Qcity {clear: both; margin-bottom: 20px; margin-top: 10px ;}
# Qcity li {display: inline; padding-left: 10px ;}
# Qcity h3 {font-size: 14px; color: #000}
# Links {border-top: 1px solid # CCC; margin-top: 15px ;}
/* Ad block part */
# Leftbottomad {background: # FFFFCC; margin-left: 10px; display: none}
# Pfm {padding: 20px; font-size: 12px ;}
/* CSS complete */
Let me talk about my personal feelings about layout and CSS! It's just a personal experience!
1. Understand the user base. If your users are white-collar students. Therefore, you do not need to consider IE5 or earlier versions. Then you will be exhausted.
2. Automatic Adaptation of one row and three columns or one row and two columns. This example works the same in IE6, IE7, and FIREFOX. There is no need for a bunch of code to write an automatic adaptation.
3. layout is the most difficult part. There are too many elements in the form, which is difficult to control, especially to adapt to many browsers. This is even harder. If forms are not very simple in the future, I must use tables. I want to believe that complex forms are laid out using tables, the code will definitely be smaller than the DIV + CSS that people often say. In addition, table store is easy to maintain.
4. In general, the CSS design time is defined by labels from large to small, and the layout ranges from large blocks to small blocks. Tags are not necessarily used.
5. Some people do not want to add any IDs to those divs or blocks. I think adding IDS is correct. If IDs have different labels, so it is easy to control through CSS. Sometimes we think that some of the same colors should be written in a CLASS. Where to use it, then we will adjust it. If the color changes, the CLASS will be changed. However, I would like to ask, what do you do if the change is not complete. Are you still changing the layout? If so, what is the significance of separation of structure and performance.
6. The overall situation may be very simple, just like building a house. It may take a few days to get up. However, it is troublesome to complete the decoration, and it is bitter and tiring. We often waste a lot of time on the top to save a line of code for a pixel. I feel that time is still needed, but there must be a degree.
7. During layout, we may make the layout and CSS very NB. However, my colleagues may not understand why you want to write this code at half past one, so it is very difficult to develop many people. You may write something that you can modify. This is troublesome. Therefore, we must write NB in the layout. The use of vertex tables can also save code. And can understand.