Experience in CSS parsing and development for OEM customers

CSS parsing for customer-assembled OEMs
This OEM is launched by the customer, if you have a domain name, then you can customize your own website. Because it is to allow station workers to customize, so open HTML and CSS, JS and other code. However, the default CSS is the CSS can not be changed.
In writing this CSS, I try to use the fewest tags, so very much to the CSS is not very familiar with the webmaster can also be customized. In addition to the layout and writing CSS, the total idea is from the big to the small, small to thin.
This layout and CSS is written once, has not changed, so some landlords can still be optimized, such code is not optimal. However, such a layout of CSS can be used to define the webmaster as a variety of. I'll show you some examples in a minute.
The following is the parsing of this CSS, very suitable for beginners to see.
Program code

@charset "Utf-8"; /* Define global, in this defines the global label */  * {margin:0px;padding:0px;}  /*

Here the global text size is defined as 12PX, the line height is 180%, and the line height looks like the eyes are not too tired.
Here, I put the song body in the Verdana font behind, is for the number in the page and English can be displayed in English font, this will be beautiful, some people do not add the song, but this will be problematic, at least my test results are like this.
In addition, I added the background color, because in some browsers under some operating systems, if you do not add background, then his background will be other colors.
I also define 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 let the body of the content is all centered, and inside a large div block, you can really if the page content is fixed width, then in IE and Firefox browser content is always in the middle of the page, Mainly in order to solve the differences between IE and Firefox, here the text into the center, and then we add a large div block in the body, the block of this div as the text left-aligned,

* *  body{font-size:12px; line-height:1.8; Font-family:verdana, "Song Body", Arial,sans; Text-align:center  ; Background: #FFF; Color: #666;}  /*

This defines the global text link style, I use the shorthand form, the style is the same as the guest master station

*  /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 UL and Li itself is not good-looking, so here we remove the list of small points and margins, etc.

*/  ul,li{list-style:none;}  /*

This defines the picture's shutterings box as 0, which is defined here globally. There is a border behind, plus, the main idea is from big to small.

*/  img{border:0;}    /*

This is the largest and outermost div block wrapped in the body, with the ability to control the width of the entire Web page content. In combination with the body, it is possible to automatically center. Define the width and horizontal center of the entire Web site
1, here defines the text all is left to align.
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 plus a wide div block, plus he is to let some webmasters can customize the layout of the screen, the right width, the left automatically apply and Add. and is to solve a row of two columns of the pre-problem basis.
Here I added float, is to "like cures like" is to use floating to solve the float. Because the right side also to add floating;

*/  #info {width:100%; float:left;}  /*

This is the navigation bar.
Use Boder to add green to the side.

*  /#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 that basically will not be affected.
Picture location of Bykijiji

*/  #bykijiji {position:absolute; margin-left:550px; margin-top:-20px;}   /*  main chunk */  #main {text-align:left;margin:0 auto;}  /* Bottom Chunk */  #footer {border-top:1px solid #CDCDCD; padding:10px 0; clear:both; text-align:center;margin:0 Auto;}  /* Head Chunk */  #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 can be.

Title *  /#header h2{font-size:35px; margin-top:0px; font-weight:bold; color: #404040}/  *

The following left and right are the two-column layouts that complete a row. I added an info to the left outside. is why the customization is more flexible, you can achieve the appropriate automatic page adaptation.
Large left
The left side of here is 305PX from the right, because he has an absolute div outside. So, this leaves a 305 width to 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 for a different version of the browser to padding interpretation and calculation of the different methods * *

#leftbox {padding:10px; font-size:14px;}  /* Right Chunk

Because of his front of the width of the info is already hundred, and left in the inside gave him a 305PX loophole. So let him from the left side of the 305PX is just right and the next. Here the 300PX is written, and the left chunk leaves 5PX; it looks more comfortable.
Here I define the width is 289PX, plus padding around 5PX; it's 299PX; for security, I write less than one pixel.

*  /#right {  margin-left:-300px; float:left; width:289px; Padding:5px;background: #F7F7F7; margin-top:24px;}  /*

This is the search for that one, there is nothing to say.
Search for that one.

*/  #search {padding:0 0 10px 0; Text-align:left}/  * Defines the caption text size */  h1{font-size:16px;}  /*

Here, we have a definite discussion.
Common three CSS, they are common in the layout. Horizontal line wrap, left float and right float, respectively
So the name is very simple, and the shortest characters, so in the CSS file, or the page, the most can make the code as little as possible.

* *  . C{clear:both; height:0px; overflow:hidden;}  . l{Float:left;}  . r{float:right;}  /* This defines a text size, because many of the above definitions are 12PX; maybe there will be some places to use the small print, so write ahead here. * *  . f12{font-size:12px;}  /* The literal size of this 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 in the bottom of the first page, the list page, as well as the individual information of the pages made a separate CSS;
As you can see, using the top of the base, the bottom of a single page CSS is more convenient to write. And as long as very little code is available. Perhaps the code of the home page will be more;
The bottom of this is not a description. Very simple stuff.

/*/* 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 section */#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;}  /* Headline */#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 section */#leftbottomad { Background: #FFFFCC; margin-left:10px;  Display:none} #pfm {padding:20px; font-size:12px;} /*CSS Finish */

Say that I personally write layout and CSS a little bit of feeling it! Description, just a personal feeling!
1, understand the user base, if your users are white-collar students are. Then you do not need to consider the following version of IE5. 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, his ie6,ie7,firefox in the effect are the same. There is no need to have a bunch of code to write an automatic adaptation.
3, the layout is the most difficult is the cloth form. There are so many elements in the form that it is difficult to control, especially to accommodate many browsers. This is more difficult. If I encounter the form in the future, if it is not very simple, then I must use the form, I think the letter, complex table to layout, the code will be less than the people often say div+css. And there is a form of cloth for this thing, maintenance is particularly easy.
4, in CSS design time, in general, is the label from large to small to define, layout from chunks to small pieces. tags do not necessarily use a lot.
5, some people think do not give those div or block plus what ID, I think, plus ID is correct, if the ID has a different tag, then through the CSS to control is easy. Sometimes we think that some of the same colors should be written in a class. Then where to use then we are where the tune, if the color, change this class will be all changed. But, I want to ask, if not all change, only change one piece, what do you do. Are you going to change the layout? If so, what is the point of separating the structure from the performance?
6, the overall situation of our cloth may be very simple, like building a house, big look a few days to get up. But fine decoration on the trouble, but also bitter and tired. We are often divided into one pixel, saving a line of code and wasting a lot of time on the top, I feel the 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 difficult. What you write may be the only thing you can change. That's the trouble. Therefore, we must not have the layout to write very NB. Adapting to the point table can also save code. And all can read.

The above is the customer gathered OEM CSS parsing and development experience _ experience Exchange content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

