Customer gathered OEM CSS analysis and development experience _ exchange of experience

Customer gathered OEM CSS parsing
This OEM is launched by the customer, if you have a domain name, then you can customize your own site. Because it is to let the station work customization, so open HTML and CSS, JS and other code. But the default CSS is CSS can not be changed.
In writing this CSS, I try to use the fewest tags, so very stand on the CSS is not very familiar webmaster can also be customized. In addition to the layout and writing CSS, the general idea is from the big to the small, young to fine.
This layout and CSS is written in one time, has not changed, so some landlords can still be optimized, such code is not optimal. However, such a layout of CSS can be defined as a variety of webmaster. I'll show you some examples in a minute.
The following is the CSS parsing, very suitable for beginners to see.
Program code
@charset "Utf-8";
/* Defines the global, where the label in the global is defined * *
* {margin:0px;padding:0px;}
/*
Here defines the global text size of 12PX, row height of 180%; Such a row height looks like the eye is not too tired.
Here, I put the song body in the Verdana font behind, is to the page in the number and English font can be displayed in English, this will be beautiful some people do not add the song, but this will be a problem, at least my test results are like this.
In addition, I added the background color, because in some browsers under some operating systems, if the background is not added, then his background will be the other color.
I also define the overall text color here. No black is used to make the eyes comfortable;
Some of the most important is to add textalign; This is to let the body content is all centered, and inside a large div block, you can really if the page content is fixed wide, then in IE and Firefox and other browsers content in the middle of the page, Mainly in order to solve the difference between IE and Firefox, where the text is centered, and then we add a large div block in the body, the DIV block written in the text left-aligned,
*/
body{font-size:12px; line-height:1.8 Font-family:verdana, "XXFarEastFont-Arial", Arial,sans; text-align:center; background: #FFF; Color: #666;}
/*
Here defines the global text link style, I used the shorthand form, the style is the main station is the same as the guest
*/
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 be used a lot of UL and Li, and the UL and Li itself style is not good-looking, so here we remove the list of small points and margins and so on
*/
ul,li{List-style:none;}
/*
The Bendmord box for the picture is defined here as 0, which is defined globally. There is a border, plus, the main idea is from big to small.
*/
img{border:0;}
/*
This is wrapped in the body of the largest and most outside a div block, you can control the width of the entire Web page content. With the body, you can achieve automatic center. To define the width and level of the entire Web site
1, this defines the text is all left-aligned.
2, with margin to achieve in the center of Firefox.
3, with overflow is worried that some people define the content will be too wide and affect the layout. So the constriction is automatically hidden;
*/
#wrapper {text-align:left;margin:0 auto; width:1000px; overflow:hidden;}
/*
Info here and add a wide for hundred hundred Div block, plus he is in order to allow some webmaster can be customized to the screen, the right set wide, the left automatically applicable and added. and is to solve a row of two columns of the basis of the first question.
Here I add float, is to "poison" is to use floating to solve the floating. Because the right also want to add floating;
*/
#info {width:100%; float:left;}
/*
This is the navigation bar.
Use Boder to add the edge of the green
*/
#nav {width:100%; text-align:center; border-top:5px solid #5DB30A; background: #FAFAFA; line-height:2.2}
/*
Absolute positioning is used here, because there are more than three pages to use this, it is likely that he will be affected by other content, so it is defined as absolute positioning, so basically will not be affected.
Picture position of Bykijiji
*/
#bykijiji {position:absolute; margin-left:550px; margin-top:-20px;}
/*
Main Block * *
#main {text-align:left;margin:0 Auto;}
/* Bottom Block * *
#footer {border-top:1px solid #CDCDCD; padding:10px 0; clear:both; text-align:center;margin:0 Auto;}
* * Head Block * *
#header {Clear:both}
/*
This defines the size of header text in the header area. Color and so on. Mainly in order to let the webmaster directly add text logo on it.
Title * *
#header h2{font-size:35px; margin-top:0px font-weight:bold; color: #404040}
/*
The following left and right are complete with one row and two columns layout. I added an info to the left. is why make customization more flexible, you can achieve a moderate automatic page adaptation.
Big left
Here's the left margin to the right 305PX, because he has a fully div outside. So, that leaves a 305 width on the right column. Just like left, you can adapt yourself.
*/
#left {margin-right:305px;color: #000; font-size:14px;}
* * This is one of the largest div in the left. This is to solve different versions of the browser to padding interpretation and calculation of the different methods * *
#leftbox {padding:10px; font-size:14px;}
/* Right block
Since the info in front of him is already hundred percent, the inside left gives him a 305PX loophole. So the 305PX on the left side of him is just right next to him. Here's a 300PX, yes and left Chunk left 5PX; it looks more comfortable.
Here I define a width of 289PX, plus padding around 5PX; is 299PX; for security, I write less pixels.
*/
#right {margin-left:-300px; float:left; width:289px; Padding:5px;background: #F7F7F7; margin-top:24px;}
/*
This is the search, there is nothing to say.
Search for that one.
#search {padding:0 0 10px 0; Text-align:left}
/* Define Caption Text Size * *
h1{font-size:16px;}
/*
Here, it's a definite discussion.
Public three CSS, they are commonly used in the layout. Horizontal wrap, left float and right float, respectively.
This name is very simple, and the shortest character, so in the CSS file, or the page, the best to do the code as little as possible.
*/
. c{clear:both; height:0px; overflow:hidden;}
. l{Float:left;}
. r{Float:right;}
/* Here defines a text size, because many of the definitions above are 12PX, there may or must be some place to use the small print, so write in advance here. */
. f12{font-size:12px;}
/* The literal size of the literal 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 overall definition. Then on the bottom and separately on the homepage, List page, as well as a single page of information made a separate CSS;
Can be seen, using the top of the foundation, the bottom of a single page of CSS is more convenient to write. And just a little code is OK. Perhaps the first page of the code will be more;
This is not a description of the below. Very simple stuff.
*/
/* Single page part * *
. 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;
/* Title * *
#leftbox h2{font-size:14px; margin-top:10px;}
#leftbox span{margin-left:10px;}
/* Home Page Part * *
#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 Finish * *
Tell me about my personal experience in writing layout and CSS. Description, just a personal feeling!
1, understand the user base, if your users are white-collar are students. Then you don't have to consider the IE5 version below. You're going to be so tired.
2, a row of three columns or a row of two columns automatically adapt, this example can be, he ie6,ie7,firefox in the effects are the same. There is no need to have a bunch of code to write an automatic adaptation.
3, the most difficult layout is the cloth form. There are too many elements in the form that are difficult to control, especially if you are adapting to many browsers. This is more difficult. If I encounter a form in the future, if it is not very simple, then I must use the form, I think the letter, the complex table to layout, the code will be less than that people often say div+css. And there is a table cloth this thing, maintenance particularly easy.
4, in the CSS design time, in general, is the label from big to small to define, layout from large to small pieces. Labels do not necessarily use a lot.
5, some people think don't give those div or block add what ID, I think, the ID is correct, if the ID has different tags, then through the CSS to control the easy. Sometimes we think that some of the same colors should be written in one class. Then where to use so we are, if discoloration, change this class is all changed. But, I want to ask, if not all change, only change a piece, what do you do. Do you want to change the layout? If so, what is the point of separating the structure from the performance?
6, our overall situation may be very simple, like building a house, the appearance of a few days up. But the careful decoration on the trouble, and hard and tired. We often divide into a pixel, save a line of code and waste a lot of time on the top, I feel that time is still to spend, but to have a degree.
7, layout, we may put the layout and CSS are very NB. But colleagues 1:30 will not understand why you write this, so many people development is very difficult. What you write may only be changed by you. That's the trouble. Therefore, we must have to write the layout is very NB. Adapting to a point table can also save code. and can read.