CSS common style and some solutions

1. Self-summarized public style parsing: HTML, body, Div, P, UL, Li, DL, DT, DD, H1, H2, H3, H4, H5, H6, form, input, select, button, textarea, IFRAME, table, Th, TD {margin: 0; padding: 0 ;}img {border: 0 none; Vertical-align: Top ;} ul, Li {list-style-type: none;} H1, H2, H3, H4, H5, H6 {font-size: 14px;} body, input, select, button, textarea {font-size: 12px; font-family: tahoma, Geneva, sans-serif;} button {cursor: P Ointer;} I, em, cite {font-style: normal;} body {Background: # FFF; color: #363636; line-Height: 1.2;} A,: link {color: #222; text-Decoration: none;} A: visited {} A: active, A: hover {text-Decoration: underline;} A: Focus {outline: none ;}. fixed: After {content :". "; display: block; clear: Both; Height: 0; visibility: hidden ;}. fixed {display: block; Min-Height: 1%;} * HTML. fixed {Height: 1%; }. Clear {diplay: block! Important; float: none! Important; clear: Both; overflow: hidden; width: Auto! Important; Height: 0! Important; margin: 0 Auto! Important; padding: 0! Important; font-size: 0; line-Height: 0 ;}. more {float: Right ;}. more a {font-weight: normal; font-size: 12px ;}. FL ,. FR {display: inline; float: Left ;}. FR {float: Right;} This is a public style that I have developed for reference in the last three years. In general, the style will be fine-tuned based on the specific effect of the webpage. Note: write these annotations here to make friends who have just come into contact with CSS understand something that will not go around the road. Code You can jump to the third article. It may be a bit cool. Haha! Line 1: HTML, body, Div, P, UL, Li, DL, DT, DD, H1, H2, H3, H4, H5, H6, form, input, select, button, textarea, IFRAME, table, Th, we should all understand that this is to remove the external and inner fills of the original selector from 0. Maybe someone still uses the wildcard, however, this method may cause code redundancy, especially the deeper the child parent-level nesting relationship. We recommend that you reduce the number of child parent-level nesting relationships as much as possible, we recommend that you use more general styles that I write in the first line. There may be fewer selectors, but the selectors that I usually use today are like this, if you can use the pre fieldset BLOCKQUOTE selectors or other selectors, you can write them in the same way. In the second row, the IMG image label style varies with each other. The goal is to make the default picture in the browser have no border, and the blank interval at the bottom of the picture in IE6 disappears. Some users love to use display: block; Border: none; but writing like this will have one or more disadvantages. display: block; in this case, what do you do when you want to place the picture in a box on the left and right? Margin: auto; is that true? But you need to make the outer box have an actual width. If it is changed to vertival-align: Top; or vertival-align: middle;, then the actual width does not need to be written, only one text-align: center is added, and the image does not need to be filled out. Some cool friends may wonder that I wrote border: 0 none. Here I want to write 0 and add another none. I still want to talk about this because when I write text box input, it is found that in different Windows systems, you cannot write border: none or border: 0;, the border of the text box is still in, so you must write border: 0 none; this habit is also left on IMG, so you can still write it as border: none; but when writing input, you still need to write border: 0 none when there is no border; the third line ul, li doesn't have to explain it. Everyone knows what's going on. The fourth line is H1, H2, H3, H4, H5, H6, which are modified based on the font size of the page title to be set, or the selector H1 H2 H3 H4 is split to write their respective font sizes. The fifth line of body, input, select, button, textarea is because I found the text box and drop-down menu in IE6 when setting the page... the font size in is not normal, so the compatibility is not perfect, so I wrote the font size is 12, then the font of these labels in firfox is by default, so I wrote the font again, and then the body also needs to write the font size and size, so I added the body to the front of the input, so you don't need to write it later. The mouse trigger attribute of the button in the sixth row is the default arrow, which is not very good in user experience. Therefore, I changed the mouse trigger attribute to a small one. The seventh line is to use these selectors when writing labels that are not particularly important or decorative. because they all have the default attributes of text, I have removed them and will not cause problems when using them. In the eighth line, the background color is written to the body because some Windows systems change the browser background color to other colors. In order to avoid any problems, add the background white and text color, I have already written the font size and font. From row 9 to row 11th A: Is the link written almost? The dotted box that appears when you click the link in Row 3 disappears, which means the focus is eliminated. (The description is not professional. Sorry !) Below I have written the. Fixed and. Clear clear floating styles. Where do I use them? I drew two pictures and you will understand it !. Fixed example

  . Clear example   I want to write many attributes in. Clear! Important Problems Because we will certainly write float: Left; margin or padding, and width when writing the child-level box float, and so on. I am also there. the clear attribute is added as conflicting as possible! Important, the browser will set the priority of these attributes to the top, and IE6 also supports reading! Important, you will think that IE6 only needs to read the same attribute and takes the final attribute as the priority, but it is for the same style, instead of the attribute in the same style, the final attribute is not given priority. After reading these two sections of code, you will understand it !. In the process of setting up the page with more styles, the topic or title bar will certainly have more links, so I added this style in front and reduced the float: right attribute in the back, this is not very significant .. Fl. fr these two are appended to some boxes that need to float left or right, so the write flexibility is high and part of CSS code can be saved. II. I want to talk about some compatible styles for displaying bugs in the IE 6 browser. I think everyone is using jquery or some other JS frameworks? When we use the lightbox album developed by these frameworks (that is, there is a layer of mask between the image and the webpage after the image is clicked ). Some lightbox album codes are not well written. For example, in IE6, when the content height is not enough to fill the entire page, When you click an image in the album, we found that the mask layer behind the image did not fill the entire browser. For example:     At this time, we will think about whether to use another code, but this album code is perfect except for the mask, and we can't find any other perfect album. What should we do? The following is my CSS solution! Currently, the maximum browser resolution is 1050px. The Code is as follows: * html body {overflow-X: hidden; position: relative; Height: 99%; margin-top:-1.5%; padding-top: 1% ;} * HTML {padding-top: 1.5%;} I will explain overflow-X: hidden; position: relative; margin-top: -1.5% these three attributes are used to prevent the scroll bar from appearing on the right when the height is 99%, and padding-top: 1%; this is to prevent the scroll bar on the right side of the high-resolution display, and * HTML {padding-top: 1.5%;} is to add the margin-top:-1.5% written in the above style; this negative value. You can use jquery or other JS frameworks to develop defective code and test this code. Program Communication between members. After setting up the page, cool will have some minor problems when communicating with programmers. Note: The following suggestions are all about style naming with Asp.net programmers. For example, when writing a child style, We will write the following :. wraper FORM {}. In this case, we need to consider whether there is Code such as paging in this page, because Asp.net programmers will add a form control in a paging page so that the form we wrote in will be removed, so we need to put. change wraper FORM {}. wraper. formwraper {} can be used to solve the problem. The check box and single-sheet can also be used.       In Asp.net, most programmers still love server controls. After output to the front-end page, it will become like this, and the front-end page will become an accident, so when we encounter a similar situation, we still need to change the writing method. Another one is that the button {} will also use server controls in Asp.net and output them to the foreground.   In this case, our style is invalid again, so we need to give this button a style name, instead of using a selector, for example:. message_btn {}         These issues are similar. Update will continue later! 4. Some suggestions for you. Because I am a self-taught CSS style, there is no basic English, therefore, it is recommended that I do not have any basic English skills. I am also studying it myself, or some of the basic cool friends should try to write the style as much as possible, instead of using the Lenovo function provided by the software, if you do not have the software, you may have some difficulties. In addition, you may try to use the style name in English. If you do not understand what the name means, you can translate it first, if you know the meaning, you will naturally know what it means if you use more in the future. It is helpful for you to learn other things in the future. We recommend that you have just learned an advanced CSS book with some of our basic cool friends. proficient in CSS: the cover of this book is gray. You can check it online! Er. This is some of my own experiences. It's messy and cool. If Article There is something wrong in it. Please put it forward. I will modify it as soon as possible, and make progress and learn together! This is the best website I have ever thought of as a Web page! The static website of the Fund has not yet been launched! This article is original from station Cool Network-sblqtd. reposted this information. Thank you for your cooperation.