Keqiji OEM’s CSS analysis and development experience_Experience exchange

css analysis of keqiji oem
this oem is launched by keqiji. if you have a domain name, then you can customize your own website. since it is for webmasters to customize it by themselves, html, css, js and other codes are opened. but the default css is css and cannot be changed.
when writing this css, i tried to use the least tags, so that webmasters who are not very familiar with css can also customize it. in addition, when laying out and writing css, the general idea is to go from big to small, and from small to small.
this layout and css were written once and have not been changed, so some landlords can still optimize it, and such code is not optimal. however, the css of such a layout can be defined by webmasters in various ways. i'll show you some examples in a moment.
the following is the analysis of this css, which is very suitable for beginners.
program code

@charset "utf-8"; 
/*定义全局,在这定义了全局中的标签*/ 
 * {margin:0px;padding:0px;} 
 /*

the global text size is defined here as 12px, and the line height is 180%; such a line height will not look too tiring on the eyes.
here, i put the song font after the verdana font, so that the numbers and english on the page can be displayed in english fonts, which will be more beautiful; some people do not add song font, but this will cause problems , at least my test results are like this.
in addition, i added a background color because in some browsers under certain operating systems, if you do not add a background, the background will be another color.
i also define the overall text color here. the reason for not using black is to make the eyes more comfortable;
the most important thing is to add textalign; this is to center all the content in the body, and when combined with a large div block inside, it can reflect the content of the page it is a fixed width, so in browsers such as ie and firefox, the content is always in the middle of the web page. this is mainly to solve the difference between ie and firefox. here, the text is centered, and then we add a large div to the body. block, write the block of this div so that the text is aligned to the left,

 */ 
 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 used the abbreviated form. the style is the same as that of the keqiji main site.

