Common CSS skills and troubleshooting

Source: Internet
Author: User
1. solve the problem that the background cannot be extended
<Div id = "content"> <Div id = "Main"> <Div id = "maincol"> </div> <Div id = "xcol"> </div> </div> <Div id = "subcol"> </div>

<Style type = "text/CSS">
<! --
# Content {width: 700px; Background: URL (img/bg.png) Repeat-y ;}# subcol {float: Left; width: 200px ;}# main {width: 500px; float: Right ;}# maincol {width: 300px; float: Left ;}# xcol {width: 200px; float: Right ;}

The above problem shows that the adaptive height of the background does not inherit the float height. solution:
Add <Div style = "clear: Both;"> </div>

2. How to align webpages in the center?
Body {margin: 0; padding: 0; text-align: center ;}
# Container {width: 760px; margin: 0 auto; text-align: Left; position: relative ;}

Note: The body sets the margin and padding to 0, so that the body content is in close contact with the browser edge. Then text-align: center centers all the body content, including # container. The first 0 in the margin of the iner is upper and lower, and the second auto is left and right. The upper and lower values are about 0 to allow automatic control. In addition, positioning is relative. Only the elements positioned as relative can be moved!

3. Use CSS to create a mouse Image
When the network speed is not fast with the "mouse over the image" in DW (dreamweav), the image after the mouse has not been downloaded yet. The phenomenon of white images looks very bad. In fact, CSS can solve this problem. It is very simple and fast to download, so there will be no download of images after the mouse is passed.

4. Principles and skills of using ID and class in Structure
Usage principles of ID and class
It is said that W3C sets the ID and class to be unique and the class is universal. ID must be unique and should be used in the periphery whenever possible. The class is reproducible and should be used within the structure as much as possible.
Tips for using ID and class
A. The child-level naming contains the part of the parent name starting. This makes it easy to clarify the hierarchy when writing CSS.
B. It is best not to use ID in the sublevel of class. Of course, special circumstances are special.
C. Class names should be case-insensitive. For example, newmovie is the most suitable method to use the explicit relationship with the first statement. Note that browsers other than IE are very case sensitive. Also, it must start with a letter.

From: Id = 227

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.