Example
Requirements:
1 width and height are 200 pixels;
2) The color is red #900;
Do it yourself and see if you can make it? Do not look at my code, if really do not come out, download down, followed by my next step-by-step changes.
Here's My Code:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Example 1</title>
<link rel= "stylesheet" type= "Text/css" href= "Css.css"/>
<body>
<div id= "Redblock" ></div>
</body>
/* CSS Document * *
#redBlock {
width:200px;
height:200px;
Background: #900;
}
The effects shown in IE6 and FF are as follows:
How, easier it ~, but you have not found that the red area from the top of the browser and the left side of the margin IE6 and FF are not the same, have you found? In this way, we made the page browser is not compatible, the effect is not the same? Why is that?
This is because each browser has a built-in CSS file, when you do not have a label on the property settings, the browser will apply the built-in CSS file, how to achieve browser compatibility? No hurry, you only need in the CSS file, will we currently apply to the tag body and Div 0 on OK, code so write
body,div{padding:0; margin:0;}
When you add this sentence, is not the two browser to show the same effect of the bar ~ the following figure
All right, let's move on, we're going to add one more condition.
Allow the red area to be 20 pixels from the top and left of the browser;
How, there is no train of thought? No idea okay, keep looking down
We just need to set the outer margin of the Red Square to add the following CSS code:
margin-top:20px;
margin-left:20px;
The effect of the following figure
This causes the red area to be positioned at page coordinates (20,20), with 20 pixels to the top and left margins of the browser.
But the above wording can be simplified as
margin:20px 0 0 20px;
The numerical order is: upper right and lower left.
and margin:20px 0 and margin:20px 0 20px 0; is equivalent yo ~ just more streamlined, so write CSS load faster.
We then extend the problem, how to make the red area horizontally positioned in the middle of the browser, regardless of the size of the browser window, the size of the display resolution.
Also very simple, just add the two words "margin-top:20px;margin-left:20px;" Amended to
margin:0 Auto;
How, interesting, the red area is located in the middle of the browser ~
Good ~!. Is it easy or simple to end the first class here!!! Kwoojan can guarantee that the following course is very simple, when you read the tutorial, will certainly say XHTML+CSS is so simple! easy!
If you do not understand, hurriedly click on the top of the course keyword, as long as you read these keywords, I believe you can definitely understand!
This article comes from www.cssxuexi.cn* respect others Labor achievement, reprint please consciously indicate the source!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