*/ 
 a:link,a:visited{color:#000099; text-decoration: underline;} 
 a:hover,a:active{color:#000;text-decoration: none;background-color: #fed762;} 
 /*

since a lot of ul and li will be used in the layout, and the styles of ul and li themselves are not good-looking, so here we remove the list dots and margins

*/ 
 a:link,a:visited{color:#000099; text-decoration: underline;} 
 a:hover,a:active{color:#000;text-decoration: none;background-color: #fed762;} 
 /*

/>

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

the border template frame of the picture is defined here as 0, and it is defined globally here. there are borders added at the back and additional ones added. the main idea is still from large to small.

 */ 
 img{ border:0;}   
 /*

this is the largest and outermost div block included in the body. with it, you can control the width of the entire web page content. used together with body, automatic centering can be achieved. define the width and horizontal centering of the entire website
1. here it is defined that all text is left aligned.
2. use margin to achieve centering in firefox.
3. when using overflow, i worry that the content defined by some people will be too wide and affect the layout. so it will be hidden automatically when hanging;

 */ 
 #wrapper{ text-align:left;margin:0 auto; width:1000px; overflow:hidden;} 
 /*

info has added another div block with a width of 100%. it is added so that some webmasters can customize the layout into full screen, with the right side fixed width and the left side automatically applied. and it is the basis for solving the prerequisite questions of one row and two columns.
i added float here to "fight fire with fire", that is, to use float to solve the problem of float. because a float is also needed on the right;

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

here is the navigation bar
use boder to add green on the side

*/ 
 #nav{width:100%; text-align:center; border-top:5px solid #5db30a; background:#fafafa; line-height:2.2} 
 /*

absolute is used here positioning, because there are more than three pages using this, it is very likely that it will be affected by other content, so it is defined as absolute positioning, so that it will basically not be affected.
bykijiji’s picture location

*/ 
 #bykijiji{position: absolute; margin-left:550px; margin-top:-20px;}  
 /* 
 主体大块*/ 
 #main{text-align:left;margin:0 auto;} 
 /*底部大块*/ 
 #footer{border-top:1px solid #cdcdcd; padding:10px 0; clear:both; text-align:center;margin:0 auto;} 
 /*头部大块*/ 
 #header{  clear:both} 
 /*

this defines the size of the title text in the header area. color etc. the main reason is to allow the webmaster to directly add text logo.

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

the following left and right complete the layout of one row and two columns. i added an info outside left. this is why customization is made more flexible so that the page can automatically adapt appropriately.
the big block on the left
the left here is 305px away from the right, because there is a 100% div outside it. so, this leaves a width of 305 for the right column. in this way left can be adaptive.

 */ 
 #left{ margin-right:305px;color:#000; font-size:14px;} 
 /*

this is the largest div in left. this is to solve the differences in the interpretation and calculation methods of padding in different versions of browsers*/

#leftbox{ padding:10px; font-size:14px;} 
 /*右边大块

because the width of the info in front of it is already 100%, and the width of the inside left left him another 305px hole. therefore, the negative 305px from the left side is right next to left. i wrote 300px here, which is 5px away from the left block; this looks more comfortable.
here i define the width as 289px; plus 5px on the left and right of padding; it is 299px; for safety, i write one less pixel.

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

this is the search item, there is nothing to say.
search for that one

*/ 
 #search{ padding:0 0 10px 0; text-align:left} 
 /*定义标题文字大小*/ 
 h1{ font-size:16px;} 
 /*

here, three common csss are agreed upon
they are all commonly used in layouts. they are horizontal line wrap, left floating and right floating
this naming is very simple, and the characters are the shortest. this way, whether in the css file or on the page, the code can be minimized.

*/ 
 .c{clear:both; height:0px; overflow:hidden;} 
 .l{ float:left;} 
 .r{ float:right;} 
 /*这里定义了一个文字大小，由于上边定义的很多都是12px；可能或一定会有部分地方要用小字的，所以提前写在这里。*/ 
 .f12{ font-size:12px;} 
 /*这义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, i made separate css for the homepage, list page, and single information page below;
it can be seen that using the foundation above, it is much easier to write the css for the single page below. and it only takes very little code. there may be more codes on the home page;
i won’t explain them one by one below. very simple stuff.

*/  
/*单个页面部分*/ 
 .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页面部分*/ 
 #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;} 
 /*绿色的时间*/ 
 .listbox p{color: #008000;} 
 /*大标题*/ 
 #leftbox h2{font-size:14px; margin-top:10px;} 
 #leftbox span{ margin-left:10px;} 
/*首页页面部分*/ 
 #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; } 
/*广告块部分*/ 
#leftbottomad{ background:#FFFFCC; margin-left:10px; display:none} 
#pfm{padding:20px;  font-size:12px;} 
/*CSS完*/

let me talk about my personal experience in writing layout and css! note, it’s just a personal feeling!
1. understand the user base. if your users are white-collar workers, they are all students. then you don't need to consider versions below ie5. you'll be exhausted.
2. one row with three columns or one row with two columns automatically adapts. this example is enough. the effect is the same in ie6, ie7, firefox, etc. there is no need to have a bunch of code to write an automatic adaptation.
3. the most difficult part of layout is to lay out the form. there are so many elements in a form that it can be difficult to control, especially when it comes to adapting to many browsers. this one is more difficult. if i encounter a form in the future, if it is not very simple, then i will definitely use a table. i believe that if a complex form is laid out with a table, the code will definitely be smaller than the div css that people often say. and with table cloth, maintenance is particularly easy.
4. when designing css, generally speaking, labels are defined from large to small, and layouts are defined from large to small. tags are not necessarily used a lot.
5. some people think not to add ids to those divs or blocks; i think adding ids is correct. if there are different tags in the ids, it will be easier to control them through css. sometimes we think that some of the same colors should be written in a class. then we will adjust it wherever it is used. if the color changes, once we change the class, it will completely change. however, i want to ask, what would you do if you don’t change everything, but only one piece of it? are you going to change the layout? if this is the case, then what is the point of separating structure and performance.
6. our overall layout may be very simple, just like building a house. a big one can be built in a few days. but the detailed decoration is troublesome, hard and tiring. we often divide it into one pixel, saving a line of code and wasting a lot of time on it. i feel that time still needs to be spent, but it must be within a certain limit.
7. when laying out, we may make the layout and css very cool. but colleagues may not understand why you write it like this for a while, and it will be difficult for multiple people to develop it. only you can change what you write. this is troublesome. therefore, we must have a very nb layout. adapting to point tables can also save code. and they can all understand it.

the above is the content of keqiji oem’s css analysis and development experience_experience exchange. for more related content, please pay attention to the php chinese website (www.php.cn)!